/* ==========================================================================
   PolyLinks Design System — Colors & Type
   Dark-first. Web brand font: Euclid Circular A (self-hosted).
   ========================================================================== */

/* Euclid Circular A — Swiss Typefaces, licensed for self-hosted @font-face only.
   Do NOT move these files to a CDN, Google Fonts, or any third-party host —
   the foundry license prohibits third-party font hosting services. Keep the
   files served from the same domain as the site. */
@font-face {
  font-family: 'Euclid Circular A';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/EuclidCircularA-Regular-WebM.woff2') format('woff2'),
       url('fonts/EuclidCircularA-Regular-WebM.woff')  format('woff');
}
@font-face {
  font-family: 'Euclid Circular A';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/EuclidCircularA-Medium-WebM.woff2') format('woff2'),
       url('fonts/EuclidCircularA-Medium-WebM.woff')  format('woff');
}
@font-face {
  font-family: 'Euclid Circular A';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/EuclidCircularA-Semibold-WebM.woff2') format('woff2'),
       url('fonts/EuclidCircularA-Semibold-WebM.woff')  format('woff');
}
@font-face {
  font-family: 'Euclid Circular A';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/EuclidCircularA-Bold-WebM.woff2') format('woff2'),
       url('fonts/EuclidCircularA-Bold-WebM.woff')  format('woff');
}

/* Euclid Flex — display companion to Circular A. Use for the wordmark, big
   stat numbers, and hero headlines only. Same license terms as above. */
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/EuclidFlex-Regular-WebS.woff2') format('woff2'),
       url('fonts/EuclidFlex-Regular-WebS.woff')  format('woff');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/EuclidFlex-Medium-WebS.woff2') format('woff2'),
       url('fonts/EuclidFlex-Medium-WebS.woff')  format('woff');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/EuclidFlex-Semibold-WebS.woff2') format('woff2'),
       url('fonts/EuclidFlex-Semibold-WebS.woff')  format('woff');
}
@font-face {
  font-family: 'Euclid Flex';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/EuclidFlex-Bold-WebS.woff2') format('woff2'),
       url('fonts/EuclidFlex-Bold-WebS.woff')  format('woff');
}

@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Round&display=block');

:root {
  /* ── BASE COLOR ───────────────────────────────────────────────────────── */
  --pl-yellow:        #FFD100;  /* primary — taxi yellow, the chain-logo ground */
  --pl-teal:          #4ECDC4;  /* secondary accent, "good" state */
  --pl-coral:         #FF6B6B;  /* streak fire, alert accent */
  --pl-red:           #FF4444;  /* error */
  --pl-green:         #81C784;  /* success */
  --pl-orange:        #FF9F43;  /* warm accent */
  --pl-purple:        #A78BFA;  /* cool accent */

  --pl-bg:            #1A1A1A;  /* default scaffold */
  --pl-bg-blue:       #001A2E;
  --pl-bg-green:      #0D2114;
  --pl-bg-red:        #2A0D0D;
  --pl-bg-yellow:     #241F00;
  --pl-bg-sheet:      #2A2A2A;  /* bottom sheets */
  --pl-bg-dialog:     #1C1C1E;  /* dialogs */
  --pl-bg-quieter:    #111111;

  /* Foreground (on dark bg) — Flutter white opacities */
  --pl-fg:            rgba(255,255,255,1.00);  /* white */
  --pl-fg-1:          rgba(255,255,255,0.70);  /* white70 — body */
  --pl-fg-2:          rgba(255,255,255,0.54);  /* white54 — meta */
  --pl-fg-3:          rgba(255,255,255,0.38);  /* white38 — caption / section labels */
  --pl-fg-4:          rgba(255,255,255,0.24);  /* white24 — disabled */
  --pl-fg-5:          rgba(255,255,255,0.12);  /* white12 — borders */

  /* Surfaces (alpha over dark bg) */
  --pl-surface-1:     rgba(255,255,255,0.05);  /* quiet */
  --pl-surface-2:     rgba(255,255,255,0.08);  /* resting card / chip */
  --pl-surface-3:     rgba(255,255,255,0.10);  /* chip bg */
  --pl-surface-sel:   rgba(255,209,0,0.15);    /* selected state tint (yellow @15%) */

  --pl-scrim:         rgba(26,26,26,0.80);     /* 0xCC1A1A1A */
  --pl-scrim-strong:  rgba(26,26,26,0.87);     /* 0xDD1A1A1A */

  /* Borders */
  --pl-border:        rgba(255,255,255,0.10);  /* default */
  --pl-border-strong: rgba(255,255,255,0.24);  /* interactive */
  --pl-border-hair:   rgba(255,255,255,0.12);  /* hairline */
  --pl-border-sel:    var(--pl-yellow);        /* selected */

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
  --pl-font-sans:
    'Euclid Circular A',
    -apple-system, BlinkMacSystemFont,
    'SF Pro Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --pl-font-display:
    'Euclid Flex',
    'Euclid Circular A',
    -apple-system, BlinkMacSystemFont,
    'SF Pro Display', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --pl-font-mono:
    'SF Mono', ui-monospace, Menlo, Monaco,
    'Cascadia Mono', 'Roboto Mono', Consolas, monospace;

  /* Type scale — mirrors Flutter fontSize tokens */
  --pl-text-xs:       11px;   /* section labels ALL CAPS */
  --pl-text-sm:       13px;
  --pl-text-base:     14px;
  --pl-text-md:       16px;
  --pl-text-lg:       17px;
  --pl-text-xl:       20px;
  --pl-text-2xl:      22px;
  --pl-text-3xl:      24px;
  --pl-text-4xl:      28px;
  --pl-text-5xl:      32px;
  --pl-text-6xl:      42px;
  --pl-text-7xl:      48px;
  --pl-text-8xl:      64px;

  /* Line heights */
  --pl-leading-tight: 1.1;
  --pl-leading-snug:  1.25;
  --pl-leading-body:  1.45;

  /* Letter spacing */
  --pl-track-tight:   -0.5px;   /* wordmarks, big stats */
  --pl-track-normal:  0;
  --pl-track-wide:    1.4px;    /* ALL-CAPS section labels */

  /* ── SPACING ──────────────────────────────────────────────────────────── */
  --pl-space-1:       4px;
  --pl-space-2:       6px;
  --pl-space-3:       8px;
  --pl-space-4:       10px;
  --pl-space-5:       12px;
  --pl-space-6:       14px;
  --pl-space-7:       16px;
  --pl-space-8:       20px;
  --pl-space-9:       24px;   /* default page padding */
  --pl-space-10:      28px;
  --pl-space-11:      32px;
  --pl-space-12:      40px;
  --pl-space-13:      48px;
  --pl-space-14:      56px;

  /* ── RADII ────────────────────────────────────────────────────────────── */
  --pl-radius-xs:     2px;
  --pl-radius-sm:     4px;
  --pl-radius-md:     8px;
  --pl-radius-lg:     12px;
  --pl-radius-xl:     14px;   /* default card */
  --pl-radius-2xl:    16px;   /* default chip / language pill */
  --pl-radius-3xl:    20px;   /* large buttons, toasts */
  --pl-radius-4xl:    24px;   /* bottom sheets */
  --pl-radius-pill:   999px;

  /* ── SHADOWS / GLOW ───────────────────────────────────────────────────── */
  /* Barely used; depth is translucent surfaces over dark bg. */
  --pl-glow-yellow:   0 0 24px 0 rgba(255,209,0,0.30);
  --pl-glow-coral:    0 0 24px 0 rgba(255,107,107,0.30);
  --pl-elev-sheet:    0 -8px 24px 0 rgba(0,0,0,0.4);

  /* ── MOTION ──────────────────────────────────────────────────────────── */
  --pl-dur-fast:      200ms;
  --pl-dur-base:      300ms;
  --pl-dur-slow:      400ms;
  --pl-dur-intro:     900ms;
  --pl-ease:          cubic-bezier(0.4, 0, 0.2, 1); /* Curves.easeInOut */
  --pl-ease-in:       cubic-bezier(0.4, 0, 1, 1);   /* Curves.easeIn */
}

