/* ════════════════════════════════════════════════════════════════════════════
   ANTEOMNIO DESIGN SYSTEM — TOKENS (single source of truth, public front-end)
   Locked in Phase 1. Every public style derives from these custom properties.

   Breakpoints (locked set — the only widths any public stylesheet may query):
     --bp-sm   480px   (min-width)
     --bp-md   768px   (min-width)
     --bp-lg   1024px  (min-width)
     --bp-xl   1280px  (min-width)
   Author mobile-first: base styles are the mobile layout; scale up with
   min-width queries at exactly these four widths.

   Dark theme: html[data-theme="dark"] overrides the same property names.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour · light ─────────────────────────────────────────────────────── */
  --color-bg:            #fbfbfa;   /* warm paper */
  --color-bg-soft:       #f5f5f3;
  --color-bg-muted:      #eeeeeb;
  --color-surface:       #ffffff;
  --color-border:        #e6e6e2;
  --color-border-soft:   #efefec;
  --color-border-strong: #b0b0ab;

  --color-text:          #111110;   /* ink */
  --color-text-2:        #3d3d3a;
  --color-text-3:        #595956;
  --color-text-4:        #767672;
  --color-text-inv:      #fbfbfa;

  /* Inverted "ink band" surfaces (footer, CTA band, dashboard frames) */
  --color-ink:           #111110;
  --color-ink-soft:      #1c1c1b;
  --color-ink-border:    #2e2e2c;
  --color-on-ink:        #f0f0ee;
  --color-on-ink-2:      #b8b8b4;
  --color-on-ink-3:      #85857f;

  --color-accent:        #1a3fa8;   /* brand deep blue (logo) */
  --color-accent-hover:  #142e82;
  --color-accent-light:  #eef1fb;
  --color-accent-muted:  #6b83c4;
  --color-on-accent:     #ffffff;

  /* Metric / data-visual palette (the ONLY colours charts may use) */
  --viz-1: #1a3fa8;
  --viz-2: #0891b2;
  --viz-3: #16a34a;
  --viz-4: #d97706;
  --viz-track: var(--color-bg-muted);

  --color-success:       #16a34a;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;
  --color-info:          #0891b2;

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Fira Code', monospace;

  /* Fluid type scale — clamp() from 375px → 1280px viewports */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.32rem + 0.83vw, 1.875rem);
  --text-3xl:  clamp(1.75rem, 1.51rem + 1.1vw, 2.25rem);
  --text-4xl:  clamp(2.125rem, 1.71rem + 1.93vw, 3rem);
  --text-5xl:  clamp(2.5rem, 1.9rem + 2.76vw, 3.75rem);
  --text-6xl:  clamp(2.875rem, 2.1rem + 3.6vw, 4.5rem);

  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.75;

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

  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em;   /* eyebrows / small caps labels */

  --measure: 65ch;             /* max line length for prose */

  /* ── Spacing (8px scale) ────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Chrome surfaces ────────────────────────────────────────────────────── */
  --nav-bg:       rgba(251, 251, 250, 0.88);
  --nav-bg-solid: rgba(251, 251, 250, 0.96);
  --overlay:      rgba(17, 17, 16, 0.35);

  /* ── Layout rhythm (fluid — replaces breakpoint overrides) ──────────────── */
  --nav-height:       72px;
  --container-max:    1280px;
  --container-narrow: 880px;
  --container-pad:    clamp(1rem, 0.55rem + 2vw, 1.5rem);
  --section-pad:      clamp(3.5rem, 2.4rem + 4.8vw, 6rem);
  --section-pad-sm:   clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  --section-pad-lg:   clamp(4.5rem, 3rem + 6.6vw, 8rem);
  --layout-sidebar-width: 400px;
  --layout-sidebar-gap:   var(--space-12);
  --grid-gap:         clamp(1rem, 0.7rem + 1.4vw, 1.75rem);

  /* ── Radius ─────────────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Elevation ──────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(17, 17, 16, .05);
  --shadow-md: 0 4px 12px rgba(17, 17, 16, .07);
  --shadow-lg: 0 8px 32px rgba(17, 17, 16, .09);
  --shadow-xl: 0 16px 48px rgba(17, 17, 16, .12);

  /* ── Motion vocabulary ──────────────────────────────────────────────────── */
  --dur-fast:  150ms;   /* micro-interactions: hover, focus, press */
  --dur-base:  250ms;   /* standard transitions: menus, accordions  */
  --dur-slow:  450ms;   /* reveals, charts, larger movements        */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Legacy shorthand aliases (transition values) — kept for compatibility */
  --ease-fast: var(--dur-fast) var(--ease-standard);
  --ease-base: var(--dur-base) var(--ease-standard);
  --ease-slow: var(--dur-slow) var(--ease-standard);

  /* ── Z-index ────────────────────────────────────────────────────────────── */
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ── Focus ring (identical on every interactive element) ────────────────── */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ── Semantic alert / badge tokens ──────────────────────────────────────── */
  --alert-success-bg:     #f0fdf4;
  --alert-success-fg:     #15803d;
  --alert-success-border: #bbf7d0;
  --alert-error-bg:       #fef2f2;
  --alert-error-fg:       #dc2626;
  --alert-error-border:   #fecaca;
  --badge-danger-bg:      #fef2f2;
  --badge-danger-fg:      #dc2626;
  --badge-warning-bg:     #fffbeb;
  --badge-warning-fg:     #d97706;
  --badge-warning-border: #fde68a;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK THEME — same property names, overridden.
   Activated by html[data-theme="dark"] (localStorage 'ao-theme', light default).
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --color-bg:            #111110;
  --color-bg-soft:       #191918;
  --color-bg-muted:      #232322;
  --color-surface:       #1a1a19;
  --color-border:        #2e2e2c;
  --color-border-soft:   #232322;
  --color-border-strong: #4a4a47;

  --color-text:          #f0f0ee;
  --color-text-2:        #c8c8c5;
  --color-text-3:        #9a9a97;
  --color-text-4:        #6f6f6b;
  --color-text-inv:      #111110;

  --color-ink:           #0b0b0a;   /* ink bands stay darker than the page */
  --color-ink-soft:      #161615;
  --color-ink-border:    #2a2a28;
  --color-on-ink:        #f0f0ee;
  --color-on-ink-2:      #b8b8b4;
  --color-on-ink-3:      #85857f;

  --color-accent:        #5c81e8;   /* lifted for contrast on dark (AA) */
  --color-accent-hover:  #7395ee;
  --color-accent-light:  #1a2547;
  --color-accent-muted:  #4a72e0;
  --color-on-accent:     #0d1226;

  --viz-1: #5c81e8;
  --viz-2: #22b8d4;
  --viz-3: #34d070;
  --viz-4: #f0a232;
  --viz-track: #232322;

  --nav-bg:       rgba(17, 17, 16, 0.85);
  --nav-bg-solid: rgba(17, 17, 16, 0.96);
  --overlay:      rgba(0, 0, 0, 0.55);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 8px 36px rgba(0, 0, 0, .6);
  --shadow-xl: 0 16px 52px rgba(0, 0, 0, .65);

  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  --alert-success-bg:     #0a2e18;
  --alert-success-fg:     #4ade80;
  --alert-success-border: #14532d;
  --alert-error-bg:       #2d0a0a;
  --alert-error-fg:       #f87171;
  --alert-error-border:   #7f1d1d;
  --badge-danger-bg:      #2d0a0a;
  --badge-danger-fg:      #f87171;
  --badge-warning-bg:     #2a1a00;
  --badge-warning-fg:     #fbbf24;
  --badge-warning-border: #78350f;
}

html[data-theme="dark"] ::selection {
  background: var(--color-accent-light);
  color: var(--color-text);
}