/*
 * Design tokens of STS Exchange Platform — the single source of every visual value on this site.
 *
 * Every color, font, radius, shadow, size and duration on the pages is read from here in the
 * browser; no page and no component writes a value of its own. Two themes are two value sets of the
 * same names: the light values are the default, the dark ones apply when the device asks for dark
 * and the reader has not chosen, or when the reader chose dark (data-theme on <html>, nav.js).
 *
 * The names are semantic (what a color is for), so a token reads like a class in the code:
 * --color-muted is the muted text, --color-primary the brand fill. Two layers share this file: the
 * product's --color-* tokens follow the Figma concept "STS Exchange Platform" (the design baseline,
 * SC-011; light as drawn, dark derived — SC-002, plans/scheme.md), and the --frame-* tokens give the
 * showcase's own frame apiko.com's look. The product has no token file of its own yet.
 *
 * Type, text colors, spacing, sizes, radii and shadows are measured on the Figma's drawn screens
 * (Foundations, SC-016, plans/foundations.md); motion and the dark theme are proposed — the Figma has
 * neither.
 */
:root {
  /* The product: the Figma's drawn screens are set in Geist, with Geist Mono for ids, codes, dates
     and counts. The frame: apiko.com's DM Sans and DM Serif Display. */
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-frame: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-frame-display: 'DM Serif Display', Georgia, serif;

  /* Tracking: the Figma sets every text at -0.011em, the page title and the figures at -0.03em */
  --tracking-text: -0.011em;
  --tracking-tight: -0.03em;

  /* Surfaces */
  --color-page: #f4f4f5;
  --color-surface: #ffffff;
  --color-surface-muted: #f4f4f5;
  --color-surface-inverted: #171a26;
  --color-overlay: rgb(23 26 38 / 0.5);

  /* Text, as drawn: titles and values, secondary text, captions and ids (on white surfaces only — on
     the grey page they fall under 4.5:1, so labels there take --color-muted), placeholders */
  --color-foreground: #0a0a0b;
  --color-muted: #52525b;
  --color-caption: #71717a;
  --color-subtle: #a1a1aa;
  --color-inverted: #ffffff;

  /* Borders and focus */
  --color-default: #e4e4e7;
  --color-emphasis: #d1d0d2;
  --color-ring: #2563eb;

  /* Brand (SC-002): the Figma's drawn blue. The soft tint carries a selected row or a chip; the strong
     text is the brand color dark enough to read on the soft tint. */
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-foreground: #ffffff;
  --color-primary-soft: #eff6ff;
  --color-primary-strong: #1d4ed8;

  /* Feedback: the solid color is for icons, bars and filled buttons; the soft tint carries text in
     the -text color, inside a -border line as the Figma's badges have it. Every -text on its -soft
     meets WCAG AA in both themes. */
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-foreground: #ffffff;
  --color-danger-soft: #fef2f2;
  --color-danger-border: #fecaca;
  --color-danger-text: #b91c1c;
  --color-success: #15803d;
  --color-success-foreground: #ffffff;
  --color-success-soft: #f0fdf4;
  --color-success-border: #bbf7d0;
  --color-success-text: #15803d;
  --color-warning: #fa7522;
  --color-warning-foreground: #2a1206;
  --color-warning-soft: #fff7ed;
  --color-warning-border: #fed7aa;
  --color-warning-text: #c2410c;
  --color-info: #2563eb;
  --color-info-foreground: #ffffff;
  --color-info-soft: #eff6ff;
  --color-info-border: #bfdbfe;
  --color-info-text: #1d4ed8;

  /* Categories: the four places of the chain, away from the brand and the feedback tones and always
     shown with the party's name. Solid for a tile with -foreground on it; soft with -text for a chip. */
  --color-category-mine: #a16207;
  --color-category-mine-foreground: #ffffff;
  --color-category-mine-soft: #fefce8;
  --color-category-mine-text: #854d0e;
  --color-category-carrier: #0e7490;
  --color-category-carrier-foreground: #ffffff;
  --color-category-carrier-soft: #ecfeff;
  --color-category-carrier-text: #155e75;
  --color-category-refiner: #7c3aed;
  --color-category-refiner-foreground: #ffffff;
  --color-category-refiner-soft: #f5f3ff;
  --color-category-refiner-text: #6d28d9;
  --color-category-customer: #171a26;
  --color-category-customer-foreground: #ffffff;
  --color-category-customer-soft: #f4f4f5;
  --color-category-customer-text: #171a26;

  /* Elevation, from the Figma's effects: raised (the workspace switcher, the active segment), card
     (the dictionary card; most cards have a border only), soft (the library's Soft Shadow: drawers and
     popovers), overlay (dialogs — proposed) */
  --shadow-raised: 0 1px 1.5px 0 rgb(22 25 36 / 0.05);
  --shadow-card: 0 0 0 1px rgb(15 15 20 / 0.04), 0 1px 1px 0 rgb(15 15 20 / 0.06);
  --shadow-soft: 0 4px 30px 0 rgb(46 45 116 / 0.05);
  --shadow-overlay: 0 16px 40px -8px rgb(23 26 38 / 0.18), 0 4px 10px -4px rgb(23 26 38 / 0.08);

  /* The showcase's own frame in apiko.com's look (SC-011): menu, top bar, page heads and text. The
     product's samples inside it keep the --color-* tokens above. */
  --frame-page: #f7f7f7;
  --frame-surface: #ffffff;
  --frame-ink: #051926;
  --frame-muted: #686868;
  --frame-border: #ececec;
  --frame-accent: #67e77f;
  --frame-accent-hover: #52bf6b;
  --frame-accent-foreground: #051926;
  --frame-accent-soft: #e1fae5;
  --frame-hover: #f1f8f2;
  --frame-accent-strong: #2c713b;
  --frame-link: #2c713b;
  --frame-band: #051926;
  --frame-band-foreground: #ffffff;
  --frame-highlight: #ed3c11;

  /* A logo is drawn in currentColor with its knockouts in the color behind it. This is that color on
     the page; whatever puts a mark on another color sets it again (the brand tile: --color-primary). */
  --lg-ground: var(--color-surface);
  /* The Logo page shows every mark on light and on dark side by side, whatever the page's theme: the
     light theme's panel, brand and text, and the dark theme's, fixed */
  --lg-light-ground: #ffffff;
  --lg-light-ink: #2563eb;
  --lg-light-text: #0a0a0b;
  --lg-dark-ground: #18181b;
  --lg-dark-ink: #60a5fa;
  --lg-dark-text: #fafafa;

  /* Radii, as drawn: progress segments, small tiles and icon chips, controls (buttons, fields, menu
     items), the content panel, cards, pills; the frame's own corners are apiko.com's */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-card: 14px;
  --radius-full: 9999px;
  --radius-frame: 6px;

  /* Layout. The showcase's frame uses --size-sidebar and --size-header; the product's shell, as drawn
     at 1440: a 240 sidebar on the page grey, the content panel inset 8, its top bar 48, a content
     column 1134 wide that splits into 718 and 400 */
  --size-sidebar: 240px;
  --size-header: 56px;
  --size-app-header: 48px;
  --size-app-inset: 8px;
  --size-content: 1134px;
  --size-main: 718px;
  --size-aside: 400px;
  --size-form: 384px;

  /* Control and row heights, as drawn */
  --size-control: 34px;
  --size-control-sm: 28px;
  --size-menu-item: 33px;
  --size-row: 60px;
  --size-row-head: 38px;
  --size-avatar: 22px;
  --size-avatar-lg: 32px;
  --size-tile: 16px;
  --size-icon: 16px;

  /* Icons: Lucide's 24 grid; the stroke is 1.5 px on screen at every size, as in the Figma (Lucide's
     absolute stroke width) — components.css › Icon scales it by each icon's --icon-size */
  --icon-stroke: 1.5;

  /* Layering */
  --z-header: 10;
  --z-modal: 50;
  --z-toast: 60;

  /* Motion — proposed, the Figma has none: hover and press, switches and tabs, drawers and dialogs;
     the pulse of an AI call at work (D-032); a spinner's turn; a loader's cycle, and the wait before a
     loader shows (plans/loaders.md) */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-pulse: 1400ms;
  --duration-spin: 800ms;
  --duration-loader: 1600ms;
  --duration-loader-delay: 400ms;
  /* Scenes of the layouts: slow loops of the product's world (components.css › Scenes) */
  --duration-scene: 12s;
  --duration-scene-check: 8s;
  --duration-drift: 24s;
  --duration-sway: 3s;
  --duration-puff: 4s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);

  /* Spacing: the 4 px scale with the Figma's half steps */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Illustrations (assets/illustrations.js): the Figma's outline manner at picture scale, drawn only
     from these. Each names a color of the scheme, so the dark theme redefines nothing here */
  --ill-line: var(--color-foreground);
  --ill-faint: var(--color-subtle);
  --ill-fill: var(--color-surface);
  --ill-soft: var(--color-surface-muted);
  --ill-ground: var(--color-default);
  --ill-accent: var(--color-primary);
  --ill-accent-soft: var(--color-primary-soft);
  --ill-success: var(--color-success);
  --ill-success-soft: var(--color-success-soft);
  --ill-warning: var(--color-warning);
  --ill-warning-soft: var(--color-warning-soft);
  --ill-danger: var(--color-danger);
  --ill-danger-soft: var(--color-danger-soft);
  --ill-mine: var(--color-category-mine);
  --ill-mine-soft: var(--color-category-mine-soft);
  --ill-carrier: var(--color-category-carrier);
  --ill-carrier-soft: var(--color-category-carrier-soft);
  --ill-refiner: var(--color-category-refiner);
  --ill-refiner-soft: var(--color-category-refiner-soft);
  --ill-customer: var(--color-category-customer);
  --ill-customer-soft: var(--color-category-customer-soft);
  --ill-stroke: 2;

  /* Charts (charts/index.html, SC-008): a party's figure wears its party's hue, stepped for a chart —
     inside the lightness band and over the chroma floor of the dataviz checks against the surface
     (validated in both themes). The grid and the axis are recessive; a missing figure is a hatch,
     never a color. Text on a chart wears the text tokens, not these */
  --chart-mine: #a16207;
  --chart-carrier: #0891b2;
  --chart-refiner: #7c3aed;
  --chart-received: var(--color-emphasis);
  --chart-total: var(--color-category-customer);
  --chart-grid: var(--color-default);
  --chart-axis: var(--color-subtle);
  --chart-missing: var(--color-subtle);
  --chart-end: 4px;

  color-scheme: light;
}

/* ── Dark: the device asks for it and the reader has not chosen, or the reader chose it ── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-page: #09090b;
    --color-surface: #18181b;
    --color-surface-muted: #27272a;
    --color-surface-inverted: #fafafa;
    --color-overlay: rgb(0 0 0 / 0.7);

    --color-foreground: #fafafa;
    --color-muted: #a1a1aa;
    --color-caption: #8e8e98;
    --color-subtle: #71717a;
    --color-inverted: #171a26;

    --color-default: #2e2e33;
    --color-emphasis: #46464e;
    --color-ring: #60a5fa;

    --color-primary: #60a5fa;
    --color-primary-hover: #93c5fd;
    --color-primary-foreground: #172554;
    --color-primary-soft: #172554;
    --color-primary-strong: #93c5fd;

    --color-danger: #f87171;
    --color-danger-hover: #ef4444;
    --color-danger-foreground: #18181b;
    --color-danger-soft: #450a0a;
    --color-danger-border: #7f1d1d;
    --color-danger-text: #fca5a5;
    --color-success: #4ade80;
    --color-success-foreground: #052e16;
    --color-success-soft: #052e16;
    --color-success-border: #14532d;
    --color-success-text: #4ade80;
    --color-warning: #fb923c;
    --color-warning-foreground: #431407;
    --color-warning-soft: #431407;
    --color-warning-border: #7c2d12;
    --color-warning-text: #fdba74;
    --color-info: #60a5fa;
    --color-info-foreground: #172554;
    --color-info-soft: #172554;
    --color-info-border: #1e3a8a;
    --color-info-text: #93c5fd;

    --color-category-mine: #eab308;
    --color-category-mine-foreground: #422006;
    --color-category-mine-soft: #422006;
    --color-category-mine-text: #fde047;
    --color-category-carrier: #22d3ee;
    --color-category-carrier-foreground: #083344;
    --color-category-carrier-soft: #083344;
    --color-category-carrier-text: #67e8f9;
    --color-category-refiner: #a78bfa;
    --color-category-refiner-foreground: #2e1065;
    --color-category-refiner-soft: #2e1065;
    --color-category-refiner-text: #c4b5fd;
    --color-category-customer: #fafafa;
    --color-category-customer-foreground: #171a26;
    --color-category-customer-soft: #27272a;
    --color-category-customer-text: #fafafa;

    --shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.5);

    --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.5);

    --shadow-soft: 0 4px 30px 0 rgb(0 0 0 / 0.45);

    --shadow-overlay: 0 16px 40px -8px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);

    --frame-page: #051926;
    --frame-surface: #122130;
    --frame-ink: #f7f7f7;
    --frame-muted: #9e9e9e;
    --frame-border: #182f44;
    --frame-accent: #67e77f;
    --frame-accent-hover: #52bf6b;
    --frame-accent-foreground: #051926;
    --frame-accent-soft: #143a2a;
    --frame-hover: #0d2a35;
    --frame-accent-strong: #67e77f;
    --frame-link: #67e77f;
    --frame-band: #182f44;
    --frame-band-foreground: #ffffff;
    --frame-highlight: #ff6a3d;

    --chart-mine: #b88004;
    --chart-carrier: #0aa3bf;
    --chart-refiner: #8b5cf6;

    color-scheme: dark;

  }
}

:root[data-theme='dark'] {
  --color-page: #09090b;
  --color-surface: #18181b;
  --color-surface-muted: #27272a;
  --color-surface-inverted: #fafafa;
  --color-overlay: rgb(0 0 0 / 0.7);

  --color-foreground: #fafafa;
  --color-muted: #a1a1aa;
  --color-caption: #8e8e98;
  --color-subtle: #71717a;
  --color-inverted: #171a26;

  --color-default: #2e2e33;
  --color-emphasis: #46464e;
  --color-ring: #60a5fa;

  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-primary-foreground: #172554;
  --color-primary-soft: #172554;
  --color-primary-strong: #93c5fd;

  --color-danger: #f87171;
  --color-danger-hover: #ef4444;
  --color-danger-foreground: #18181b;
  --color-danger-soft: #450a0a;
  --color-danger-border: #7f1d1d;
  --color-danger-text: #fca5a5;
  --color-success: #4ade80;
  --color-success-foreground: #052e16;
  --color-success-soft: #052e16;
  --color-success-border: #14532d;
  --color-success-text: #4ade80;
  --color-warning: #fb923c;
  --color-warning-foreground: #431407;
  --color-warning-soft: #431407;
  --color-warning-border: #7c2d12;
  --color-warning-text: #fdba74;
  --color-info: #60a5fa;
  --color-info-foreground: #172554;
  --color-info-soft: #172554;
  --color-info-border: #1e3a8a;
  --color-info-text: #93c5fd;

  --color-category-mine: #eab308;
  --color-category-mine-foreground: #422006;
  --color-category-mine-soft: #422006;
  --color-category-mine-text: #fde047;
  --color-category-carrier: #22d3ee;
  --color-category-carrier-foreground: #083344;
  --color-category-carrier-soft: #083344;
  --color-category-carrier-text: #67e8f9;
  --color-category-refiner: #a78bfa;
  --color-category-refiner-foreground: #2e1065;
  --color-category-refiner-soft: #2e1065;
  --color-category-refiner-text: #c4b5fd;
  --color-category-customer: #fafafa;
  --color-category-customer-foreground: #171a26;
  --color-category-customer-soft: #27272a;
  --color-category-customer-text: #fafafa;

  --shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.5);

  --shadow-card: 0 0 0 1px rgb(255 255 255 / 0.04), 0 1px 2px 0 rgb(0 0 0 / 0.5);

  --shadow-soft: 0 4px 30px 0 rgb(0 0 0 / 0.45);

  --shadow-overlay: 0 16px 40px -8px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);

  --frame-page: #051926;
  --frame-surface: #122130;
  --frame-ink: #f7f7f7;
  --frame-muted: #9e9e9e;
  --frame-border: #182f44;
  --frame-accent: #67e77f;
  --frame-accent-hover: #52bf6b;
  --frame-accent-foreground: #051926;
  --frame-accent-soft: #143a2a;
  --frame-hover: #0d2a35;
  --frame-accent-strong: #67e77f;
  --frame-link: #67e77f;
  --frame-band: #182f44;
  --frame-band-foreground: #ffffff;
  --frame-highlight: #ff6a3d;

  --chart-mine: #b88004;
  --chart-carrier: #0aa3bf;
  --chart-refiner: #8b5cf6;

  color-scheme: dark;
}