/* ──────────────────────────────────────────────────────────────────────────
   Base + semantic type styles
   ────────────────────────────────────────────────────────────────────────── */

html, body {
  background: var(--pl-bg);
  color: var(--pl-fg);
  font-family: var(--pl-font-sans);
  font-size: var(--pl-text-md);
  line-height: var(--pl-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic type */
.pl-display {
  font-size: var(--pl-text-8xl);
  font-weight: 700;
  letter-spacing: var(--pl-track-tight);
  line-height: var(--pl-leading-tight);
}
.pl-h1 {
  font-size: var(--pl-text-5xl);
  font-weight: 700;
  letter-spacing: var(--pl-track-tight);
  line-height: var(--pl-leading-tight);
}
.pl-h2 {
  font-size: var(--pl-text-4xl);
  font-weight: 700;
  letter-spacing: var(--pl-track-tight);
  line-height: var(--pl-leading-snug);
}
.pl-h3 {
  font-size: var(--pl-text-2xl);
  font-weight: 700;
  line-height: var(--pl-leading-snug);
}
.pl-stat {
  font-size: var(--pl-text-2xl);
  font-weight: 700;
  letter-spacing: var(--pl-track-tight);
  line-height: 1;
}
.pl-body {
  font-size: var(--pl-text-md);
  font-weight: 400;
  line-height: var(--pl-leading-body);
  color: var(--pl-fg-1);
}
.pl-body-strong {
  font-size: var(--pl-text-lg);
  font-weight: 600;
  color: var(--pl-fg);
}
.pl-meta {
  font-size: var(--pl-text-base);
  color: var(--pl-fg-2);
}
.pl-caption {
  font-size: var(--pl-text-xs);
  color: var(--pl-fg-3);
}
.pl-section-label {
  font-size: var(--pl-text-xs);
  font-weight: 700;
  letter-spacing: var(--pl-track-wide);
  text-transform: uppercase;
  color: var(--pl-fg-3);
}
.pl-button-label {
  font-size: var(--pl-text-md);
  font-weight: 600;
  line-height: 1;
}

/* Display face — Euclid Flex. Use sparingly: wordmark, hero numbers, big headlines. */
.pl-display-face {
  font-family: var(--pl-font-display);
}

/* The PolyLinks wordmark — "Poly" + yellow "Links" pill */
.pl-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
  letter-spacing: var(--pl-track-tight);
  line-height: 1;
}
.pl-wordmark > .poly  { color: var(--pl-fg); }
.pl-wordmark > .links {
  background: var(--pl-yellow);
  color: var(--pl-bg);
  padding: 4px 10px;
  border-radius: var(--pl-radius-md);
}

/* Material Symbols helper */
.pl-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.pl-icon.filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }