/* CKY Brand Design System v1.0.0 — approved 2026-11-07 */
:root {
  color-scheme: dark light;

  /* Core palette */
  --cky-color-ink: #07111f;
  --cky-color-deep: #050d19;
  --cky-color-navy: #101f36;
  --cky-color-raised: #162840;
  --cky-color-paper: #f5f8fc;
  --cky-color-slate: #5a6980;
  --cky-color-violet: #7358d9;
  --cky-color-blue: #2774d9;
  --cky-color-cyan: #10b9cf;
  --cky-color-mint: #0cc5b0;
  --cky-color-gold: #d6a447;
  --cky-color-magenta: #c94b9e;
  --cky-color-danger: #df5b67;
  --cky-color-warning: #e3b341;
  --cky-color-success: #19b88a;

  /* Product accents */
  --cky-product-tools: var(--cky-color-blue);
  --cky-product-paper: var(--cky-color-cyan);
  --cky-product-futures: var(--cky-color-gold);
  --cky-product-prepump: var(--cky-color-violet);

  /* Dark theme semantic tokens */
  --cky-bg-canvas: var(--cky-color-deep);
  --cky-bg-surface: var(--cky-color-ink);
  --cky-bg-panel: var(--cky-color-navy);
  --cky-bg-raised: var(--cky-color-raised);
  --cky-text-primary: var(--cky-color-paper);
  --cky-text-secondary: #b6c5d8;
  --cky-text-muted: #93a8bf;
  --cky-border-subtle: #233954;
  --cky-border-strong: #3b5270;
  --cky-focus-ring: #62a4ff;
  --cky-overlay: rgb(2 8 17 / 76%);

  /* Typography */
  --cky-font-sans: Inter, "Segoe UI", Arial, sans-serif;
  --cky-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --cky-font-size-1: 0.75rem;
  --cky-font-size-2: 0.875rem;
  --cky-font-size-3: 1rem;
  --cky-font-size-4: 1.125rem;
  --cky-font-size-5: 1.5rem;
  --cky-font-size-6: clamp(2rem, 4vw, 3.5rem);
  --cky-line-tight: 1.1;
  --cky-line-body: 1.5;
  --cky-weight-regular: 400;
  --cky-weight-medium: 500;
  --cky-weight-semibold: 600;
  --cky-weight-bold: 750;

  /* Four-pixel spacing grid */
  --cky-space-0: 0;
  --cky-space-1: 0.25rem;
  --cky-space-2: 0.5rem;
  --cky-space-3: 0.75rem;
  --cky-space-4: 1rem;
  --cky-space-5: 1.25rem;
  --cky-space-6: 1.5rem;
  --cky-space-8: 2rem;
  --cky-space-10: 2.5rem;
  --cky-space-12: 3rem;
  --cky-space-16: 4rem;
  --cky-space-20: 5rem;

  /* Geometry */
  --cky-radius-xs: 0.375rem;
  --cky-radius-sm: 0.625rem;
  --cky-radius-md: 0.875rem;
  --cky-radius-lg: 1.25rem;
  --cky-radius-xl: 1.75rem;
  --cky-radius-pill: 999px;
  --cky-border-width: 1px;
  --cky-control-height-sm: 2rem;
  --cky-control-height-md: 2.75rem;
  --cky-control-height-lg: 3.25rem;
  --cky-content-max: 75rem;
  --cky-sidebar-width: 17.5rem;

  /* Motion */
  --cky-duration-fast: 120ms;
  --cky-duration-base: 180ms;
  --cky-duration-slow: 280ms;
  --cky-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --cky-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Elevation */
  --cky-shadow-1: 0 1px 2px rgb(0 0 0 / 24%);
  --cky-shadow-2: 0 12px 32px rgb(0 0 0 / 28%);
  --cky-shadow-focus: 0 0 0 3px rgb(98 164 255 / 35%);
}

[data-cky-theme="light"] {
  color-scheme: light;
  --cky-bg-canvas: #e9eff6;
  --cky-bg-surface: var(--cky-color-paper);
  --cky-bg-panel: #ffffff;
  --cky-bg-raised: #eef3f9;
  --cky-text-primary: var(--cky-color-ink);
  --cky-text-secondary: #33455e;
  --cky-text-muted: var(--cky-color-slate);
  --cky-border-subtle: #d3dde9;
  --cky-border-strong: #aebed0;
  --cky-focus-ring: #155ab7;
  --cky-overlay: rgb(7 17 31 / 58%);
  --cky-shadow-1: 0 1px 2px rgb(7 17 31 / 10%);
  --cky-shadow-2: 0 12px 32px rgb(7 17 31 / 16%);
}

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