/* Shared design tokens for the app pages (not the landing page, which has its own).
   Loaded before each page's own CSS. A page keeps variables that only it uses; a value it
   redeclares from here must stay identical. Same names and values the pages already used. */
:root {
  --white: #ffffff;
  --black: #000000;

  --primary-50: #f6f4fe;
  --primary-100: #ede9fd;
  --primary-200: #ddd6fb;
  --primary-300: #c6b9f7;
  --primary-400: #a895f0;
  --primary-500: #8b73e6;
  --primary-600: #7257d4;
  --primary-700: #5b42b0;
  --primary-800: #47338a;
  --primary-900: #332561;

  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-950: #0a0a0a;

  --error-50: #fef3f2;
  --error-500: #f04438;
  --error-600: #d92d20;
  --error-700: #b42318;

  --orange-100: #ffedd5;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --green-100: #cbece1;
  --green-800: #166534;
  --blue-100: #dae0fa;

  --scrim: rgba(10, 10, 10, 0.4);

  /* Semantic names (Design): they point at the scale above, never at a new value */
  --color-primary: var(--primary-600);
  --color-primary-hover: var(--primary-700);
  --color-primary-soft: var(--primary-100);
  --text-strong: var(--neutral-950); /* titles, big numbers */
  --text: var(--neutral-800); /* body text, inputs */
  --text-2: var(--neutral-600); /* secondary text, descriptions */
  --text-muted: var(--neutral-500); /* the lightest grey text that is still readable */
  --text-on-primary: var(--white);
  --surface: var(--white);
  --line: var(--neutral-200); /* borders of secondary buttons, inputs, cards */
  --line-brand: var(--primary-300); /* focus or chosen input */
  --right: var(--green-800); /* "right" text */
  --right-bg: #dcfce7;
  --accent-mint: #06a384;
  --wrong: #b4542c;
  --wrong-bg: #fdece6;
  --wrong-line: #ea580c;
  --success-bg: var(--right-bg);
  --success-text: var(--right);
  --warn-bg: #fff6e0; /* "waiting", not an error */
  --warn-text: #8a5a00;
  --danger: var(--error-600);
  /* The four review ratings */
  --rate-forgot: #fedbc9;
  --rate-hard: #fef2a7;
  --rate-good: #cbece1;
  --rate-easy: #dae0fa;

  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;

  --radius-xs: 4px;
  --radius-sm: 8px; /* key chips, tooltips */
  --radius-md: 12px; /* inputs, rail buttons */
  --radius-lg: 16px; /* notices, exercise cells */
  --radius-xl: 24px; /* cards, dialogs, bottom sheets */
  --radius-pill: 999px;
  --radius-card: var(--radius-xl);

  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.18); /* Figma shadow-xs-skeuomorphic */
  --shadow-card: 0 8px 24px rgba(71, 51, 138, 0.1);
  --shadow-raised: 0 8px 20px rgba(71, 51, 138, 0.22);
  --shadow-pop: 0 2px 2px -1px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 12px 16px -4px rgba(0, 0, 0, 0.08); /* Figma shadow-lg: dialogs, sheets, menus */

  /* 4px steps. Page margin by width: phone 16, rail 32, sidebar 56 (shell.css) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Type, phone → desktop (shell.css switches at 768px): display 36→64 Bold / 1.1, title 24→34 Bold / 1.25,
     auth title 26→32, section 18 SemiBold, body 16 / 1.5 (inputs always 16: no iOS zoom), small 14,
     caption 13 (12 at the very least), nav label 11 Medium (only next to an icon) */
  --fs-display: 36px;
  --fs-title: 24px;
  --fs-auth-title: 26px;
  --fs-section: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 13px;

  /* Figma text scale: size / line height */
  --fs-xs: 12px; --lh-xs: 18px;
  --fs-sm: 14px; --lh-sm: 20px;
  --fs-md: 16px; --lh-md: 24px;
  --fs-lg: 18px; --lh-lg: 28px;
  --fs-xl: 20px; --lh-xl: 30px;
  --fs-display-xs: 24px; --lh-display-xs: 32px;
  --fs-display-sm: 30px; --lh-display-sm: 38px;

  /* Motion: animate transform and opacity only; with prefers-reduced-motion keep fades ≤150ms */
  --dur-1: 100ms; /* press feedback */
  --dur-2: 150ms; /* fades, tooltips, scrims */
  --dur-3: 200ms; /* toast, dialog in */
  --dur-4: 300ms; /* sheet slide, card flip */
  --dur-5: 500ms; /* completion, celebration */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* things coming in */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* things leaving (about 0.75x the time in) */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* card flip */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* small pops only */

  /* Web shell (shell.css): page background beside the sidebar, and the sidebar's own colors */
  --page-bg: #f6f4fe;
  --nav-text: #52525c;
  --nav-active-bg: #ece8fe;
}

@media (min-width: 768px) {
  :root {
    --fs-display: 64px;
    --fs-title: 34px;
    --fs-auth-title: 32px;
  }
}