/* tokens.css — Develop platform design tokens (v1).
 *
 * Extracted verbatim from www's globals.css palette. These RAW token
 * names (--background, --primary, --radius, --chart-1..5, --sidebar*,
 * --shadow-*, --ease-*) are the v1 CONTRACT: lib must not rename one
 * without bumping to /v2/. Consumers @import this at the top of their
 * own globals.css and KEEP their own Tailwind `@theme inline` bridge
 * (@theme is a build-time compiler directive and cannot be served from
 * a runtime stylesheet).
 *
 * Dark mode is expressed for BOTH live selector conventions:
 *   - `.dark`            (Next consumers: www / chatbot / user-center)
 *   - `[data-theme="dark"]` (xshort toggles data-theme, not a class)
 * Consumers must not invent a third.
 *
 * Fonts: only the SCALE + fallback chain live here. The actual font
 * files (Geist via next/font, etc.) stay per-consumer; --font-geist is
 * injected at runtime by the consumer when present, else we fall back
 * to the system stack with CJK coverage.
 */

:root {
  --radius: 0.625rem;

  --background: oklch(0.985 0 0);
  --foreground: oklch(0.12 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.12 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.12 0 0);
  --primary: oklch(0.12 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.965 0 0);
  --secondary-foreground: oklch(0.38 0 0);
  --muted: oklch(0.94 0 0);
  --muted-foreground: oklch(0.58 0 0);
  --accent: oklch(0.965 0 0);
  --accent-foreground: oklch(0.12 0 0);
  --destructive: oklch(0.55 0.15 25);
  --border: oklch(0.9 0 0);
  --input: oklch(0.9 0 0);
  --ring: oklch(0.5 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.97 0 0);
  --sidebar-foreground: oklch(0.38 0 0);
  --sidebar-primary: oklch(0.12 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.12 0 0 / 0.06);
  --sidebar-accent-foreground: oklch(0.12 0 0);
  --sidebar-border: oklch(0.88 0 0);
  --sidebar-ring: oklch(0.5 0 0);

  --shadow-card: 0 1px 3px oklch(0 0 0 / 0.05), 0 1px 1px oklch(0 0 0 / 0.03);
  --shadow-float:
    0 8px 24px -6px oklch(0 0 0 / 0.1), 0 2px 8px -2px oklch(0 0 0 / 0.04);
  --shadow-composer: 0 1px 2px oklch(0 0 0 / 0.04);
  --shadow-composer-focus:
    0 0 0 1px oklch(0 0 0 / 0.06), 0 2px 8px -2px oklch(0 0 0 / 0.06);
  --shadow-inset: inset 0 1px 1px oklch(0 0 0 / 0.03);
  --shadow-glow: 0 0 20px oklch(0 0 0 / 0.08);

  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Type scale + font fallback chain. Consumer-supplied --font-geist /
     --font-geist-mono win when present; otherwise system + CJK. */
  /* Inline var() fallbacks: a consumer-supplied --font-geist wins, but when
     it's absent (static pages with no next/font) the var() still resolves
     to a real family — without the fallback the whole font-family is
     invalid-at-computed-value and silently drops to serif. */
  --font-sans: var(--font-geist, ui-sans-serif), ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei",
    "Hiragino Sans GB", sans-serif;
  --font-mono: var(--font-geist-mono, ui-monospace), ui-monospace,
    SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Raw size ladder (Tailwind-style). Prefer the semantic roles below in app
     code — reference a ROLE, not a raw step, so channels agree on "body". */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --leading-tight: 1.2;
  --leading-normal: 1.6;

  /* Semantic type roles — reference THESE so every surface agrees on what
     body / caption / title / heading mean. lib owns the canonical body size
     (system.css `body` consumes --text-body). Anchored at a COMPACT 12px body
     (the dense app/tool aesthetic); roles scale up from there. A channel sizes
     elements by role, never by rebasing the document. See docs/lib-frontend-spec.md §4. */
  --text-micro: 0.6875rem;   /* 11px — meta, labels, eyebrows, fine print */
  --text-caption: 0.75rem;   /* 12px — dense secondary copy (= body, compact) */
  --text-body: 0.75rem;      /* 12px — base body copy (canonical base) */
  --text-title: 0.875rem;    /* 14px — panel / card titles, emphasized labels */
  --text-heading: 1rem;      /* 16px — section headings */
  --text-display: 1.375rem;  /* 22px — page / hero display */
  --leading-heading: var(--leading-tight);  /* 1.2 — headings / display */
  --leading-body: var(--leading-normal);    /* 1.6 — body / caption */

  /* Spacing scale — the component layer (system.css) sizes padding/gaps from
     these so every surface shares one rhythm. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* Radius scale (--radius is the base used by cards/buttons). */
  --radius-sm: 4px;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* A stronger border for hover/active affordance (xshort's lift effect). */
  --border-strong: oklch(0.83 0 0);

  /* Spring-out easing — xshort's tactile button/card feel. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Status colors + 10% surface tints (badges, inline status). */
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.1);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-bg: rgba(37, 99, 235, 0.1);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.1);

  /* Brand gradient — a visible blue→purple sweep: blue (hue 258) into a true
     purple (hue 300). Wide enough to clearly read as a gradient, but stops
     short of magenta/coral so it stays a restrained two-color accent, not a
     rainbow. v1 contract value (light). The consumers that link this stylesheet
     (www / user-center / chatbot / xsvg) pick it up automatically; xsvg also
     carries a matching fallback literal. Consumed as background-image by
     .brand-gradient-text + .btn-brand (system.css). --brand-gradient-fg is the
     readable label over the fill. */
  --brand-gradient: linear-gradient(95deg,
    oklch(0.54 0.23 266) 0%,
    oklch(0.52 0.26 296) 50%,
    oklch(0.55 0.27 324) 100%);
  --brand-gradient-fg: oklch(0.99 0 0);
}

