:root {
  --color-bg:             #FFFFFF;
  --color-surface:        #F8F9FB;
  --color-border:         #E4E7EC;
  --color-text-primary:   #1C375B;
  /* duplicate of --color-text-muted, kept for the 25 existing template references; consolidate later */
  --color-text-secondary: #667085;
  --color-text-muted:     #667085;
  --color-accent:         #D9634A;
  --color-accent-strong:  #B6533E;
  --color-accent-light:   #FCF3F1;
  --color-navy-light:     #EDEFF2;
  --color-success:        #16A34A;
  --color-error:          #DC2626;
  --color-text-inverse:   #FFFFFF;
  --color-info:           #1D4ED8;
  --gradient-subtle:      radial-gradient(ellipse at top left, var(--color-navy-light) 0%, var(--color-navy-light) 35%, transparent 100%),
                          radial-gradient(ellipse at top right, var(--color-accent-light) 0%, var(--color-accent-light) 35%, transparent 100%);

  /* PDF content-text -- kept intentionally distinct from web's navy text color */
  --color-ink:            #0C0C0C;
  --color-ink-soft:       #333333;

  /* semantic flash surfaces (background + border pairs) */
  --color-error-bg:       #FEF2F2;   --color-error-border:   #FECACA;
  --color-success-bg:     #F0FDF4;   --color-success-border: #BBF7D0;
  --color-info-bg:        #EFF6FF;   --color-info-border:    #BFDBFE;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 2px rgba(217, 99, 74, 0.25);  /* terracotta focus ring */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ---------- Spacing (8-step, 4px grid) ---------- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-4-5: 1.25rem; /* 20px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */

  /* ---------- Type scale ---------- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-display: clamp(1.75rem, 3vw + 1rem, 2.75rem);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---------- Border radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ---------- Border width ---------- */
  --border-width: 1px;

  /* ============================================
     PDF-only micro-scale
     Print typography needs finer precision than the web UI grid, and print
     has no accessibility/user-zoom reason to use rem — every value below is
     an absolute px, deliberately decoupled from the root font-size. Do not
     use these tokens in web templates, and do not use web's --space-*,
     --text-*, or --leading-* tokens inside templates/pdf/*.

     Font-size, line-height, and border-width are named by structural ROLE
     (e.g. --pdf-text-body) because these components live in the shared
     pdf/base.html shell and will be reused as-is by future worksheet types
     (Vocabulary, Reading Comprehension, etc. per ADR-006's routing). Two
     roles that currently share a pixel value keep separate tokens if they're
     independent design choices that happen to coincide today — collapsing
     them would assume a relationship that doesn't exist and block tuning one
     without the other later. Roles that ARE one genuinely shared design tier
     (e.g. all body-weight reading text) share one token.

     Spacing is named by ordinal magnitude instead (--pdf-space-1, -2, ...),
     matching the web --space-* scale's own philosophy: a gap's size means
     "how much breathing room" independent of which component uses it.
     ============================================ */

  --pdf-text-wordmark: 10.5px;
  --pdf-text-wordmark-tag: 7.5px;
  --pdf-text-header-mark: 12px;
  --pdf-text-header-mark-compact: 10px;
  --pdf-text-meta-name: 10px;
  --pdf-text-header-meta-small: 8.5px;
  --pdf-text-header-topic-label: 9px;
  --pdf-text-topic-title: 22px;
  --pdf-text-body: 11.5px;
  --pdf-text-instructions: 11px;
  --pdf-text-activity-label: 12px;
  --pdf-text-activity-num: 8.5px;
  --pdf-text-activity-number: 8px;
  --pdf-text-section-label: 8px;
  --pdf-text-footer: 7.5px;
  --pdf-text-footer-mark: 8px;

  --pdf-leading-header-mark: 1;
  --pdf-leading-wordmark: 1.25;
  --pdf-leading-meta-name: 1.3;
  --pdf-leading-topic-title: 1.15;
  --pdf-leading-body: 1.7;
  --pdf-leading-reading-para: 1.85;
  --pdf-leading-relaxed-body: 1.65;
  --pdf-leading-language-focus: 1.75;

  --pdf-space-1: 2px;
  --pdf-space-2: 3px;
  --pdf-space-3: 4px;
  --pdf-space-4: 5px;
  --pdf-space-5: 6px;
  --pdf-space-6: 8px;
  --pdf-space-7: 9px;
  --pdf-space-8: 10px;
  --pdf-space-9: 11px;
  --pdf-space-10: 12px;
  --pdf-space-11: 13px;
  --pdf-space-12: 14px;
  --pdf-space-13: 16px;
  --pdf-space-14: 18px;
  --pdf-space-15: 24px;
  --pdf-space-16: 26px;
  --pdf-space-17: 28px;
  --pdf-space-18: 30px;

  --pdf-border-hairline: 0.5px;
  --pdf-border-callout: 2px;

  /* ---------- Z-index ---------- */
  --z-nav: 100;
  --z-overlay: 500;
  --z-modal: 1000;

  /* ---------- Breakpoints (REFERENCE ONLY) ----------
     var() is NOT valid inside @media conditions, so these cannot be used as
     tokens in media queries — they are the canonical literal set to use:
     640px / 768px / 1024px. Do not introduce other breakpoint values. */
}