/*
 * aiaiai Design System — Semantic Tokens (semantic.css)
 *
 * Role-based aliases that themes override.
 * These are what components and layouts should reference.
 * Never use --raw-* tokens directly in components.
 *
 * Naming: --{category}-{role}
 * Categories: color, type, space, radius, elevation, duration, easing, grid
 */

:root {
  /* ═══════════════════════════════════════════════
     COLOR — Surfaces, Text, Accents, Semantic
     ═══════════════════════════════════════════════ */

  /* Surfaces */
  --color-surface: var(--raw-color-neutral-50);
  --color-surface-secondary: var(--raw-color-neutral-100);
  --color-surface-tertiary: var(--raw-color-neutral-200);
  /* Raised surface — popovers/menus that float ABOVE the page surface
     (lighter than the page in light scheme, lighter-than-base in dark). */
  --color-surface-raised: var(--raw-color-white);
  --color-overlay: rgba(44, 40, 37, 0.5);

  /* Borders */
  --color-border: var(--raw-color-neutral-300);
  --color-border-strong: var(--raw-color-neutral-400);

  /* Text */
  --color-text: var(--raw-color-neutral-900);
  --color-text-secondary: var(--raw-color-neutral-600);
  --color-text-muted: var(--raw-color-neutral-500);
  --color-text-on-accent: var(--raw-color-white);

  /* Accent (orange — creation, focus, primary action) */
  --color-accent: var(--raw-color-orange-500);
  --color-accent-hover: var(--raw-color-orange-600);
  --color-accent-subtle: var(--raw-color-orange-100);

  /* Destructive (red — danger, errors, deletion) */
  --color-destructive: var(--raw-color-red-600);
  --color-destructive-hover: var(--raw-color-red-700);
  --color-destructive-subtle: var(--raw-color-red-50);

  /* Success (green — confirmation, positive) */
  --color-success: var(--raw-color-green-600);
  --color-success-subtle: var(--raw-color-green-50);

  /* Warning (amber — caution, attention) */
  --color-warning: var(--raw-color-amber-600);
  --color-warning-subtle: var(--raw-color-amber-50);

  /* Info (blue — information, links) */
  --color-info: var(--raw-color-blue-600);
  --color-info-subtle: var(--raw-color-blue-50);

  /* ═══════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════ */

  /* Font families */
  --font-sans: var(--raw-font-sans);
  --font-mono: var(--raw-font-mono);

  /* Type scale — categorical.
     display-2xl / display-xl are MARKETING roles: public pages where the
     headline is the message. Application surfaces start at `display`. */
  --type-display-2xl-size: var(--raw-font-size-64);
  --type-display-2xl-weight: var(--raw-font-weight-semibold);
  --type-display-2xl-leading: var(--raw-line-height-tight);
  --type-display-2xl-tracking: var(--raw-tracking-tight);
  --type-display-2xl-font: var(--font-sans);

  --type-display-xl-size: var(--raw-font-size-48);
  --type-display-xl-weight: var(--raw-font-weight-semibold);
  --type-display-xl-leading: var(--raw-line-height-tight);
  --type-display-xl-tracking: var(--raw-tracking-tight);
  --type-display-xl-font: var(--font-sans);

  --type-display-size: var(--raw-font-size-36);
  --type-display-weight: var(--raw-font-weight-semibold);
  --type-display-leading: var(--raw-line-height-tight);
  --type-display-tracking: var(--raw-tracking-tight);
  --type-display-font: var(--font-sans);

  --type-heading-lg-size: var(--raw-font-size-24);
  --type-heading-lg-weight: var(--raw-font-weight-medium);
  --type-heading-lg-leading: var(--raw-line-height-snug);
  --type-heading-lg-tracking: var(--raw-tracking-snug);
  --type-heading-lg-font: var(--font-sans);

  --type-heading-size: var(--raw-font-size-18);
  --type-heading-weight: var(--raw-font-weight-medium);
  --type-heading-leading: var(--raw-line-height-heading);
  --type-heading-tracking: var(--raw-tracking-heading);
  --type-heading-font: var(--font-sans);

  --type-heading-sm-size: var(--raw-font-size-15);
  --type-heading-sm-weight: var(--raw-font-weight-medium);
  --type-heading-sm-leading: var(--raw-line-height-relaxed);
  --type-heading-sm-tracking: var(--raw-tracking-normal);
  --type-heading-sm-font: var(--font-sans);

  --type-body-size: var(--raw-font-size-15);
  --type-body-weight: var(--raw-font-weight-regular);
  --type-body-leading: var(--raw-line-height-body);
  --type-body-tracking: var(--raw-tracking-normal);
  --type-body-font: var(--font-sans);

  --type-body-sm-size: var(--raw-font-size-13);
  --type-body-sm-weight: var(--raw-font-weight-regular);
  --type-body-sm-leading: var(--raw-line-height-body);
  --type-body-sm-tracking: var(--raw-tracking-micro);
  --type-body-sm-font: var(--font-sans);

  /* Form labels (#63 typography). Was uppercase-monospace-light-wider —
     the dev-tool look the action-editor walk flagged as the
     highest-leverage single change. Now sentence-case body sans, medium
     weight, normal tracking. Monospace is reserved for code tokens
     (keys, layout codes, template placeholders), NOT labels. Consumers
     should pass labels as `"Field name"`, not `"FIELD NAME"`. See
     dev_docs/specs/typography-form-labels.md (ADR). */
  --type-label-size: var(--raw-font-size-12);
  --type-label-weight: var(--raw-font-weight-medium);
  --type-label-leading: var(--raw-line-height-heading);
  --type-label-tracking: var(--raw-tracking-normal);
  --type-label-font: var(--font-sans);

  --type-data-size: var(--raw-font-size-14);
  --type-data-weight: var(--raw-font-weight-regular);
  --type-data-leading: var(--raw-line-height-relaxed);
  --type-data-tracking: var(--raw-tracking-normal);
  --type-data-font: var(--font-mono);

  --type-caption-size: var(--raw-font-size-11);
  --type-caption-weight: var(--raw-font-weight-regular);
  --type-caption-leading: var(--raw-line-height-relaxed);
  --type-caption-tracking: var(--raw-tracking-wide);
  --type-caption-font: var(--font-sans);

  --type-overline-size: var(--raw-font-size-11);
  --type-overline-weight: var(--raw-font-weight-semibold);
  --type-overline-leading: var(--raw-line-height-heading);
  --type-overline-tracking: var(--raw-tracking-wider);
  --type-overline-font: var(--font-mono);

  /* ═══════════════════════════════════════════════
     ICON SIZES
     ═══════════════════════════════════════════════ */

  --icon-size-xs: var(--raw-icon-12);
  --icon-size-sm: var(--raw-icon-16);
  --icon-size-md: var(--raw-icon-20);
  --icon-size-lg: var(--raw-icon-24);
  --icon-size-xl: var(--raw-icon-32);
  --icon-size-2xl: var(--raw-icon-48);

  /* ═══════════════════════════════════════════════
     SPACING
     ═══════════════════════════════════════════════ */

  --space-2xs: var(--raw-space-2);
  --space-xs: var(--raw-space-4);
  --space-sm: var(--raw-space-8);
  --space-md: var(--raw-space-16);
  --space-lg: var(--raw-space-24);
  --space-xl: var(--raw-space-32);
  --space-2xl: var(--raw-space-48);
  --space-3xl: var(--raw-space-64);
  --space-4xl: var(--raw-space-96);

  /* ═══════════════════════════════════════════════
     BORDER WIDTH
     ═══════════════════════════════════════════════ */

  --border-width: var(--raw-border-width-1);
  --border-width-thick: var(--raw-border-width-2);

  /* ═══════════════════════════════════════════════
     GRID
     ═══════════════════════════════════════════════ */

  --grid-columns: var(--raw-grid-columns);
  --grid-gutter: var(--space-md);
  --grid-margin: var(--space-md);
  --content-width-narrow: var(--raw-content-640);
  --content-width: var(--raw-content-960);
  --content-width-wide: var(--raw-content-1200);
  --content-width-full: var(--raw-content-1440);

  /* ═══════════════════════════════════════════════
     ELEVATION
     ═══════════════════════════════════════════════ */

  --elevation-border: var(--border-width) solid var(--color-border);
  --elevation-border-strong: var(--border-width) solid
    var(--color-border-strong);
  --elevation-raised: var(--raw-shadow-sm);
  --elevation-overlay: var(--raw-shadow-md);

  /* ═══════════════════════════════════════════════
     RADIUS
     ═══════════════════════════════════════════════ */

  --radius-sm: var(--raw-radius-2);
  --radius-md: var(--raw-radius-4);
  --radius-lg: var(--raw-radius-8);
  --radius-pill: var(--raw-radius-999);
  --radius-circle: var(--raw-radius-circle);

  /* ═══════════════════════════════════════════════
     MOTION
     ═══════════════════════════════════════════════ */

  --duration-instant: var(--raw-duration-100);
  --duration-fast: var(--raw-duration-150);
  --duration-normal: var(--raw-duration-250);
  --duration-slow: var(--raw-duration-400);
  --duration-dramatic: var(--raw-duration-600);

  --easing-default: var(--raw-easing-default);
  --easing-enter: var(--raw-easing-enter);
  --easing-exit: var(--raw-easing-exit);
  --easing-linear: var(--raw-easing-linear);

  /* ═══════════════════════════════════════════════
     RESPONSIVE OVERRIDES
     ═══════════════════════════════════════════════ */

  /* Content area spacing — mobile defaults */
  --content-padding-x: var(--space-md);
  --content-padding-y: var(--space-lg);
}

