/* ═══════════════════════════════════════════════════════════════
   Tokens — Design tokens for chat-ui component system.
   OKLCH color space · light-dark() adaptive · rem spatial units

   Aesthetic: dark-first, high-contrast, monochromatic.
   Dark mode uses pure grayscale (zero chroma, zero hue).
   Light mode carries a cool tint (hue 225).
   Hierarchy is luminance-only — no accent color for decoration,
   accent reserved strictly for interactive elements.

   Distinguishing choices (from design reference):
   · Hero numbers use weight-thin (300) at display scale — elegant, not bold
   · Dark bg is true black — depth comes from luminance steps, never shadows
   · Overline labels are uppercase + wide tracking (0.06em) for categorization
   · Flat dark mode — zero shadows, surfaces separated by bg color shifts only
   · Monospace font is the default — data-confident, technical character
   ═══════════════════════════════════════════════════════════════ */

/* Color ramps + semantic role aliases + typography scale are
   primitive-layer — every component consumes `--a-fg`, `--a-bg-*`,
   `--a-font-family`, `--a-body-size`, etc. Kept bundled. */
@import "./colors/index.css";
@import "./typography.css";

/* NOT imported here:
   - styles/prose.css   — opt-in per-page; [prose] attribute only
   - styles/themes.css  — opt-in per-page; 8 named themes + schemes
   Link separately from HTML when needed. */

/* ═══════════════════════════════════════════════════════════════
   PARAMETRIC MULTIPLIERS — @property declarations
   Two knobs that rescale the entire spatial system.
   Set on :root for global effect, or on [density]/[radius] for scoped.

   --a-density   Controls ALL spatial dimensions: spacing, padding,
                 gaps, component heights. One knob for everything.
   --a-radius-k  Controls corner rounding independently.
   ═══════════════════════════════════════════════════════════════ */

