/*
 * OpenClaw design tokens — extracted from https://openclaw.ai/ on 2026-08-15
 * via headless-browser computed-style capture of both themes (data-theme attr).
 *
 * Naming is kept verbatim (--oc-*) so component recipes in components.md and
 * the eventual mission-control CSS are drop-in. Theme switching contract:
 * set data-theme="dark" | "light" on <html>. The site's own default is dark.
 *
 * Aliases without the oc- prefix exist upstream (--text-primary, --bg-surface,
 * --coral-bright, ...) but always mirror an --oc-* token; only the canonical
 * set is reproduced here.
 */

:root {
  /* Typography — Switzer + Sentient are Fontshare faces (free, self-hostable) */
  --oc-font-display: "Switzer", system-ui, sans-serif;
  --oc-font-body: "Switzer", system-ui, sans-serif;
  --oc-font-serif: "Sentient", Georgia, serif; /* italic accent words only */
  --oc-font-mono: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;

  /* Type scale (body rem base 16px) */
  --oc-font-size-xs: .75rem;      /* 12px  — chips, table meta */
  --oc-font-size-sm: .8125rem;    /* 13px  — buttons, mono labels */
  --oc-font-size-base: .875rem;   /* 14px  — UI default */
  --oc-font-size-md: .9375rem;    /* 15px  — body copy */
  --oc-font-size-lg: 1.0625rem;   /* 17px  — lead paragraphs */
  --oc-font-size-xl: 1.25rem;     /* 20px  — card titles */
  --oc-font-size-2xl: 1.5rem;     /* 24px  — section headings */
  --oc-font-size-3xl: 2rem;       /* 32px  — page headings (hero scales beyond via clamp) */

  /* Spacing scale */
  --oc-space-1: .25rem;   /*  4px */
  --oc-space-2: .5rem;    /*  8px */
  --oc-space-3: .75rem;   /* 12px */
  --oc-space-4: 1rem;     /* 16px */
  --oc-space-5: 1.5rem;   /* 24px */
  --oc-space-6: 2rem;     /* 32px */
  --oc-space-7: 3rem;     /* 48px */
  --oc-space-8: 4rem;     /* 64px — section vertical rhythm */

  /* Radii */
  --oc-radius-sm: .25rem;
  --oc-radius-inset: .25rem;
  --oc-radius-control: .5rem;   /* buttons, inputs */
  --oc-radius-md: .5rem;
  --oc-radius-surface: .5rem;   /* cards */
  --oc-radius-lg: .75rem;
  --oc-radius-xl: 1rem;
  --oc-radius-full: 999px;
  --oc-radius-round: 999px;

  /* Elevation (identical across themes upstream) */
  --oc-shadow-sm: 0 1px 2px #0000001f;
  --oc-shadow-md: 0 8px 24px -6px #00000047;
  --oc-shadow-lg: 0 24px 48px -12px #0000006b;

  /* Motion */
  --oc-duration-fast: .16s;
  --oc-duration-ui: .2s;
  --oc-ease-out: cubic-bezier(.23, 1, .32, 1);

  /* Layout */
  --oc-content-max: 75rem;     /* 1200px framed column */
  --oc-content-narrow: 48rem;  /* 768px prose column */
  --oc-control-min-height: 2.75rem; /* 44px buttons/inputs */

  /* Fixed palette (theme-independent ramps upstream) */
  --oc-palette-ink-50: #ededed;
  --oc-palette-ink-300: #bcbcc4;
  --oc-palette-ink-500: #9a9aa2;
  --oc-palette-ink-850: #202024;
  --oc-palette-ink-900: #19191c;
  --oc-palette-ink-950: #101012;
  --oc-palette-paper-50: #fff;
  --oc-palette-paper-100: #f6f5f3;
  --oc-palette-paper-200: #eceae6;
  --oc-palette-paper-600: #63636c;
  --oc-palette-paper-700: #46464e;
  --oc-palette-paper-950: #17171a;
  --oc-palette-coral-dark-bright: #f5654a;
  --oc-palette-coral-dark-mid: #e05540;
  --oc-palette-coral-dark-deep: #b23a28;
  --oc-palette-coral-light-bright: #d84a31;
  --oc-palette-coral-light-mid: #c24028;
  --oc-palette-coral-light-deep: #9c3222;
  --oc-palette-sea-dark-bright: #4fc8ae;
  --oc-palette-sea-dark-mid: #2fa48d;
  --oc-palette-sea-light-bright: #14806e;
  --oc-palette-sea-light-mid: #0f6355;
}

