/* hjadmz · Design Tokens · v1.2.0
   Single-source CSS custom properties. Import before any other stylesheet.
   Mirror in tokens/design-tokens.json for non-web platforms. */

/* ─── Light Mode (default) ────────────────────────── */
:root {
  --color-bg:             #F9FAFB;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #F1F5F9;

  --color-text:           #020617;  /* 19.30:1 on bg — AAA      (body)        */
  --color-text-muted:     #475569;  /*  7.25:1 on bg — AAA      (secondary)   */
  --color-text-faint:     #64748B;  /*  4.55:1 on bg — AA       (caption)     */

  --color-highlight-text: #000000;  /* 21:1 on #FFF */
  --color-highlight-bg:   #FFFFFF;

  --color-text-link:       #1E40AF; /* 7.66:1 on bg — AAA       (links)       */
  --color-text-link-hover: #1E3A8A; /* 9.43:1 on bg — AAA                     */

  --color-border:         #CBD5E1;
  --color-border-subtle:  #E2E8F0;

  --color-ring:           #1E40AF;
  --focus-ring-width:     3px;
  --focus-ring-offset:    2px;

  --color-error:          #B91C1C;  /* 7.13:1 on bg — AAA */
  --color-error-subtle:   #FEE2E2;
  --color-warning:        #92400E;  /* 7.97:1 on bg — AAA */
  --color-warning-subtle: #FEF3C7;
  --color-success:        #14532D;  /* 11.97:1 on bg — AAA */
  --color-success-subtle: #DCFCE7;

  --color-mark:           #020617;
}

/* ─── Dark Mode ───────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #020617;
    --color-surface:        #0F172A;
    --color-surface-raised: #1E293B;

    --color-text:           #E2E8F0;  /* 16.36:1 on bg — AAA      (body)      */
    --color-text-muted:     #97A6BB;  /*  8.15:1 on bg — AAA      (secondary) */
    --color-text-faint:     #8293A5;  /*  6.40:1 on bg — AA       (caption)   */

    --color-highlight-text: #FFFFFF;
    --color-highlight-bg:   #000000;

    --color-text-link:       #60A5FA; /* 7.93:1 on bg — AAA       (links)     */
    --color-text-link-hover: #93C5FD; /* 11.21:1 on bg — AAA                  */

    --color-border:         #334155;
    --color-border-subtle:  #1E293B;

    --color-ring:           #60A5FA;

    --color-error:          #FCA5A5;  /* 9.65:1 on bg — AAA */
    --color-error-subtle:   #450A0A;
    --color-warning:        #FCD34D;  /* 12.42:1 on bg — AAA */
    --color-warning-subtle: #451A03;
    --color-success:        #86EFAC;  /* 12.84:1 on bg — AAA */
    --color-success-subtle: #052E16;

    --color-mark:           #F9FAFB;  /* 19.30:1 on bg — mark matches background system */
  }
}

/* ─── Typography ──────────────────────────────────── */
:root {
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Major Third (1.25) · fluid clamp */
  --step--1: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem); /* @kind other */
  --step-0:  clamp(1rem,     0.95rem + 0.25vw, 1.125rem);  /* @kind other */
  --step-1:  clamp(1.25rem,  1.19rem + 0.31vw, 1.406rem);  /* @kind other */
  --step-2:  clamp(1.563rem, 1.49rem + 0.39vw, 1.758rem);  /* @kind other */
  --step-3:  clamp(1.953rem, 1.86rem + 0.49vw, 2.197rem);  /* @kind other */
  --step-4:  clamp(2.441rem, 2.32rem + 0.61vw, 2.747rem);  /* @kind other */
  --step-5:  clamp(3.052rem, 2.90rem + 0.76vw, 3.433rem);  /* @kind other */

  --weight-normal: 400; /* @kind other */
  --weight-medium: 500; /* @kind other */
  --weight-semi:   600; /* @kind other */
  --weight-bold:   700; /* @kind other */

  --line-height-body:    1.6; /* @kind other */
  --line-height-heading: 1.2; /* @kind other */
  --line-height-tight:   1.1; /* @kind other */
  --max-width-prose:     65ch; /* @kind spacing */
  --paragraph-spacing:   1.5em; /* @kind spacing */

  --tracking-tight:  -0.01em; /* @kind other */
  --tracking-normal:  0; /* @kind other */
  --tracking-wide:    0.025em; /* @kind other */
  --tracking-wider:   0.05em; /* @kind other */
  --tracking-lockup:  0.12em; /* @kind other */
}