@property --a-density {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@property --a-radius-k {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  /* ═══════════════════════════════════════════════════════════
     PRIMITIVES — context-free building blocks
     ═══════════════════════════════════════════════════════════ */

  /* ── Spacing ──
     Parametric: each token = --a-density × base.
     At d=1, values match the original fixed scale.
     Base unit: 0.5rem (8px). Named by multiplier of 0.25rem. */
  --a-space-0: 0;
  --a-space-px: 1px;
  --a-space-0-5: calc(var(--a-density) * 0.125rem); /*  2px at d=1 */
  --a-space-1: calc(var(--a-density) * 0.25rem); /*  4px at d=1 */
  --a-space-1-5: calc(var(--a-density) * 0.375rem); /*  6px at d=1 */
  --a-space-2: calc(var(--a-density) * 0.5rem); /*  8px at d=1 */
  --a-space-2-5: calc(var(--a-density) * 0.625rem); /* 10px at d=1 */
  --a-space-3: calc(var(--a-density) * 0.75rem); /* 12px at d=1 */
  --a-space-3-5: calc(var(--a-density) * 0.875rem); /* 14px at d=1 */
  --a-space-4: calc(var(--a-density) * 1rem); /* 16px at d=1 */
  --a-space-4-5: calc(var(--a-density) * 1.125rem); /* 18px at d=1 */
  --a-space-5: calc(var(--a-density) * 1.25rem); /* 20px at d=1 */
  --a-space-6: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
  --a-space-7: calc(var(--a-density) * 1.75rem); /* 28px at d=1 */
  --a-space-8: calc(var(--a-density) * 2rem); /* 32px at d=1 */
  --a-space-9: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
  --a-space-10: calc(var(--a-density) * 2.5rem); /* 40px at d=1 */
  --a-space-12: calc(var(--a-density) * 3rem); /* 48px at d=1 */
  --a-space-16: calc(var(--a-density) * 4rem); /* 64px at d=1 */

  /* ── Radius ──
     Parametric: each token = clamp(min, --a-radius-k × base, max).
     At k=1, values match the original fixed scale.
     k=0 → sharp (clamped to min). k=2 → extra round (clamped to max). */
  --a-radius-min: 0.25rem;
  --a-radius-max: 1.25rem;
  /* §230-bundle (v0.5.9): xs scale notch added for badge / sub-tile / inline-pill use cases needing smaller radius than `sm`. */
  --a-radius-xs-k: 0.166;
  --a-radius-sm-k: 0.333;
  --a-radius-md-k: 0.666;
  --a-radius-lg-k: 1.000;
  --a-radius-xs: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-xs-k)), var(--a-radius-max));
  --a-radius-sm: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-sm-k)), var(--a-radius-max));
  --a-radius-md: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-md-k)), var(--a-radius-max));
  --a-radius-lg: clamp(var(--a-radius-min), calc(var(--a-radius-k) * var(--a-radius-max) * var(--a-radius-lg-k)), var(--a-radius-max));
  --a-radius-full: 100rem;
  --a-radius: var(--a-radius-md);

  /* ── Inset ── */
  --a-inset-sm: var(--a-space-2);
  --a-inset-md: var(--a-space-4);
  --a-inset-lg: var(--a-space-6);
  --a-inset: var(--a-inset-md);

  /* ── Gaps ── */
  --a-gap-sm: var(--a-space-2);
  --a-gap-md: var(--a-space-3);
  --a-gap-lg: var(--a-space-4);
  --a-gap: var(--a-gap-md);

  /* ── Sizing (component heights) ──
     Heights scale with density via the space tokens. */
  --a-size-sm: calc(var(--a-density) * 1.5rem); /* 24px at d=1 */
  --a-size-md: calc(var(--a-density) * 1.875rem); /* 30px at d=1 */
  --a-size-lg: calc(var(--a-density) * 2.25rem); /* 36px at d=1 */
  --a-size: var(--a-size-md);

  /* ── Chrome heights — global app/feature UI ──
     App-level chrome (top-level headers, footers, toolbars) is 48px;
     pane-level chrome (pane headers, footers, toolbars) is 36px.
     Fixed values — these are structural measurements, not typographic,
     so they don't scale with --a-density. */
  --a-chrome-app-header-height:   48px;
  --a-chrome-app-footer-height:   48px;
  --a-chrome-app-toolbar-height:  48px;
  --a-chrome-pane-header-height:  36px;
  --a-chrome-pane-footer-height:  36px;
  --a-chrome-pane-toolbar-height: 36px;

  /* ── Toggle-control size (check, radio, switch) ──
     Tighter additive scale than --a-size: 16 / 20 / 24 px at d=1. */
  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-1)); /* 20px at d=1 — md default */

  /* ── Motion ── */
  --a-duration-fast: 120ms;
  --a-duration: 250ms;
  --a-duration-slow: 300ms;
  --a-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --a-easing-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Shadows ──
     Material-style soft, diffused 4-layer shadows:
     ambient + penumbra + umbra + contact edge.
     Hue-tinted via neutral hue. Intensity multiplier
     allows themes to control shadow strength (0 = flat, 2 = heavy). */
  --a-shadow-intensity: 1;
  --a-shadow-color: oklch(0.2 0.01 var(--a-neutral-hue));
  /* Per-layer alpha is applied via the oklch(from …) relative-color
     syntax — the legacy `var(--c) / alpha` form is invalid outside a
     color function and silently resolved to `box-shadow: none` (latent
     bug fixed 2026-04-27). */
  --a-shadow-sm:
    0 0.5px 0.5px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
    0 0.5px 1.5px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.02 * var(--a-shadow-intensity))),
    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity)));
  --a-shadow-md:
    0 0.5px 1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
    0 1.5px 3px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
    0 4px 12px oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));
  --a-shadow-lg:
    0 2px 4px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
    0 4px 8px  oklch(from var(--a-shadow-color) l c h / calc(0.03 * var(--a-shadow-intensity))),
    0 8px 24px oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity))),
    0 0   1px  oklch(from var(--a-shadow-color) l c h / calc(0.04 * var(--a-shadow-intensity)));

    --a-icon-size: 1.00rem;
    --a-caret-size: 0.875rem;
}

