/*
 * Eddi Design Tokens — Ermeutika brand foundation
 * Dark-only operator tool. 4px spacing grid. Montserrat UI.
 * Sharp Ermeutika palette: cool navy field, blue + pink dual accent.
 * Source: design-system/DESIGN.md
 */

/* Montserrat is resolved from the local install. The app is local-first and
   an Artifact CSP blocks font hosts, so no CDN link: ship a woff2 subset
   under design-system/fonts/ and add a url() source here. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("Montserrat"), local("Montserrat-Regular");
}

:root {
  /* ── Color: core (cool navy field, high chroma) ───────────── */
  --color-background: #000f25;
  --color-surface: #001d38;
  --color-surface-elevated: #153257;
  --color-surface-subtle: #00172e;
  --color-foreground: #f4efe6;
  --color-muted: #8ea7c7;
  --color-faint: #7489a6;
  --color-border: #24436c;
  /* Control edges need 3:1 against --color-surface (WCAG 1.4.11).
     --color-border at 1.69:1 is for decorative hairlines only. */
  --color-border-strong: #476fa8;

  /* ── Color: brand (Ermeutika dual accent — blue + pink) ──── */
  --color-accent: #e91e8c;
  --color-accent-secondary: #c2186d;
  --color-accent-soft: #e91e8c1f;
  --color-blue: #4a87e0;
  --color-blue-soft: #4a87e033;

  /* ── Color: status (never sole carrier; pair with glyph+label) */
  --color-success: #43dd9a;
  --color-warning: #ffb714;
  --color-error: #fb605f;
  --color-info: #4a87e0;

  /* ── Typography ──────────────────────────────────────────── */
  --font-ui: "Montserrat", system-ui, -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px — base body */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px — page title */

  --line-height-body: 1.5;
  --line-height-tight: 1.25;

  /* Micro-label: the Ermeutika signature */
  --micro-label: 600 0.6875rem / 1.2 var(--font-ui);
  --micro-label-letter-spacing: 0.28em;

  /* ── Spacing: 4px grid ───────────────────────────────────── */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* ── Border ──────────────────────────────────────────────── */
  --border-width: 1px;
  --border-solid: var(--border-width) solid var(--color-border);

  /* ── Shadow / elevation ──────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* ── Focus (blue ring — visible on dark, distinct from pink CTA) */
  --focus-ring: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-blue);

  /* ── Motion (guarded by prefers-reduced-motion) ──────────── */
  --duration-fast: 100ms;
  --duration-mid: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Control sizing ──────────────────────────────────────── */
  --control-height-sm: 28px;
  --control-height: 36px;
  --control-height-lg: 44px;

  /* ── Layout ──────────────────────────────────────────────── */
  --sidebar-width: 220px;
  --content-max: 1200px;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Accessibility primitives ───────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

[aria-hidden="true"] {
  pointer-events: none;
}