/* ═══════════════════════════════════════════════
   DARK SCHEME — `<html data-scheme="dark">`
   ═══════════════════════════════════════════════

   One generic layer over the NEUTRAL-derived roles (surfaces, borders,
   text, overlay). Brand hues survive untouched — the accent stays the
   theme's accent — while every `-subtle` wash is re-derived from its
   live hue via color-mix, so a tenant theme's accent gets a correct
   dark wash for free. Per-theme bespoke dark = a `[data-theme="x"]`
   block in the theme file, not here.

   Selector is `:root[data-scheme="dark"]` (0,2,0 — pseudo-class + attribute):
   it TIES runtime-injected tenant theme blocks (`:root[data-theme="x"]`,
   also 0,2,0) and wins on order — DS styles load after the injected theme
   block. Consumers resolving an "auto" preference must set the RESOLVED value
   on <html> (a pre-paint `prefers-color-scheme` read), never "auto" itself. */

:root[data-scheme="dark"] {
  color-scheme: dark;

  /* Surfaces — darkest at the base, lighter as elevation rises */
  --color-surface: var(--raw-color-neutral-950);
  --color-surface-secondary: var(--raw-color-neutral-900);
  --color-surface-tertiary: var(--raw-color-neutral-800);
  --color-surface-raised: var(--raw-color-neutral-900);
  --color-overlay: rgba(0, 0, 0, 0.65);

  /* Borders */
  --color-border: var(--raw-color-neutral-800);
  --color-border-strong: var(--raw-color-neutral-700);

  /* Text — warm off-whites off the same neutral ramp */
  --color-text: var(--raw-color-neutral-100);
  --color-text-secondary: var(--raw-color-neutral-400);
  --color-text-muted: var(--raw-color-neutral-500);

  /* Status colours lifted one ramp step (600 → 400) for dark surfaces. The
     light -600 values are too dark on the dark (or dark-tinted -subtle) surface
     a badge/alert sits on — e.g. info blue-600 #2e63a3 was 2.57:1, an AA fail
     (axe #244 S5). The -400 ramp reads as the status colour AND clears 4.5:1. */
  --color-destructive: var(--raw-color-red-400);
  --color-success: var(--raw-color-green-400);
  --color-warning: var(--raw-color-amber-400);
  --color-info: var(--raw-color-blue-400);

  /* Subtle washes — derived from the LIVE hue (theme-set or default),
     mixed into the dark surface instead of the light-only raw tints. */
  --color-accent-subtle: color-mix(
    in srgb,
    var(--color-accent) 16%,
    var(--raw-color-neutral-950)
  );
  --color-destructive-subtle: color-mix(
    in srgb,
    var(--color-destructive) 14%,
    var(--raw-color-neutral-950)
  );
  --color-success-subtle: color-mix(
    in srgb,
    var(--color-success) 14%,
    var(--raw-color-neutral-950)
  );
  --color-warning-subtle: color-mix(
    in srgb,
    var(--color-warning) 14%,
    var(--raw-color-neutral-950)
  );
  --color-info-subtle: color-mix(
    in srgb,
    var(--color-info) 14%,
    var(--raw-color-neutral-950)
  );
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY PREFERENCE LAYERS — #244 C7
   ═══════════════════════════════════════════════

   Citizen-selectable a11y affordances, each driven by a `data-*` attribute the
   consumer stamps on <html> server-side (from a cookie, no flash) and toggles
   live. Independent of scheme/theme — they LAYER on whatever brand + light/dark
   is active. Placed after the dark block so a tie on specificity resolves here.

   - text-size   → `:root[data-text-size="N"]` scales the root font-size; the
                   whole rem-based type system grows with it (WCAG 1.4.4).
   - contrast    → `:root[data-contrast="high"]` re-maps the neutral roles to a
                   black-on-white (or white-on-black in dark) maximum, kills the
                   muted greys that fail AA, and strengthens borders (the
                   "alto contraste" pattern). A second selector handles the dark
                   pairing; (0,2,0) beats the generic dark layer.
   - link-mark   → `:root[data-link-highlight="on"] a` underlines every in-content
                   link so it is distinguishable by more than colour (1.4.1). */

:root[data-text-size="100"] {
  font-size: 100%;
}
:root[data-text-size="120"] {
  font-size: 120%;
}
:root[data-text-size="140"] {
  font-size: 140%;
}
:root[data-text-size="160"] {
  font-size: 160%;
}

:root[data-contrast="high"] {
  --color-text: #000000;
  --color-text-secondary: #000000;
  --color-text-muted: #1a1a1a;
  --color-surface: #ffffff;
  --color-surface-secondary: #ffffff;
  --color-surface-tertiary: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #000000;
  --color-border-strong: #000000;
  --focus-ring-color: #000000;
}

:root[data-contrast="high"][data-scheme="dark"] {
  --color-text: #ffffff;
  --color-text-secondary: #ffffff;
  --color-text-muted: #e6e6e6;
  --color-surface: #000000;
  --color-surface-secondary: #000000;
  --color-surface-tertiary: #000000;
  --color-surface-raised: #000000;
  --color-border: #ffffff;
  --color-border-strong: #ffffff;
  --focus-ring-color: #ffffff;
}

/* High contrast implies link distinction — underline links even if the citizen
   hasn't separately enabled the link-highlight pref. */
:root[data-contrast="high"] a,
:root[data-link-highlight="on"] a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ─── Tablet (768px+) ─── */
@media (min-width: 768px) {
  :root {
    --content-padding-x: var(--space-lg);
    --content-padding-y: var(--space-xl);
  }
}

/* ─── Desktop (1024px+) ─── */
@media (min-width: 1024px) {
  :root {
    --grid-gutter: var(--space-lg);
    --grid-margin: var(--space-2xl);
    --content-padding-x: var(--space-xl);
    --content-padding-y: var(--space-2xl);
  }
}