/*
 * AISolver CMS — design tokens (SPEC §2)
 * Ported from the original "recap" theme. Light is the default (:root / [data-scheme="light"]);
 * dark overrides under [data-scheme="dark"]; "auto" defers to the OS via prefers-color-scheme.
 * All UI colors flow through these vars so flipping data-scheme re-themes the whole page.
 */

:root,
[data-scheme='light'] {
  /* contrast scale (light) */
  --cs-color-contrast-50: #e9e9e9;
  --cs-color-contrast-100: #e9e9e9;
  --cs-color-contrast-200: #d2d2d2;
  --cs-color-contrast-300: #bbbbbb;
  --cs-color-contrast-400: #a4a4a4;
  --cs-color-contrast-500: #808080;
  --cs-color-contrast-600: #6c6c6c;
  --cs-color-contrast-700: #494949;
  --cs-color-contrast-800: #343434;
  --cs-color-contrast-900: #232323;

  /* semantic roles (light) */
  --cs-site-background: #fafafa;
  --cs-layout-background: #ffffff;
  --cs-color-primary: #161616;
  --cs-color-primary-contrast: #ffffff;
  --cs-color-secondary: #737373;
  --cs-color-accent: #206bea;
  --cs-color-border: #dbdbdb;
  --cs-color-button: #206bea;
  --cs-color-button-hover: #3b7ded;
  --cs-color-button-contrast: #ffffff;
  --cs-color-secondary-button: #e1e7f0;
  --cs-color-secondary-button-hover: #e3e9f1;
  --cs-color-secondary-button-contrast: #161616;
  --cs-header-background: #ffffff;
  --cs-footer-background: #fafafa;

  /* CTA pill gradient border (blue -> coral) */
  --cs-cta-gradient: linear-gradient(93.08deg, #8cb7ff 0%, #ff8486 100%);

  /* typography */
  --cs-font-base: 'Inter', system-ui, -apple-system, sans-serif;
  --cs-font-display: 'Bricolage Grotesque', Georgia, serif;
  --cs-font-base-size: 1rem;
  --cs-font-base-line-height: 1.6;
  --cs-font-content-size: 1.125rem;
  --cs-heading-line-height: 1.2;
  --cs-heading-letter-spacing: -0.06em;
  --cs-h1-size: 3.375rem;
  --cs-h2-size: 2.625rem;
  --cs-h3-size: 2.125rem;
  --cs-h4-size: 1.625rem;
  --cs-h5-size: 1.25rem;
  --cs-h6-size: 1rem;

  /* layout */
  --cs-container-mobile: 576px;
  --cs-container-tablet: 992px;
  --cs-container-desktop: 1248px;
  --cs-container-gutter: 24px;
  --cs-content-width: 776px;
  --cs-sidebar-width: 360px;
  --cs-column-gap: 32px;
  --cs-header-height: 64px;

  /* radii */
  --cs-radius-header: 14px;
  --cs-radius-card: 10px;
  --cs-radius-thumbnail: 10px;
  --cs-radius-button: 8px;
  --cs-radius-input: 8px;
  --cs-radius-pill: 32px;
  --cs-radius-avatar: 6px;

  color-scheme: light;
}

[data-scheme='dark'] {
  /* contrast scale (dark) */
  --cs-color-contrast-50: #000000;
  --cs-color-contrast-100: #333333;
  --cs-color-contrast-200: #494949;
  --cs-color-contrast-300: #606060;
  --cs-color-contrast-400: #777777;
  --cs-color-contrast-500: #8e8e8e;
  --cs-color-contrast-600: #a4a4a4;
  --cs-color-contrast-700: #bbbbbb;
  --cs-color-contrast-800: #d2d2d2;
  --cs-color-contrast-900: #e9e9e9;

  /* semantic roles (dark) */
  --cs-site-background: #161616;
  --cs-layout-background: #232323;
  --cs-color-primary: #ffffff;
  --cs-color-primary-contrast: #000000;
  --cs-color-secondary: #cdcdcd;
  --cs-color-accent: #ffffff;
  --cs-color-border: #343434;
  --cs-color-button: #3e3e3e;
  --cs-color-button-hover: #343434;
  --cs-color-button-contrast: #ffffff;
  --cs-color-secondary-button: #3e3e3e;
  --cs-color-secondary-button-hover: #343434;
  --cs-color-secondary-button-contrast: #ffffff;
  --cs-header-background: #232323;
  --cs-footer-background: #161616;

  color-scheme: dark;
}

/* "auto" follows the OS. Default page state is data-scheme="auto". */
@media (prefers-color-scheme: dark) {
  :root[data-scheme='auto'] {
    --cs-color-contrast-50: #000000;
    --cs-color-contrast-100: #333333;
    --cs-color-contrast-200: #494949;
    --cs-color-contrast-300: #606060;
    --cs-color-contrast-400: #777777;
    --cs-color-contrast-500: #8e8e8e;
    --cs-color-contrast-600: #a4a4a4;
    --cs-color-contrast-700: #bbbbbb;
    --cs-color-contrast-800: #d2d2d2;
    --cs-color-contrast-900: #e9e9e9;
    --cs-site-background: #161616;
    --cs-layout-background: #232323;
    --cs-color-primary: #ffffff;
    --cs-color-primary-contrast: #000000;
    --cs-color-secondary: #cdcdcd;
    --cs-color-accent: #ffffff;
    --cs-color-border: #343434;
    --cs-color-button: #3e3e3e;
    --cs-color-button-hover: #343434;
    --cs-color-secondary-button: #3e3e3e;
    --cs-color-secondary-button-hover: #343434;
    --cs-color-secondary-button-contrast: #ffffff;
    --cs-header-background: #232323;
    --cs-footer-background: #161616;
    color-scheme: dark;
  }
}