/*
 * Icana design tokens, copied from website/css/site-v3.css in
 * Icana-AI/Icana_Website_v2 by scripts/sync_tokens.sh. Do not edit by hand:
 * scripts/check.sh fails when this file drifts from the website.
 */
:root {
  color-scheme: light;

  /* Indigo scale */
  --in-50:  #EFF1FE;
  --in-100: #E0E6FE;
  --in-200: #C7D2FF;
  --in-300: #A6B4FD;
  --in-400: #8299F7;
  --in-500: #647FF2;
  --in-600: #4766E5;
  --in-700: #3756CB;
  --in-800: #3146A3;
  --in-900: #2D3F7F;
  --in-950: #1B244B;

  /* Semantic */
  --primary-btn: #3146A3;
  --primary-dark: #2D3F7F;
  --accent: #4766E5;
  --ink: #16203F;                 /* headings */
  --body-color: #3F4657;          /* body text — blog-derived readability */
  --muted: #646B80;
  --faint: #6A7086;
  --line: #E4E8F7;                /* hairlines */
  --tint: #F7F8FE;                /* alt section background */
  --tint-deep: #EFF1FE;
  --surface: #fff;                /* page background */
  --card-bg: #fff;                /* cards + raised panels */
  --wash: var(--in-50);           /* subtle indigo wash: hovers, tiles */
  --wash-line: var(--in-100);     /* borders on wash surfaces */
  --ink-strong: var(--in-950);    /* display headings, nav labels */
  --link: var(--in-700);
  --link-hover: var(--in-600);
  --accent-text: var(--in-600);   /* eyebrows, small accent labels */
  --grad: linear-gradient(100deg, #4766E5 0%, #8299F7 100%);
  --grad-dark: linear-gradient(160deg, #1B244B 0%, #2D3F7F 78%, #3146A3 100%);

  /* Shape + elevation */
  --r-card: 20px;
  --r-input: 12px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 36, 75, 0.06), 0 2px 8px rgba(27, 36, 75, 0.05);
  --shadow-md: 0 2px 6px rgba(27, 36, 75, 0.06), 0 12px 32px rgba(27, 36, 75, 0.10);
  --shadow-lg: 0 4px 12px rgba(27, 36, 75, 0.08), 0 24px 64px rgba(27, 36, 75, 0.14);

  /* Rhythm */
  --sec-y: clamp(4rem, 3rem + 4vw, 7rem);
  --nav-h: 72px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink: #EDF0FC;
  --body-color: #C7CDE1;
  --muted: #A4ABC6;
  --faint: #8189A6;
  --line: #262E52;
  --tint: #10152E;
  --tint-deep: #151B36;
  --surface: #0D1226;
  --card-bg: #151B36;
  --wash: #1B2244;
  --wash-line: #293158;
  --ink-strong: #F4F6FF;
  --link: var(--in-300);
  --link-hover: var(--in-200);
  --accent-text: var(--in-400);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.4);
}

/* The dark set again for the system setting (no inline pre-paint script here). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink: #EDF0FC;
    --body-color: #C7CDE1;
    --muted: #A4ABC6;
    --faint: #8189A6;
    --line: #262E52;
    --tint: #10152E;
    --tint-deep: #151B36;
    --surface: #0D1226;
    --card-bg: #151B36;
    --wash: #1B2244;
    --wash-line: #293158;
    --ink-strong: #F4F6FF;
    --link: var(--in-300);
    --link-hover: var(--in-200);
    --accent-text: var(--in-400);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 24px 64px rgba(0, 0, 0, 0.4);
  }
}