/* ═══════════════════════════════════════════════════════════════
   DENSITY PRESETS — scoped via [density] attribute.
   --a-density controls spacing, padding, gaps, AND component heights.
   --a-radius-k is coupled for visual consistency.

   Usage:
     <div density="compact">...tight layout...</div>
     <div density="spacious">...generous layout...</div>
   ═══════════════════════════════════════════════════════════════ */

[density="compact"] {
  --a-density: 0.85;
  --a-radius-k: 0.75;
}

[density="spacious"] {
  --a-density: 1.15;
  --a-radius-k: 1.25;
}

/* ── Radius presets — scoped via [radius] attribute ── */

[radius="sharp"] {
  --a-radius-k: 0;
  --a-radius-min: 0rem;
  --a-radius-max: 0rem;
}

[radius="rounded"] {
  --a-radius-k: 1.5;
}

[radius="round"] {
  --a-radius-k: 2;
  --a-radius-max: 3rem;
}

/* ═══════════════════════════════════════════════════════════════
   SIZE PRESETS — universal [size="sm|md|lg"] attribute.

   Sets BOTH component tokens AND container tokens.
   Each tier shifts the entire typescale to its sm/md/lg variant.

   Component: --a-size, --a-ui-px, --a-ui-size, --a-icon-size
   Container: --a-inset, --a-gap
   Typography: all 13 role sizes shift to the tier's variant

   Usage:
     <button-ui size="sm">            — compact button
     <card-ui size="lg">...</card-ui>  — spacious card + larger type inside
     <div size="sm">...</div>        — everything inside scales down
   ═══════════════════════════════════════════════════════════════ */
/* ── sm — dense data UIs, sidebars, inspectors ── */
[size] {
  font-size: var(--a-body-size);
}
[size="sm"] {
  /* Component */
  --a-size: calc(var(--a-density) * 1.5rem);
  --a-toggle-size: calc(var(--a-size-sm) - var(--a-space-2)); /* 16px at d=1 */
  --a-ui-px: var(--a-space-1-5);
  --a-ui-size: var(--a-ui-sm);
  --a-icon-size: 0.875rem;
  --a-caret-size: 0.75rem;
  /* Container */
  --a-inset: var(--a-inset-sm);
  --a-gap: var(--a-gap-sm);
  --a-radius: var(--a-radius-sm);
  /* Typography — all roles shift to -sm */
  --a-display-size: var(--a-display-sm);
  --a-title-size: var(--a-title-sm);
  --a-heading-size: var(--a-heading-sm);
  --a-section-size: var(--a-section-sm);
  --a-subsection-size: var(--a-subsection-sm);
  --a-body-size: var(--a-body-sm);
  --a-deck-size: var(--a-deck-sm);
  --a-caption-size: var(--a-caption-sm);
  --a-kicker-size: var(--a-kicker-sm);
  --a-label-size: var(--a-label-sm);
  --a-metric-size: var(--a-metric-sm);
  --a-code-size: var(--a-code-sm);
}

/* [size="md"] is the default — no overrides needed */

/* ── lg — pages, hero sections, marketing ── */
[size="lg"] {
  /* Component */
  --a-size: calc(var(--a-density) * 2.25rem);
  --a-toggle-size: var(--a-size-sm); /* 24px at d=1 */
  --a-ui-px: var(--a-space-3);
  --a-ui-size: var(--a-ui-lg);
  --a-icon-size: 1.25rem;
  --a-caret-size: 1rem;
  /* Container */
  --a-inset: var(--a-inset-lg);
  --a-gap: var(--a-gap-lg);
  --a-radius: var(--a-radius-lg);
  /* Typography — all roles shift to -lg */
  --a-display-size: var(--a-display-lg);
  --a-title-size: var(--a-title-lg);
  --a-heading-size: var(--a-heading-lg);
  --a-section-size: var(--a-section-lg);
  --a-subsection-size: var(--a-subsection-lg);
  --a-body-size: var(--a-body-lg);
  --a-deck-size: var(--a-deck-lg);
  --a-caption-size: var(--a-caption-lg);
  --a-kicker-size: var(--a-kicker-lg);
  --a-label-size: var(--a-label-lg);
  --a-metric-size: var(--a-metric-lg);
  --a-code-size: var(--a-code-lg);
}

