/*
 * App9 design tokens.
 *
 * Plain CSS custom properties, no build step and no framework directives, so a
 * Next.js app, a Vite app, or a raw HTML page can all load this file directly.
 *
 * Tier 1 holds primitives (raw radii, spacing, type, motion, elevation).
 * Tier 2 holds the semantic roles that product code should actually read; a
 * brand file under ./brands/ overrides the three brand roles and nothing else.
 *
 * Theming: set data-app9-theme="light" | "dark" on <html>, storage key
 * "app9-theme". With nothing set the system preference decides. Tailwind hosts
 * still carry the .dark class during the migration, so it is honoured too.
 */

/* Tier 1: primitives. */
:root {
  --app9-radius-control: 9px;
  --app9-radius-field: 10px;
  --app9-radius-panel: 16px;
  --app9-radius-pill: 999px;

  --app9-space-xs: 4px;
  --app9-space-sm: 8px;
  --app9-space-md: 16px;
  --app9-space-lg: 24px;
  --app9-space-xl: 32px;

  --app9-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --app9-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --app9-text-micro: 10px;
  --app9-text-label: 11px;
  --app9-text-label-lg: 12px;
  --app9-text-body: 13px;
  --app9-text-body-lg: 14px;
  --app9-text-lede: 16px;
  --app9-text-title: 17px;
  --app9-text-title-lg: 18px;
  --app9-text-headline: 25px;
  --app9-text-display-compact: 34px;
  --app9-text-display: clamp(38px, 5vw, 62px);

  --app9-weight-body: 400;
  --app9-weight-medium: 500;
  --app9-weight-label: 750;
  --app9-weight-title: 750;
  --app9-weight-headline: 800;
  --app9-weight-display: 850;

  --app9-motion-fast: 140ms;
  --app9-motion-base: 200ms;
  --app9-ease: cubic-bezier(.2,.8,.2,1);

  --app9-control-min-height: 44px;
  --app9-control-height: 36px;
  --app9-header-height: 64px;
  --app9-header-height-mobile: 56px;
  --app9-header-max-width: 1200px;

  --app9-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --app9-shadow-md: 0 6px 16px rgba(0,0,0,.12);
  --app9-shadow-lg: 0 18px 40px rgba(0,0,0,.18);
}

/* Tier 2: semantic roles. Light is the default, App9 base palette.
 * The ocean family is the App9.co primary palette: use ocean for fills,
 * ocean-text on pale surfaces, and on-ocean for content on ocean fills. */
:root {
  --app9-surface: #f7f8fb;
  --app9-panel: #ffffff;
  --app9-soft: #f0f2f7;
  --app9-line: #dfe3eb;
  --app9-ink: #141923;
  --app9-muted: #5d6675;
  --app9-muted-strong: #344054;
  --app9-brand: #0077b6;
  --app9-brand-soft: #eef8fd;
  --app9-on-brand: #ffffff;
  --app9-ocean: #0077b6;
  --app9-ocean-text: #006b9f;
  --app9-ocean-soft: #eef8fd;
  --app9-on-ocean: #ffffff;
  --app9-success: #16805b;
  --app9-danger: #c13c52;
  --app9-warning: #a15c07;
  --app9-warning-soft: #fdf3e3;
}

/* Dark: the reader chose it. */
:root[data-app9-theme="dark"] {
  --app9-surface: #0d1119;
  --app9-panel: #151b25;
  --app9-soft: #1c2431;
  --app9-line: #2b3545;
  --app9-ink: #f4f6fa;
  --app9-muted: #a4adbb;
  --app9-muted-strong: #d0d5dd;
  --app9-brand: #5bc0e5;
  --app9-brand-soft: #102f43;
  --app9-on-brand: #071822;
  --app9-ocean: #5bc0e5;
  --app9-ocean-text: #7bd0f5;
  --app9-ocean-soft: #102f43;
  --app9-on-ocean: #071822;
  --app9-success: #55d3a4;
  --app9-danger: #ff8295;
  --app9-warning: #e0a457;
  --app9-warning-soft: #2e2413;
}

/* Dark: Tailwind hosts that still toggle the .dark class. */
:root.dark {
  --app9-surface: #0d1119;
  --app9-panel: #151b25;
  --app9-soft: #1c2431;
  --app9-line: #2b3545;
  --app9-ink: #f4f6fa;
  --app9-muted: #a4adbb;
  --app9-muted-strong: #d0d5dd;
  --app9-brand: #5bc0e5;
  --app9-brand-soft: #102f43;
  --app9-on-brand: #071822;
  --app9-ocean: #5bc0e5;
  --app9-ocean-text: #7bd0f5;
  --app9-ocean-soft: #102f43;
  --app9-on-ocean: #071822;
  --app9-success: #55d3a4;
  --app9-danger: #ff8295;
  --app9-warning: #e0a457;
  --app9-warning-soft: #2e2413;
}

/* Dark: system preference, unless the reader picked light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-app9-theme="light"]):not(.light) {
    --app9-surface: #0d1119;
    --app9-panel: #151b25;
    --app9-soft: #1c2431;
    --app9-line: #2b3545;
    --app9-ink: #f4f6fa;
    --app9-muted: #a4adbb;
    --app9-muted-strong: #d0d5dd;
    --app9-brand: #5bc0e5;
    --app9-brand-soft: #102f43;
    --app9-on-brand: #071822;
    --app9-ocean: #5bc0e5;
    --app9-ocean-text: #7bd0f5;
    --app9-ocean-soft: #102f43;
    --app9-on-ocean: #071822;
    --app9-success: #55d3a4;
    --app9-danger: #ff8295;
    --app9-warning: #e0a457;
    --app9-warning-soft: #2e2413;
  }
}