@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ==========================================================================
   tokens.css — design tokens (SPEC Contract 2)
   Owner: design layer. Load first: tokens.css -> base.css -> theme.css.

   Concept "Calm signal": paper-and-ink neutrals, one petrol-teal signal
   colour, mono micro-type as the "data voice". See design/DESIGN.md.

   Theme-dependent tokens (colour, gradients, shadows, hero motif) are
   redefined for dark under BOTH:
     :root[data-theme="dark"]                                  (explicit)
     @media (prefers-color-scheme: dark) :root:not([data-theme="light"])
   Keep those two dark blocks identical. Type/space/shape/motion tokens are
   theme-independent and live on :root only (they apply to both themes).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Colour: light ------------------------------------------------- */
  --color-bg: #F8F7F4;              /* warm paper */
  --color-bg-alt: #F1EFEA;          /* alternate section band */
  --color-surface: #FFFFFF;         /* cards */
  --color-surface-2: #EEEDE7;       /* tags, media wells, sunken areas */
  --color-text: #0F1A2A;            /* ink */
  --color-text-muted: #4D5767;
  --color-border: #E2E0D9;          /* hairlines (decorative) */
  --color-border-strong: #8C8A83;   /* >= 3:1 boundaries (ghost btn, dashed card) */
  --color-accent: #0B6E69;          /* petrol teal — the one signal colour */
  --color-accent-hover: #085753;
  --color-accent-contrast: #FFFFFF; /* text/icons on --color-accent */
  --color-accent-soft: #DDEFEB;     /* tinted wells: icon tiles, hover fills */
  --color-accent-line: #A8D2CB;     /* decorative accent borders */
  --color-focus: #0B6E69;
  --color-success: #15803D;         /* availability status dot */
  --color-success-ring: rgba(21, 128, 61, 0.22);
  --color-selection: #CBE7E1;
  --color-header-bg: rgba(248, 247, 244, 0.84);
  --color-header-border: rgba(15, 26, 42, 0.08);
  --color-grid: rgba(15, 26, 42, 0.055);
  --color-glow-1: rgba(11, 110, 105, 0.13);
  --color-glow-2: rgba(56, 110, 220, 0.08);

  /* ---- Effects: light ------------------------------------------------ */
  /* Layer order (top -> bottom): fade-to-bg at the bottom (seamless join with
     the next section), accent glow (top right), cool glow (left), vignette
     that fades the grid into --color-bg, vertical + horizontal grid lines.
     Every layer fills the box, so no background-size is needed. */
  --gradient-hero:
    linear-gradient(to bottom, transparent 72%, var(--color-bg)),
    radial-gradient(56rem 34rem at 88% -12%, var(--color-glow-1), transparent 70%),
    radial-gradient(44rem 30rem at -6% 72%, var(--color-glow-2), transparent 70%),
    radial-gradient(ellipse 90% 80% at 66% 32%, transparent 18%, var(--color-bg) 80%),
    repeating-linear-gradient(90deg, var(--color-grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--color-grid) 0 1px, transparent 1px 64px);
  /* Hero motif: many sources -> one hub -> three consumers (data integration).
     1200x640 intrinsic SVG; applied on top of --gradient-hero in theme.css. */
  --hero-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='640' viewBox='0 0 1200 640' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='1200' y2='0'%3E%3Cstop offset='0' stop-color='%230B6E69' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%230B6E69' stop-opacity='0'/%3E%3Cstop offset='.56' stop-color='%230B6E69'/%3E%3Cstop offset='.82' stop-color='%230B6E69'/%3E%3Cstop offset='1' stop-color='%230B6E69' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.36'%3E%3Cg stroke='url(%23f)' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M0 72C360 72 470 320 760 320'/%3E%3Cpath d='M0 152C360 152 470 320 760 320'/%3E%3Cpath d='M0 232C360 232 470 320 760 320'/%3E%3Cpath d='M0 312C360 312 470 320 760 320'/%3E%3Cpath d='M0 392C360 392 470 320 760 320'/%3E%3Cpath d='M0 472C360 472 470 320 760 320'/%3E%3Cpath d='M0 552C360 552 470 320 760 320'/%3E%3Cpath d='M760 320C960 320 1010 200 1200 200'/%3E%3Cpath d='M760 320H1200'/%3E%3Cpath d='M760 320C960 320 1010 440 1200 440'/%3E%3C/g%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='471' cy='232.7' r='2.5'/%3E%3Ccircle cx='471' cy='317.2' r='2.5'/%3E%3Ccircle cx='471' cy='401.7' r='2.5'/%3E%3Ccircle cx='1010' cy='249.5' r='2.5'/%3E%3Ccircle cx='1060' cy='320' r='2.5'/%3E%3C/g%3E%3Ccircle cx='760' cy='320' r='4.5' fill='%230B6E69'/%3E%3Ccircle cx='760' cy='320' r='14' stroke='%230B6E69' stroke-opacity='.45'/%3E%3Ccircle cx='760' cy='320' r='30' stroke='%230B6E69' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");

  --shadow-sm: 0 1px 2px rgba(15, 26, 42, 0.05), 0 1px 1px rgba(15, 26, 42, 0.03);
  --shadow-md: 0 6px 16px -6px rgba(15, 26, 42, 0.12), 0 2px 4px -2px rgba(15, 26, 42, 0.06);
  --shadow-lg: 0 24px 48px -18px rgba(15, 26, 42, 0.22), 0 6px 12px -6px rgba(15, 26, 42, 0.08);

  /* ---- Typography (theme-independent) -------------------------------- */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fluid scale, interpolated between 360px and 1440px viewports (rem-based,
     so browser zoom/text-size still scales). Min -> max in px in comments. */
  --fs-xs: clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);    /* 12 -> 13 */
  --fs-sm: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);   /* 14 -> 15 */
  --fs-base: clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);     /* 16 -> 17 */
  --fs-lg: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);     /* 18 -> 20 */
  --fs-xl: clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);       /* 20 -> 24 */
  --fs-2xl: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);         /* 24 -> 32 */
  --fs-3xl: clamp(1.875rem, 1.5833rem + 1.2963vw, 2.75rem);    /* 30 -> 44 */
  --fs-display: clamp(2.5rem, 1.75rem + 3.3333vw, 4.75rem);    /* 40 -> 76 */

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;
  --measure: 62ch;                  /* comfortable paragraph width */

  /* ---- Space & shape (theme-independent) ----------------------------- */
  --space-1: 0.25rem;                                         /*  4 */
  --space-2: 0.5rem;                                          /*  8 */
  --space-3: 0.75rem;                                         /* 12 */
  --space-4: 1rem;                                            /* 16 */
  --space-5: 1.5rem;                                          /* 24 */
  --space-6: 2rem;                                            /* 32 */
  --space-7: clamp(2.5rem, 2.2917rem + 0.9259vw, 3rem);       /* 40 -> 48 */
  --space-8: clamp(3rem, 2.6667rem + 1.4815vw, 4rem);         /* 48 -> 64 */
  --space-9: clamp(4rem, 3.3333rem + 2.963vw, 6rem);          /* 64 -> 96 */
  --space-10: clamp(5rem, 4rem + 4.4444vw, 8rem);             /* 80 -> 128 */

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-pill: 999px;

  --container-max: 72rem;                                     /* 1152px */
  --container-pad: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);   /* 16 -> 32 side gutter */
  --header-h: 4rem;
  --card-pad: clamp(1.25rem, 1rem + 1.1111vw, 2rem);          /* 20 -> 32 */
  --timeline-dot: 0.875rem;
  --timeline-gutter: 2.25rem;

  /* ---- Motion (theme-independent) ------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 280ms;
  --duration-slow: 700ms;
}

/* ---- Dark: explicit choice ------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0B111C;
  --color-bg-alt: #0E1522;
  --color-surface: #121A27;
  --color-surface-2: #1A2331;
  --color-text: #E7EBF0;
  --color-text-muted: #9AA5B4;
  --color-border: #243042;
  --color-border-strong: #5F6B7D;
  --color-accent: #3CCFBF;
  --color-accent-hover: #6EDDD0;
  --color-accent-contrast: #04211E;
  --color-accent-soft: #11302F;
  --color-accent-line: #1F5753;
  --color-focus: #6EDDD0;
  --color-success: #4ADE80;
  --color-success-ring: rgba(74, 222, 128, 0.22);
  --color-selection: #1E4A47;
  --color-header-bg: rgba(11, 17, 28, 0.8);
  --color-header-border: rgba(231, 235, 240, 0.08);
  --color-grid: rgba(231, 235, 240, 0.045);
  --color-glow-1: rgba(60, 207, 191, 0.14);
  --color-glow-2: rgba(96, 130, 255, 0.11);

  --gradient-hero:
    linear-gradient(to bottom, transparent 72%, var(--color-bg)),
    radial-gradient(56rem 34rem at 88% -12%, var(--color-glow-1), transparent 70%),
    radial-gradient(44rem 30rem at -6% 72%, var(--color-glow-2), transparent 70%),
    radial-gradient(ellipse 90% 80% at 66% 32%, transparent 18%, var(--color-bg) 80%),
    repeating-linear-gradient(90deg, var(--color-grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--color-grid) 0 1px, transparent 1px 64px);
  --hero-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='640' viewBox='0 0 1200 640' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='1200' y2='0'%3E%3Cstop offset='0' stop-color='%233CCFBF' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%233CCFBF' stop-opacity='0'/%3E%3Cstop offset='.56' stop-color='%233CCFBF'/%3E%3Cstop offset='.82' stop-color='%233CCFBF'/%3E%3Cstop offset='1' stop-color='%233CCFBF' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.32'%3E%3Cg stroke='url(%23f)' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M0 72C360 72 470 320 760 320'/%3E%3Cpath d='M0 152C360 152 470 320 760 320'/%3E%3Cpath d='M0 232C360 232 470 320 760 320'/%3E%3Cpath d='M0 312C360 312 470 320 760 320'/%3E%3Cpath d='M0 392C360 392 470 320 760 320'/%3E%3Cpath d='M0 472C360 472 470 320 760 320'/%3E%3Cpath d='M0 552C360 552 470 320 760 320'/%3E%3Cpath d='M760 320C960 320 1010 200 1200 200'/%3E%3Cpath d='M760 320H1200'/%3E%3Cpath d='M760 320C960 320 1010 440 1200 440'/%3E%3C/g%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='471' cy='232.7' r='2.5'/%3E%3Ccircle cx='471' cy='317.2' r='2.5'/%3E%3Ccircle cx='471' cy='401.7' r='2.5'/%3E%3Ccircle cx='1010' cy='249.5' r='2.5'/%3E%3Ccircle cx='1060' cy='320' r='2.5'/%3E%3C/g%3E%3Ccircle cx='760' cy='320' r='4.5' fill='%233CCFBF'/%3E%3Ccircle cx='760' cy='320' r='14' stroke='%233CCFBF' stroke-opacity='.45'/%3E%3Ccircle cx='760' cy='320' r='30' stroke='%233CCFBF' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 28px 56px -20px rgba(0, 0, 0, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.4);
}

/* ---- Dark: system preference (unless the user picked light) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0B111C;
    --color-bg-alt: #0E1522;
    --color-surface: #121A27;
    --color-surface-2: #1A2331;
    --color-text: #E7EBF0;
    --color-text-muted: #9AA5B4;
    --color-border: #243042;
    --color-border-strong: #5F6B7D;
    --color-accent: #3CCFBF;
    --color-accent-hover: #6EDDD0;
    --color-accent-contrast: #04211E;
    --color-accent-soft: #11302F;
    --color-accent-line: #1F5753;
    --color-focus: #6EDDD0;
    --color-success: #4ADE80;
    --color-success-ring: rgba(74, 222, 128, 0.22);
    --color-selection: #1E4A47;
    --color-header-bg: rgba(11, 17, 28, 0.8);
    --color-header-border: rgba(231, 235, 240, 0.08);
    --color-grid: rgba(231, 235, 240, 0.045);
    --color-glow-1: rgba(60, 207, 191, 0.14);
    --color-glow-2: rgba(96, 130, 255, 0.11);

    --gradient-hero:
      linear-gradient(to bottom, transparent 72%, var(--color-bg)),
      radial-gradient(56rem 34rem at 88% -12%, var(--color-glow-1), transparent 70%),
      radial-gradient(44rem 30rem at -6% 72%, var(--color-glow-2), transparent 70%),
      radial-gradient(ellipse 90% 80% at 66% 32%, transparent 18%, var(--color-bg) 80%),
      repeating-linear-gradient(90deg, var(--color-grid) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(0deg, var(--color-grid) 0 1px, transparent 1px 64px);
    --hero-flow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='640' viewBox='0 0 1200 640' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='f' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='1200' y2='0'%3E%3Cstop offset='0' stop-color='%233CCFBF' stop-opacity='0'/%3E%3Cstop offset='.2' stop-color='%233CCFBF' stop-opacity='0'/%3E%3Cstop offset='.56' stop-color='%233CCFBF'/%3E%3Cstop offset='.82' stop-color='%233CCFBF'/%3E%3Cstop offset='1' stop-color='%233CCFBF' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='.32'%3E%3Cg stroke='url(%23f)' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M0 72C360 72 470 320 760 320'/%3E%3Cpath d='M0 152C360 152 470 320 760 320'/%3E%3Cpath d='M0 232C360 232 470 320 760 320'/%3E%3Cpath d='M0 312C360 312 470 320 760 320'/%3E%3Cpath d='M0 392C360 392 470 320 760 320'/%3E%3Cpath d='M0 472C360 472 470 320 760 320'/%3E%3Cpath d='M0 552C360 552 470 320 760 320'/%3E%3Cpath d='M760 320C960 320 1010 200 1200 200'/%3E%3Cpath d='M760 320H1200'/%3E%3Cpath d='M760 320C960 320 1010 440 1200 440'/%3E%3C/g%3E%3Cg fill='url(%23f)'%3E%3Ccircle cx='471' cy='232.7' r='2.5'/%3E%3Ccircle cx='471' cy='317.2' r='2.5'/%3E%3Ccircle cx='471' cy='401.7' r='2.5'/%3E%3Ccircle cx='1010' cy='249.5' r='2.5'/%3E%3Ccircle cx='1060' cy='320' r='2.5'/%3E%3C/g%3E%3Ccircle cx='760' cy='320' r='4.5' fill='%233CCFBF'/%3E%3Ccircle cx='760' cy='320' r='14' stroke='%233CCFBF' stroke-opacity='.45'/%3E%3Ccircle cx='760' cy='320' r='30' stroke='%233CCFBF' stroke-opacity='.18'/%3E%3C/g%3E%3C/svg%3E");

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.55), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 28px 56px -20px rgba(0, 0, 0, 0.7), 0 8px 16px -8px rgba(0, 0, 0, 0.4);
  }
}