/* ─── Spacing (4 px atomic · 8 px practical) ──────── */
:root {
  --space-0:   0;
  --space-1:   0.25rem;  /*  4  */
  --space-2:   0.5rem;   /*  8  */
  --space-3:   0.75rem;  /* 12  */
  --space-4:   1rem;     /* 16  */
  --space-5:   1.25rem;  /* 20  */
  --space-6:   1.5rem;   /* 24  */
  --space-8:   2rem;     /* 32  */
  --space-10:  2.5rem;   /* 40  */
  --space-12:  3rem;     /* 48  */
  --space-16:  4rem;     /* 64  */
  --space-20:  5rem;     /* 80  */
  --space-24:  6rem;     /* 96  */
}

/* ─── Radius ──────────────────────────────────────── */
:root {
  --radius-sm:   0.25rem;  /*  4 — default */
  --radius-md:   0.5rem;   /*  8 — cards   */
  --radius-lg:   1rem;     /* 16 — modals  */
  --radius-full: 9999px;   /*    — pills   */
}

/* ─── Elevation ───────────────────────────────────── */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(2 6 23 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(2 6 23 / 0.08), 0 2px 4px -2px rgb(2 6 23 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(2 6 23 / 0.08), 0 4px 6px -4px rgb(2 6 23 / 0.03);
}

/* ─── Motion ──────────────────────────────────────── */
:root {
  --duration-quick:    150ms; /* @kind other */
  --duration-moderate: 300ms; /* @kind other */
  --duration-slow:     500ms; /* @kind other */
  --duration-enter:    250ms; /* @kind other */
  --duration-exit:     200ms; /* @kind other */

  --ease-default:  cubic-bezier(0.25, 0.1, 0.25, 1.0); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-overdamp: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  /* Spring (JS only): mass 2 · stiffness 300 · damping 49
     Critically overdamped. Hardcoded — do not tune per-element.
     CSS fallback: --ease-overdamp */
}

@media (prefers-reduced-motion: no-preference) {
  :root { --motion-enabled: 1; /* @kind other */ }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-quick: 0ms; /* @kind other */
    --duration-moderate: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
    --duration-enter: 0ms; /* @kind other */
    --duration-exit: 0ms; /* @kind other */
    --motion-enabled: 0; /* @kind other */
  }
}

/* ─── Breakpoints ─────────────────────────────────── */
:root {
  --breakpoint-sm: 640px; /* @kind other */
  --breakpoint-md: 768px; /* @kind other */
  --breakpoint-lg: 1024px; /* @kind other */
  --breakpoint-xl: 1280px; /* @kind other */
}

/* ─── Z-Index ─────────────────────────────────────── */
:root {
  --z-base:     0; /* @kind other */
  --z-raised:   10; /* @kind other */
  --z-dropdown: 100; /* @kind other */
  --z-sticky:   200; /* @kind other */
  --z-overlay:  300; /* @kind other */
  --z-modal:    400; /* @kind other */
  --z-toast:    500; /* @kind other */
}

/* ─── Global Resets ───────────────────────────────── */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-ring);
  outline-offset: var(--focus-ring-offset);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.prose { max-width: var(--max-width-prose); }
.prose p + p { margin-top: var(--paragraph-spacing); }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--duration-quick) var(--ease-default);
}
a:hover { color: var(--color-text-link-hover); }