.dark,
[data-theme="dark"] {
  --background: oklch(0.195 0 0);
  --foreground: oklch(0.94 0 0);
  --card: oklch(0.225 0 0);
  --card-foreground: oklch(0.94 0 0);
  --popover: oklch(0.225 0 0);
  --popover-foreground: oklch(0.94 0 0);
  --primary: oklch(0.94 0 0);
  --primary-foreground: oklch(0.195 0 0);
  --secondary: oklch(0.26 0 0);
  --secondary-foreground: oklch(0.75 0 0);
  --muted: oklch(0.165 0 0);
  --muted-foreground: oklch(0.6 0 0);
  --accent: oklch(0.26 0 0);
  --accent-foreground: oklch(0.94 0 0);
  --destructive: oklch(0.7 0.15 25);
  --border: oklch(0.27 0 0);
  --input: oklch(0.27 0 0);
  --ring: oklch(0.45 0 0);
  --border-strong: oklch(0.38 0 0);
  --success: #22c55e;
  --success-bg: rgba(34, 197, 94, 0.14);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.14);
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.14);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.175 0 0);
  --sidebar-foreground: oklch(0.78 0 0);
  --sidebar-primary: oklch(0.94 0 0);
  --sidebar-primary-foreground: oklch(0.195 0 0);
  --sidebar-accent: oklch(0.94 0 0 / 0.06);
  --sidebar-accent-foreground: oklch(0.94 0 0);
  --sidebar-border: oklch(0.25 0 0);
  --sidebar-ring: oklch(0.45 0 0);

  --shadow-card:
    inset 0 1px 0 oklch(1 0 0 / 0.04), 0 1px 2px oklch(0 0 0 / 0.2),
    0 0.5px 1px oklch(0 0 0 / 0.15);
  --shadow-float:
    0 0 0 1px oklch(1 0 0 / 0.06), 0 16px 48px -6px oklch(0 0 0 / 0.35),
    0 6px 12px -2px oklch(0 0 0 / 0.2);
  --shadow-composer:
    0 1px 3px oklch(0 0 0 / 0.2), inset 0 1px 0 oklch(1 0 0 / 0.03);
  --shadow-composer-focus:
    0 0 0 1px oklch(1 0 0 / 0.1), 0 4px 16px -4px oklch(0 0 0 / 0.3),
    inset 0 1px 0 oklch(1 0 0 / 0.04);

  /* Brand gradient (dark) — same blue→purple as light, luminance lifted a
     touch so gradient TEXT stays legible on the dark background; near-white
     label. Keep in sync with the :root value. */
  --brand-gradient: linear-gradient(95deg,
    oklch(0.64 0.21 266) 0%,
    oklch(0.62 0.25 296) 50%,
    oklch(0.65 0.26 324) 100%);
  --brand-gradient-fg: oklch(0.99 0 0);
}