/* AI Academy design tokens: Graphite & Emerald (D37).
   One accent. Everything else is black, white and grey.
   Use the semantic tokens (--surface, --text, --accent…), not the raw scale. */

:root {
  /* raw scale */
  --graphite-950: #0B0B0F;
  --graphite-900: #15151B;
  --graphite-800: #24242C;
  --graphite-700: #3A3A44;
  --graphite-500: #6B6B76;
  --graphite-400: #8A8A94;
  --graphite-300: #B4B4BE;
  --graphite-200: #E4E4EA;
  --graphite-100: #F1F1F4;
  --graphite-50:  #FAFAFA;
  --emerald-700: #095F45;
  --emerald-600: #0B7353;
  --emerald-500: #0E8A63;
  --emerald-300: #2BB583;
  --emerald-100: #DCF2E9;
  --amber-600: #9A6512;
  --amber-500: #B7791F;
  --amber-300: #E5A93B;
  --amber-100: #FBEFD6;
  --red-600: #B42318;
  --red-100: #FDE7E5;

  /* surfaces and text (light) */
  --surface: var(--graphite-50);
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--graphite-100);
  --surface-inverse: var(--graphite-950);
  --text: #4B4B55;
  --text-strong: var(--graphite-950);
  --text-muted: var(--graphite-500);
  --text-inverse: var(--graphite-50);
  --line: var(--graphite-200);
  --line-strong: var(--graphite-300);

  /* the accent: --accent for bars and marks, --accent-strong for text and links,
     --accent-fill + --on-accent for buttons (all AA on their surface) */
  --accent: var(--emerald-500);
  --accent-strong: var(--emerald-600);
  --accent-fill: var(--emerald-600);
  --accent-hover: var(--emerald-700);
  --accent-soft: var(--emerald-100);
  --on-accent: #FFFFFF;

  --danger: var(--red-600);
  --danger-soft: var(--red-100);
  --warm: var(--amber-500);
  --warm-soft: var(--amber-100);

  /* type */
  --font-sans: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: clamp(36px, 6vw, 56px);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-tight: -0.035em;
  --tracking-snug: -0.02em;
  --tracking-caps: 0.14em;
  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-body: 1.6;

  /* space (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* shape and depth */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 11, 15, .05);
  --shadow-md: 0 1px 2px rgba(11, 11, 15, .04), 0 12px 32px rgba(20, 20, 40, .08);
  --shadow-lg: 0 2px 4px rgba(11, 11, 15, .04), 0 24px 56px rgba(20, 20, 40, .14);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  /* layout */
  --page-max: 1120px;
  --page-gutter: 24px;
  --nav-height: 64px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: 160ms;

  color-scheme: light;
}

/* dark: graphite surfaces, brighter emerald so it reads on near-black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--graphite-950);
    --surface-raised: var(--graphite-900);
    --surface-sunken: #101015;
    --surface-inverse: var(--graphite-50);
    --text: var(--graphite-300);
    --text-strong: #F4F4F6;
    --text-muted: #8E8E9A;
    --text-inverse: var(--graphite-950);
    --line: var(--graphite-800);
    --line-strong: var(--graphite-700);
    --accent: var(--emerald-300);
    --accent-strong: var(--emerald-300);
    --accent-fill: var(--emerald-300);
    --accent-hover: #4CC99A;
    --accent-soft: color-mix(in srgb, var(--emerald-300) 14%, transparent);
    --on-accent: var(--graphite-950);
    --warm: var(--amber-300);
    --warm-soft: color-mix(in srgb, var(--amber-300) 14%, transparent);
    --danger: #F97066;
    --danger-soft: color-mix(in srgb, #F97066 14%, transparent);
    --shadow-md: none;
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: var(--graphite-950);
  --surface-raised: var(--graphite-900);
  --surface-sunken: #101015;
  --surface-inverse: var(--graphite-50);
  --text: var(--graphite-300);
  --text-strong: #F4F4F6;
  --text-muted: #8E8E9A;
  --text-inverse: var(--graphite-950);
  --line: var(--graphite-800);
  --line-strong: var(--graphite-700);
  --accent: var(--emerald-300);
  --accent-strong: var(--emerald-300);
  --accent-fill: var(--emerald-300);
  --accent-hover: #4CC99A;
  --accent-soft: color-mix(in srgb, var(--emerald-300) 14%, transparent);
  --on-accent: var(--graphite-950);
  --warm: var(--amber-300);
  --warm-soft: color-mix(in srgb, var(--amber-300) 14%, transparent);
  --danger: #F97066;
  --danger-soft: color-mix(in srgb, #F97066 14%, transparent);
  --shadow-md: none;
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* Families skin: Leaders pages keep a warm amber accent and softer corners */
.skin-kids {
  --accent: var(--amber-300);
  --accent-strong: var(--amber-600);
  --accent-fill: var(--amber-300);
  --accent-hover: #D4952A;
  --accent-soft: var(--amber-100);
  --on-accent: var(--graphite-950);
  --radius-md: 12px;
  --radius-lg: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .skin-kids { --accent-strong: var(--amber-300); --accent-soft: color-mix(in srgb, var(--amber-300) 14%, transparent); }
}
:root[data-theme="dark"] .skin-kids { --accent-strong: var(--amber-300); --accent-soft: color-mix(in srgb, var(--amber-300) 14%, transparent); }