[gap="0"] {
  --a-gap: 0;
}
[gap="1"] {
  --a-gap: var(--a-space-1);
}
[gap="2"] {
  --a-gap: var(--a-space-2);
}
[gap="3"] {
  --a-gap: var(--a-space-3);
}
[gap="4"] {
  --a-gap: var(--a-space-4);
}
[gap="5"] {
  --a-gap: var(--a-space-5);
}
[gap="6"] {
  --a-gap: var(--a-space-6);
}
[gap="7"] {
  --a-gap: var(--a-space-7);
}
[gap="8"] {
  --a-gap: var(--a-space-8);
}
[gap="9"] {
  --a-gap: var(--a-space-9);
}
[gap="10"] {
  --a-gap: var(--a-space-10);
}
[gap="12"] {
  --a-gap: var(--a-space-12);
}
[gap="16"] {
  --a-gap: var(--a-space-16);
}

[gap="sm"] {
  --a-gap: var(--a-space-4);
}
[gap="md"] {
  --a-gap: var(--a-space-6);
}
[gap="lg"] {
  --a-gap: var(--a-space-8);
}

/* ── Universal [padding] / [margin] — same scale as [gap]. Layout
   primitives (row-ui, col-ui, grid-ui, stack-ui) opt in by reading
   var(--a-padding, 0) and var(--a-margin, 0). Components with their
   own padding/margin contracts (block-ui, card-ui, drawer-ui) keep
   their scoped declarations and aren't affected.

   Registered as non-inheriting via @property so a parent's
   [padding="6"] doesn't bleed into nested layout primitives —
   children see the initial-value (0) unless they declare their own
   [padding] / [margin]. */
@property --a-padding {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --a-margin {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

[padding="0"]  { --a-padding: 0; }
[padding="1"]  { --a-padding: var(--a-space-1); }
[padding="2"]  { --a-padding: var(--a-space-2); }
[padding="3"]  { --a-padding: var(--a-space-3); }
[padding="4"]  { --a-padding: var(--a-space-4); }
[padding="5"]  { --a-padding: var(--a-space-5); }
[padding="6"]  { --a-padding: var(--a-space-6); }
[padding="7"]  { --a-padding: var(--a-space-7); }
[padding="8"]  { --a-padding: var(--a-space-8); }
[padding="9"]  { --a-padding: var(--a-space-9); }
[padding="10"] { --a-padding: var(--a-space-10); }
[padding="12"] { --a-padding: var(--a-space-12); }
[padding="16"] { --a-padding: var(--a-space-16); }

[padding="sm"] { --a-padding: var(--a-space-4); }
[padding="md"] { --a-padding: var(--a-space-6); }
[padding="lg"] { --a-padding: var(--a-space-8); }

[margin="0"]  { --a-margin: 0; }
[margin="1"]  { --a-margin: var(--a-space-1); }
[margin="2"]  { --a-margin: var(--a-space-2); }
[margin="3"]  { --a-margin: var(--a-space-3); }
[margin="4"]  { --a-margin: var(--a-space-4); }
[margin="5"]  { --a-margin: var(--a-space-5); }
[margin="6"]  { --a-margin: var(--a-space-6); }
[margin="7"]  { --a-margin: var(--a-space-7); }
[margin="8"]  { --a-margin: var(--a-space-8); }
[margin="9"]  { --a-margin: var(--a-space-9); }
[margin="10"] { --a-margin: var(--a-space-10); }
[margin="12"] { --a-margin: var(--a-space-12); }
[margin="16"] { --a-margin: var(--a-space-16); }

[margin="sm"] { --a-margin: var(--a-space-4); }
[margin="md"] { --a-margin: var(--a-space-6); }
[margin="lg"] { --a-margin: var(--a-space-8); }
