/* ==========================================================================
   tokens.css — Design token layer for DSM-5 Learning Lab
   --------------------------------------------------------------------------
   Same layered architecture as the reference site (tokens -> base ->
   components -> pages) so the app can be operated the same simple way.
   Distinct palette (indigo/amber) gives DSM-5 Learning Lab its own identity
   without inventing a new visual system. WCAG AA text contrast throughout.
   ========================================================================== */

:root {
  /* --- Palette --- */
  --color-ink-900: #191b2e;
  --color-ink-700: #24273f;
  --color-primary-900: #2a2d6b;   /* deep indigo brand */
  --color-primary-700: #3b3f8f;
  --color-slate-600: #4a4f6a;
  --color-slate-500: #616787;     /* subtle text -- AA on paper */
  --color-slate-400: #8b90ab;
  --color-line-300: #d8dae6;
  --color-line-200: #e9eaf2;
  --color-paper-100: #f5f5fa;
  --color-paper-050: #fbfbfd;
  --color-white: #ffffff;
  --color-accent-600: #9a5a10;    /* warm amber, sparing */
  --color-accent-500: #b26b16;
  --color-accent-050: #fbf0df;
  --color-success-700: #1f6f43;
  --color-warning-700: #8a5a00;
  --color-error-700:   #a12626;
  --color-info-700:    #1d5a8a;

  /* --- Semantic tokens --- */
  --c-primary:        var(--color-primary-900);
  --c-primary-hover:  var(--color-primary-700);
  --c-secondary:      var(--color-slate-600);
  --c-accent:         var(--color-accent-600);
  --c-accent-soft:    var(--color-accent-050);
  --c-bg:             var(--color-white);
  --c-bg-alt:         var(--color-paper-100);
  --c-bg-raised:      var(--color-paper-050);
  --c-text:           var(--color-ink-900);
  --c-text-muted:     var(--color-slate-600);
  --c-text-subtle:    var(--color-slate-500);
  --c-text-invert:    var(--color-white);
  --c-border:         var(--color-line-300);
  --c-border-soft:    var(--color-line-200);
  --c-focus:          #9a5a10;
  --c-focus-on-dark:  #e8bf85;
  --c-success:        var(--color-success-700);
  --c-warning:        var(--color-warning-700);
  --c-error:          var(--color-error-700);
  --c-info:           var(--color-info-700);

  /* Difficulty vocabulary colors (easy/medium/hard) */
  --c-difficulty-easy:   var(--color-success-700);
  --c-difficulty-medium: var(--color-warning-700);
  --c-difficulty-hard:   var(--color-error-700);

  /* --- Typography (system stacks -- no third-party font dependency) --- */
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace;

  --fs-100: 0.833rem;
  --fs-200: 0.9rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-600: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --fs-700: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-800: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

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

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Layout --- */
  --measure: 68ch;
  --container-max: 72rem;
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  /* --- Radius / shadow / border --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-w: 1px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 61, 0.06), 0 1px 3px rgba(20, 22, 61, 0.08);
  --shadow-md: 0 2px 6px rgba(20, 22, 61, 0.08), 0 6px 16px rgba(20, 22, 61, 0.08);

  /* --- Motion --- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  /* --- Focus ring --- */
  --focus-ring: 3px solid var(--c-focus);
  --focus-offset: 2px;

  /* --- z-index scale --- */
  --z-header: 100;
  --z-skiplink: 200;
  --z-menu: 150;
}