/* ─── WCAG Reference — Design Tokens ─────────────────────────────────────────
   Dark-first. Light mode via [data-theme="light"].
   Fonts: Spectral (body/reading) + JetBrains Mono (numbers/code)
   ─────────────────────────────────────────────────────────────────────────── */

@import url('./fonts.css');

:root {
  /* ── Backgrounds ── */
  --bg:           #0D1117;
  --bg-surface:   #161B22;
  --bg-raised:    #21262D;
  --bg-hover:     #1C2128;

  /* ── Borders ── */
  --border:       #30363D;
  --border-muted: #21262D;

  /* ── Text ── */
  --text:         #E6EDF3;
  --text-muted:   #8B949E;
  --text-subtle:  #484F58;

  /* ── Accent ── */
  --accent:         #2F81F7;
  --accent-hover:   #388BFD;
  --accent-subtle:  rgba(47, 129, 247, 0.12);

  /* ── Level Colors ── */
  --level-a:        #3FB950;
  --level-a-bg:     rgba(63, 185, 80, 0.13);
  --level-aa:       #D29922;
  --level-aa-bg:    rgba(210, 153, 34, 0.13);
  --level-aaa:      #A371F7;
  --level-aaa-bg:   rgba(163, 113, 247, 0.13);

  /* ── Principle accent colors ── */
  --p1: #58A6FF;  /* Perceivable   */
  --p2: #3FB950;  /* Operable      */
  --p3: #D29922;  /* Understandable */
  --p4: #A371F7;  /* Robust        */

  /* ── Typography ── */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;

  --leading-tight:   1.25;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ── Radii ── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);

  /* ── Motion ── */
  --ease:     150ms ease;
  --ease-out: 200ms ease-out;

  /* ── Layout ── */
  --header-h: 56px;
  --nav-h:    60px;
  --max-w:    680px;

  /* ── Shoelace token overrides (dark) ── */
  --sl-color-primary-600: var(--accent);
  --sl-font-sans: var(--font-body);
  --sl-border-radius-medium: var(--r-md);
  --sl-input-background-color: var(--bg-surface);
  --sl-input-border-color: var(--border);
  --sl-input-color: var(--text);
  --sl-input-placeholder-color: var(--text-muted);
  --sl-input-focus-ring-color: var(--accent);
}

[data-theme="light"] {
  --bg:           #FFFFFF;
  --bg-surface:   #F6F8FA;
  --bg-raised:    #FFFFFF;
  --bg-hover:     #F0F3F6;

  --border:       #D0D7DE;
  --border-muted: #E7EDF2;

  --text:         #1F2328;
  --text-muted:   #656D76;
  --text-subtle:  #AFB8C1;

  --accent:         #0969DA;
  --accent-hover:   #0A60C5;
  --accent-subtle:  rgba(9, 105, 218, 0.1);

  --p1: #0550AE;  
  --p2: #1A7F37; 
  --p3: #7D4E00;  
  --p4: #6639BA;  

  --level-a:        #1A7F37;
  --level-a-bg:     rgba(26, 127, 55, 0.1);
  --level-aa:       #7D4E00;
  --level-aa-bg:    rgba(125, 78, 0, 0.1);
  --level-aaa:      #6639BA;
  --level-aaa-bg:   rgba(102, 57, 186, 0.1);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);

  --sl-input-background-color: #FFFFFF;
  --sl-input-border-color: var(--border);
  --sl-input-color: var(--text);
}