/* ============================================================
   5ac.vn — Design Tokens (v0.3.0)
   Generated single-source from src/styles/design-tokens.json
   (DTCG format). Prefix: --5ac-*. Light/dark via
   @media (prefers-color-scheme: dark) — no JavaScript.
   Palette: HIG 2026 (developer.apple.com/design/human-interface-guidelines) — type scale, spacing, layout, radius, material, motion, accessibility
   ============================================================ */

/* ─── Semantic Color (light) ────────────────────────── */
:root {
  color-scheme: light;

  --5ac-color-label: #141413;
  --5ac-color-label-secondary: #6b6a64;
  --5ac-color-label-tertiary: #706e68;
  --5ac-color-background: #faf9f5;
  --5ac-color-background-secondary: #f5f2ea;
  --5ac-color-background-muted: #efece4;
  --5ac-color-separator: #e8e6dc;
  --5ac-color-link: #b8532f;
  --5ac-color-accent: #b8532f;
  --5ac-color-accent-hover: #a84424;
  --5ac-color-on-accent: #ffffff;
  --5ac-color-accent-soft: #f0b89e;
  --5ac-color-accent-subtle: #f0b89e;
  --5ac-color-highlight: #F5E8C7;
  --5ac-color-nav-scrim-bg: rgba(250,249,245,0.72);

  /* ─── Typography ──────────────────────────────────── */
  --5ac-font-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --5ac-font-serif: 'Lora', Georgia, serif;
  --5ac-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --5ac-font-base-size: 16px;

  /* Type scale */
  --5ac-type-large-title-font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  --5ac-type-large-title-line-height: 1.07;
  --5ac-type-large-title-font-weight: 600;
  --5ac-type-large-title-letter-spacing: -0.005em;
  --5ac-type-title1-font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  --5ac-type-title1-line-height: 1.2;
  --5ac-type-title1-font-weight: 600;
  --5ac-type-title1-letter-spacing: -0.003em;
  --5ac-type-title2-font-size: 1.375rem;
  --5ac-type-title2-line-height: 1.25;
  --5ac-type-title2-font-weight: 600;
  --5ac-type-title2-letter-spacing: 0;
  --5ac-type-title3-font-size: 1.25rem;
  --5ac-type-title3-line-height: 1.25;
  --5ac-type-title3-font-weight: 600;
  --5ac-type-title3-letter-spacing: 0;
  --5ac-type-headline-font-size: 1.0625rem;
  --5ac-type-headline-line-height: 1.3;
  --5ac-type-headline-font-weight: 600;
  --5ac-type-headline-letter-spacing: -0.022em;
  --5ac-type-body-font-size: 1.0625rem;
  --5ac-type-body-line-height: 1.47;
  --5ac-type-body-font-weight: 400;
  --5ac-type-body-letter-spacing: -0.022em;
  --5ac-type-callout-font-size: 1rem;
  --5ac-type-callout-line-height: 1.4;
  --5ac-type-callout-font-weight: 400;
  --5ac-type-callout-letter-spacing: -0.016em;
  --5ac-type-subhead-font-size: 0.9375rem;
  --5ac-type-subhead-line-height: 1.35;
  --5ac-type-subhead-font-weight: 400;
  --5ac-type-subhead-letter-spacing: -0.016em;
  --5ac-type-footnote-font-size: 0.8125rem;
  --5ac-type-footnote-line-height: 1.35;
  --5ac-type-footnote-font-weight: 400;
  --5ac-type-footnote-letter-spacing: 0;
  --5ac-type-caption1-font-size: 0.75rem;
  --5ac-type-caption1-line-height: 1.3;
  --5ac-type-caption1-font-weight: 400;
  --5ac-type-caption1-letter-spacing: 0;
  --5ac-type-caption2-font-size: 0.6875rem;
  --5ac-type-caption2-line-height: 1.2;
  --5ac-type-caption2-font-weight: 400;
  --5ac-type-caption2-letter-spacing: 0.004em;

  /* ─── Spacing (4px base) ─────────────────────────── */
  --5ac-space-2xs: 4px;
  --5ac-space-xs: 8px;
  --5ac-space-sm: 12px;
  --5ac-space-md: 16px;
  --5ac-space-lg: 20px;
  --5ac-space-xl: 24px;
  --5ac-space-2xl: 32px;
  --5ac-space-3xl: 40px;
  --5ac-space-4xl: 48px;
  --5ac-space-5xl: 64px;
  --5ac-space-6xl: 80px;

  /* ─── Layout ─────────────────────────────────────── */
  --5ac-layout-container-max: 1068px;
  --5ac-layout-prose-max: 734px;
  --5ac-layout-nav-height: 72px;
  --5ac-layout-section-padding-desktop: 80px;
  --5ac-layout-section-padding-mobile: 48px;

  /* ─── Radius ─────────────────────────────────────── */
  --5ac-radius-sm: 8px;
  --5ac-radius-md: 12px;
  --5ac-radius-lg: 20px;
  --5ac-radius-pill: 999px;

  /* ─── Material ───────────────────────────────────── */
  --5ac-material-nav-backdrop: saturate(180%) blur(20px);
  --5ac-material-nav-fallback-bg: rgba(250,249,245,0.92);
  --5ac-material-glass-regular: blur(20px) saturate(180%) brightness(1.02);
  --5ac-material-glass-clear: blur(8px);
  --5ac-material-dim-overlay: 0.35;

  /* ─── Elevation ──────────────────────────────────── */
  --5ac-shadow-1: 0 2px 8px rgba(0,0,0,0.08);
  --5ac-shadow-2: 0 8px 24px rgba(0,0,0,0.12);

  /* ─── Motion ─────────────────────────────────────── */
  --5ac-easing-standard: cubic-bezier(.4,0,.6,1);
  --5ac-easing-emphasized: cubic-bezier(.25,.1,.3,1);
  --5ac-duration-fast: 100ms;
  --5ac-duration-base: 200ms;
  --5ac-duration-slow: 400ms;

  /* ─── Status (semantic, non-CTA) ──────────────────── */
  --5ac-status-success: #788c5d;
  --5ac-status-error: #b3261e;
  --5ac-status-warning: #b8532f;

  /* ─── Accessibility ──────────────────────────────── */
  --5ac-accessibility-min-touch-target: 44px;
  --5ac-accessibility-min-target-spacing: 24px;
}

