/*
 * Sonra design tokens v1.1.1
 * Source of truth for the look and feel of every Sonra app.
 *
 * Copy this file into an app unchanged and import it first, before app styles.
 * Never edit a copy: change it here, bump the version, then re-copy.
 * Usage rules, contrast figures and component patterns: design/README.md
 *
 * The language is the OpenModel one (cool off-white page, near-black ink,
 * white cards with hairline borders, Instrument Sans with DM Mono accents),
 * carrying the Sonra brand lime as the accent.
 */

:root {
  /* ---- Brand ---- */
  /* Fills only: button and panel backgrounds, dots, bars, accents on dark.
     Lime is 9.95:1 behind ink text, but only 1.77:1 as text or an outline on
     light, so it must never be used for either. Use --accent-ink for those. */
  --accent: #a8d200;
  --accent-hover: #97bd00;
  /* Pale lime for selected rows and chips. Light enough that --accent-ink text on it
     still clears 4.5:1 (measured 4.62:1). */
  --accent-soft: #f4fbe0;
  /* Lime for text, icons, outlines and selected states on light surfaces.
     4.50:1 on --bg, 4.92:1 on --surface. */
  --accent-ink: #5f7a00;

  /* ---- Surfaces ---- */
  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-sunken: #eef1f5;
  --hairline: #d4d7dd;
  --hairline-strong: #b9bec8;

  /* ---- Dark panel (contrast bands, at most one per page) ---- */
  --panel-dark: #14161b;
  --on-dark: #ffffff;
  --on-dark-muted: #b6bbc4;
  --hairline-dark: #2b2f38;

  /* ---- Dark navigation (app sidebars), matching the OpenModel app dashboard ----
     Dark charcoal panel, light grey items, mono section labels, and the active item
     as lime text on a lime-tinted row. Text clears 4.5:1 on --nav-bg; dots 3:1. */
  --nav-bg: #1c1e24;
  --nav-surface: #15171c;
  --nav-border: #2b2e37;
  --nav-hover: rgba(255, 255, 255, 0.06);
  --nav-active-bg: rgba(168, 210, 0, 0.14);
  --nav-active-text: var(--accent);
  --nav-text: #c3c8d1;
  --nav-text-strong: #ffffff;
  --nav-label: #8b93a1;
  --ok-on-dark: #45c98a;
  --warn-on-dark: #f0b04a;
  --err-on-dark: #ff7482;
  --off-on-dark: #3f4450;

  /* ---- Brand mark: slate S with a lime dot ---- */
  --logo-ink: #3c4848;
  --logo-dot: var(--accent);

  /* ---- Text ---- */
  --ink: #17191e;
  --ink-muted: #4a4e5a;
  --ink-faint: #5a5f6d;
  --on-accent: var(--ink);

  /* ---- Status (all pass 4.5:1 on --bg and --surface) ---- */
  --ok: #0f7a46;
  --ok-soft: #e4f4ea;
  --warn: #8a5200;
  --warn-soft: #fdf1df;
  --err: #c0263a;
  --err-soft: #fdeaec;
  --info: #0b5fd0;
  --info-soft: #e8f0fd;

  /* ---- Ad platform accents ----
     Meta, Google and TikTok indicator colours, darkened from each brand
     colour so small badge text clears 4.5:1 on --bg and --surface. */
  --meta: #0b5fd0;
  --google: #1257b8;
  --tiktok: #c0263a;

  /* ---- Code block syntax (on the dark panel; both clear 9:1) ---- */
  --code-kw: #c4b5ff;
  --code-num: #ffcf8a;

  /* ---- Type ---- */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.75rem;     /* 12px, eyebrow and mono labels */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 1rem;      /* 16px body */
  --text-lg: 1.125rem;    /* 18px lead paragraph */
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-h3: 1.5rem;
  --text-h2: clamp(2rem, 4vw, 3rem);          /* 32 to 48px */
  --text-h1: clamp(2.5rem, 6vw, 4.25rem);     /* 40 to 68px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --tracking-h1: -0.03em;
  --tracking-h2: -0.025em;
  --tracking-mono: 0.08em;   /* eyebrow and badge letter-spacing */
  --leading-tight: 1.05;
  --leading-heading: 1.15;
  --leading-body: 1.6;

  /* ---- Space (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 8px;     /* buttons, inputs */
  --radius-md: 12px;
  --radius-lg: 16px;    /* cards, panels */
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(23, 25, 30, 0.04);
  --shadow-md: 0 4px 6px rgba(23, 25, 30, 0.04), 0 20px 30px rgba(23, 25, 30, 0.10);
  --shadow-dark: 0 20px 40px rgba(0, 0, 0, 0.35);

  /* ---- Focus: always visible, never colour alone ---- */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-color: var(--accent-ink);
  --focus-halo: 0 0 0 4px rgba(95, 122, 0, 0.22);

  /* ---- Motion ---- */
  --motion-fast: 120ms;
  --motion: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ---- Hero texture (hero sections only, keep faint) ---- */
  --grid-size: 72px;
  --grid-line: rgba(23, 25, 30, 0.05);

  /* ---- Layout ---- */
  --container: 1180px;
  --container-narrow: 760px;
}

/*
 * Light only, deliberately: the design language is a light one, and one theme
 * keeps every app identical. Apps must not add their own dark palette. The
 * dark panel tokens above cover intentional dark bands. If dark mode is wanted
 * later, it belongs here as a v2, not per app.
 */
:root { color-scheme: light; }

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