/*
 * Hey Aira design system — Claude Opus 5 proposal, v0.1
 * Design tokens. Components read only from these custom properties.
 * Contrast ratios (WCAG 2.x) are measured against --color-paper-0.
 */

:root {
  color-scheme: light;

  /* ---------- Broken whites ---------- */
  --color-paper-0: #fbfaf7;   /* canvas */
  --color-paper-1: #f4f1eb;   /* recessed surface */
  --color-paper-2: #ebe6de;   /* track, pressed, disabled fill */
  --color-white: #ffffff;     /* raised surface, input */

  /* ---------- Ink ---------- */
  --color-ink-900: #1b1d22;   /* primary text and primary action  16.2:1 */
  --color-ink-700: #3a3d46;   /* secondary text                   10.4:1 */
  --color-ink-500: #60636c;   /* meta and help text                5.8:1 */
  --color-ink-300: #a3a6ad;   /* disabled, placeholder (never essential text) */

  /* ---------- Frosted pastels: surfaces only, never text ---------- */
  --color-powder: #dde8f2;
  --color-powder-deep: #bcd0e3;
  --color-peach: #f7e0d3;
  --color-peach-deep: #efc4ad;
  --color-butter: #f5ecc8;
  --color-butter-deep: #e6d38f;

  /* ---------- Signal accents ---------- */
  --color-electric: #2e5bff;      /* fills, focus, connected dot     5.0:1 */
  --color-electric-ink: #1e44d6;  /* link and accent text            7.1:1 */
  --color-coral: #e4644b;         /* fills, borders, error dot only  3.2:1 */
  --color-coral-ink: #a83d28;     /* error text                      6.0:1 */

  /* ---------- Lines ---------- */
  --color-line: rgb(27 29 34 / 0.09);
  --color-line-strong: rgb(27 29 34 / 0.17);
  --color-line-highlight: rgb(255 255 255 / 0.8);

  /* ---------- Semantic aliases ---------- */
  --text-primary: var(--color-ink-900);
  --text-secondary: var(--color-ink-700);
  --text-meta: var(--color-ink-500);
  --text-disabled: var(--color-ink-300);
  --text-link: var(--color-electric-ink);
  --surface-canvas: var(--color-paper-0);
  --surface-recessed: var(--color-paper-1);
  --surface-raised: var(--color-white);
  --focus-ring: var(--color-electric);

  /* State markers. Chips and cards stay neutral; only markers take colour. */
  --state-connected: var(--color-electric);
  --state-pending: var(--color-ink-500);
  --state-error: var(--color-coral);
  --state-error-text: var(--color-coral-ink);
  --state-trust: var(--color-ink-900);

  /* ---------- Brand mark: the dot ----------
     A perfect circle. Beside the name it is 8px with an 8px gap
     (the dot matches the cap height of the 12px mono name), optically
     centred on the capitals. */
  --brand-dot-color: var(--color-electric);
  --brand-dot-color-on-dark: #5b7fff;   /* brighter: dark grounds swallow saturated blue */
  --brand-dot-size: 0.5rem;
  --brand-dot-gap: 0.5rem;

  /* ---------- Material: frost ---------- */
  --frost-fill: rgb(255 255 255 / 0.58);
  --frost-fill-strong: rgb(255 255 255 / 0.78);
  --frost-blur: 18px;
  --frost-saturate: 140%;
  --frost-highlight: inset 0 1px 0 var(--color-line-highlight);
  --frost-shadow: 0 1px 2px rgb(27 29 34 / 0.04), 0 16px 36px -20px rgb(27 29 34 / 0.2);
  --grain-opacity: 0.045;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- Type families ---------- */
  --font-serif: "Newsreader", "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ---------- Type scale ----------
     A compressed scale: neighbouring levels differ by ×1.1–1.6, so
     hierarchy comes from weight, colour and space rather than size jumps.
     Tracking is optical: large type tightens, reading type opens slightly. */
  --type-h1-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);   /* 36→52 */
  --type-h1-line: 1.06;
  --type-h1-track: -0.02em;
  --type-h2-size: clamp(1.75rem, 1.45rem + 1vw, 2.125rem);   /* 28→34 */
  --type-h2-line: 1.12;
  --type-h2-track: -0.015em;
  --type-h3-size: 1.25rem;                                   /* 20 */
  --type-h3-line: 1.35;
  --type-h3-track: -0.005em;
  /* Titles inside components: one per card. */
  --type-title-dialog-size: 1.375rem;  /* 22: cards that ask for a decision */
  --type-title-card-size: 1.125rem;    /* 18: cards that describe an entity */
  --type-title-line: 1.3;
  --type-title-track: -0.008em;
  --type-ui-size: 0.9375rem;           /* 15: card body, lists, entity names */
  --type-ui-line: 1.5;
  --type-lead-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 18→20 */
  --type-lead-line: 1.5;
  --type-body-size: 1.0625rem;         /* 17 */
  --type-body-line: 1.5;
  --type-small-size: 0.875rem;         /* 14 */
  --type-small-line: 1.45;
  --type-label-size: 0.875rem;         /* 14 */
  --type-label-line: 1.3;
  --type-mono-size: 0.8125rem;         /* 13 */
  --type-mono-line: 1.55;
  /* Metadata label. The Hey Aira name uses exactly this family and scale. */
  --type-meta-size: 0.75rem;           /* 12 */
  --type-meta-line: 1.4;

  /* Tracking for sans reading text (body, lead, small, UI). Mono stays normal. */
  --type-text-track: 0.01em;

  /* Weights. Geist is loaded as a variable font, so 450 is a real weight. */
  --weight-regular: 400;
  --weight-medium: 450;
  --weight-strong: 500;

  /* ---------- Spacing: 4px base ---------- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---------- Borders and radius ---------- */
  --border-hairline: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --radius-xs: 4px;     /* code, small tags */
  --radius-sm: 8px;     /* buttons, inputs */
  --radius-md: 12px;    /* tokens, notices */
  --radius-lg: 18px;    /* cards, frosted panels */
  --radius-pill: 999px; /* status chips, switches */

  /* ---------- Layout ---------- */
  --layout-max: 76rem;
  --layout-gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --layout-measure: 62ch;
  --layout-sidebar: 12rem;
  --control-height: 2.75rem;     /* 44px touch target */
  --control-height-sm: 2.25rem;  /* 36px, pointer-dense contexts only */
  /* Breakpoints (reference only; CSS custom properties cannot drive @media):
     narrow < 40rem (640px) · medium < 60rem (960px) · wide ≥ 60rem */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}