/* ─── Semantic Color (dark) ─────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --5ac-color-label: #e8e6dc;
    --5ac-color-label-secondary: #9a988f;
    --5ac-color-label-tertiary: #9a988f;
    --5ac-color-background: #1a1a18;
    --5ac-color-background-secondary: #222220;
    --5ac-color-background-muted: #2a2a28;
    --5ac-color-separator: #3a3a38;
    --5ac-color-link: #e88b6a;
    --5ac-color-accent: #e88b6a;
    --5ac-color-accent-hover: #e88b6a;
    --5ac-color-on-accent: #141413;
    --5ac-color-accent-soft: #c47a58;
    --5ac-color-accent-subtle: #c47a58;
    --5ac-color-highlight: #F5E8C7;
    --5ac-color-nav-scrim-bg: rgba(26,26,24,0.78);
    --5ac-status-success: #9ab87a;
    --5ac-status-error: #f28b82;
    --5ac-status-warning: #f0a080;

    --5ac-material-nav-fallback-bg: rgba(26,26,24,0.92);
  }
}

/* Explicit manual dark toggle — [data-theme="dark"] (nav.js) */
:root[data-theme="dark"] {
  color-scheme: dark;

  --5ac-color-label: #e8e6dc;
  --5ac-color-label-secondary: #9a988f;
  --5ac-color-label-tertiary: #9a988f;
  --5ac-color-background: #1a1a18;
  --5ac-color-background-secondary: #222220;
  --5ac-color-background-muted: #2a2a28;
  --5ac-color-separator: #3a3a38;
  --5ac-color-link: #e88b6a;
  --5ac-color-accent: #e88b6a;
  --5ac-color-accent-hover: #e88b6a;
  --5ac-color-on-accent: #141413;
  --5ac-color-accent-soft: #c47a58;
  --5ac-color-accent-subtle: #c47a58;
  --5ac-color-highlight: #F5E8C7;
  --5ac-color-nav-scrim-bg: rgba(26,26,24,0.78);
  --5ac-status-success: #9ab87a;
  --5ac-status-error: #f28b82;
  --5ac-status-warning: #f0a080;

  --5ac-material-nav-fallback-bg: rgba(26,26,24,0.92);
}

/* ─── Reduced Motion (accessibility) ────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --5ac-duration-fast: 0.01ms;
    --5ac-duration-base: 0.01ms;
    --5ac-duration-slow: 0.01ms;
  }
}

/* ─── Legacy var aliases → --5ac-* tokens (global) ──── */
:root {
  --paper: var(--5ac-color-background);
  --paper-warm: var(--5ac-color-background-secondary);
  --paper-muted: var(--5ac-color-background-muted);
  --ink: var(--5ac-color-label);
  --ink-soft: var(--5ac-color-label-secondary);
  --text-secondary: var(--5ac-color-label-secondary);
  --orange: var(--5ac-color-accent);
  --orange-deep: var(--5ac-color-accent-hover);
  --orange-light: var(--5ac-color-accent-soft);
  --light-gray: var(--5ac-color-separator);
  --mid-gray: var(--5ac-color-label-tertiary);
  --green: var(--5ac-status-success);
  --green-deep: var(--5ac-status-success);
  --green-light: var(--5ac-status-success);
  --font-heading: var(--5ac-font-sans);
  --font-body: var(--5ac-font-sans);
  --font-body-serif: var(--5ac-font-serif);
  --font-mono: var(--5ac-font-mono);
}