/* ============================== DARK (site default) ===================== */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Page + surfaces (neutral oklch grayscale, zero chroma) */
  --oc-bg-page: oklch(13.5% 0 0);
  --oc-bg-surface: oklch(17.8% 0 0);
  --oc-bg-elevated: oklch(20.5% 0 0);
  --oc-bg-recessed: color-mix(in oklch, oklch(13.5% 0 0) 86%, oklch(0% 0 0));
  --oc-bg-contrast: oklch(98.5% 0 0);
  --oc-surface-card: oklch(17.8% 0 0/.82);
  --oc-surface-card-strong: oklch(20.5% 0 0/.96);
  --oc-surface-interactive: oklch(17.8% 0 0);
  --oc-surface-interactive-hover: oklch(23.9% 0 0);
  --oc-surface-overlay: oklch(0% 0 0/.3);
  --oc-surface-accent-soft: #f5654a24;
  --oc-surface-secondary-soft: #4fc8ae24;

  /* Text */
  --oc-text-primary: oklch(98.5% 0 0);
  --oc-text-secondary: oklch(87% 0 0);
  --oc-text-muted: oklch(71.6% 0 0);
  --oc-text-inactive: color-mix(in oklch, oklch(71.6% 0 0) 62%, transparent);
  --oc-text-inverse: oklch(13.5% 0 0);
  --oc-text-on-accent: oklch(13.5% 0 0);
  --oc-text-link: #f5654a;

  /* Accents — coral (primary) + seafoam (secondary) */
  --oc-accent-primary: #f5654a;
  --oc-accent-primary-hover: #e05540;
  --oc-accent-primary-deep: #b23a28;
  --oc-accent-secondary: #4fc8ae;
  --oc-accent-secondary-deep: #2fa48d;

  /* Borders + focus */
  --oc-border-subtle: oklch(26.9% 0 0);
  --oc-border-strong: color-mix(in oklch, oklch(98.5% 0 0) 32%, transparent);
  --oc-border-accent: #f5654a66;
  --oc-focus-ring: oklch(93.5% 0 0/.72);

  /* Controls + inputs */
  --oc-control-bg: oklch(17.8% 0 0);
  --oc-control-bg-hover: oklch(23.9% 0 0);
  --oc-input-bg: oklch(20.5% 0 0);
  --oc-input-focus-border: color-mix(in srgb, oklch(98.5% 0 0) 62%, transparent);
  --oc-input-focus-ring: color-mix(in srgb, oklch(98.5% 0 0) 22%, transparent);

  /* Misc */
  --oc-selection-bg: #f5654a47;
  --oc-chart-line: oklch(100% 0 0/.1);
}

/* ============================== LIGHT ==================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --oc-bg-page: oklch(98.5% 0 0);
  --oc-bg-surface: oklch(97% 0 0);
  --oc-bg-elevated: oklch(100% 0 0);
  --oc-bg-recessed: color-mix(in oklch, oklch(98.5% 0 0) 94%, oklch(20.5% 0 0));
  --oc-bg-contrast: oklch(20.5% 0 0);
  --oc-surface-card: oklch(100% 0 0);
  --oc-surface-card-strong: oklch(100% 0 0);
  --oc-surface-interactive: oklch(97% 0 0);
  --oc-surface-interactive-hover: oklch(92.2% 0 0);
  --oc-surface-overlay: oklch(20.5% 0 0/.08);
  --oc-surface-accent-soft: #d84a311f;
  --oc-surface-secondary-soft: #14806e21;

  --oc-text-primary: oklch(20.5% 0 0);
  --oc-text-secondary: oklch(26.9% 0 0);
  --oc-text-muted: oklch(55.5% 0 0);
  --oc-text-inactive: color-mix(in oklch, oklch(55.5% 0 0) 62%, transparent);
  --oc-text-inverse: oklch(98.5% 0 0);
  --oc-text-on-accent: oklch(100% 0 0);
  --oc-text-link: #d84a31;

  --oc-accent-primary: #d84a31;
  --oc-accent-primary-hover: #c24028;
  --oc-accent-primary-deep: #9c3222;
  --oc-accent-secondary: #14806e;
  --oc-accent-secondary-deep: #0f6355;

  --oc-border-subtle: oklch(92.2% 0 0);
  --oc-border-strong: color-mix(in oklch, oklch(20.5% 0 0) 28%, transparent);
  --oc-border-accent: #d84a316b;
  --oc-focus-ring: oklch(15% 0 0/.7);

  --oc-control-bg: oklch(100% 0 0);
  --oc-control-bg-hover: oklch(92.2% 0 0);
  --oc-input-bg: oklch(100% 0 0);
  --oc-input-focus-border: color-mix(in srgb, oklch(20.5% 0 0) 62%, transparent);
  --oc-input-focus-ring: color-mix(in srgb, oklch(20.5% 0 0) 22%, transparent);

  --oc-selection-bg: #d84a3133;
  --oc-chart-line: oklch(20.5% 0 0/.12);
}