/*
 * Alca Labs landing — design tokens.
 *
 * Every value below is transcribed from @cillop/design-system
 * (~/Developer/Cillop/cillop-app/packages/design-system/src):
 *   tokens/primitives.ts  → --gray-*, --brand-*, --error-*, --success-*, --warning-*
 *   tokens/spacing.ts     → --sp-*
 *   tokens/radius.ts      → --r-*
 *   tokens/typography.ts  → --fs-*, --lh-*, --ls-* (Poppins, Untitled UI ramp)
 *   themes/light.ts       → semantic tokens on :root
 *   themes/dark.ts        → semantic tokens under prefers-color-scheme: dark
 *   themes/index.ts       → --shadow-glass
 *   unistyles.ts          → breakpoints (480 / 768 / 1024 / 1280), used in site.css
 *
 * cillop ships these as TypeScript for react-native-unistyles only; there is no
 * CSS/Tailwind export, so this file is a hand transcription. Keep names 1:1 with
 * the TS so a future codegen step can replace it.
 */

:root {
  color-scheme: light;

  /* ---- primitives (tokens/primitives.ts) ---- */
  --gray-25: #fdfdfd; --gray-50: #fafafa; --gray-100: #f5f5f5; --gray-200: #e9eaeb;
  --gray-300: #d5d7da; --gray-400: #a4a7ae; --gray-500: #717680; --gray-600: #535862;
  --gray-700: #414651; --gray-800: #252b37; --gray-900: #181d27; --gray-950: #0a0d12;

  --brand-25: #f5f6ff; --brand-50: #dfe3ff; --brand-100: #cad0ff; --brand-200: #b0b8ff;
  --brand-300: #96a0ff; --brand-400: #7b89ff; --brand-500: #6171ff; --brand-600: #515ed4;
  --brand-700: #414baa; --brand-800: #313980; --brand-900: #202655; --brand-950: #151843;

  --success-50: #ecfdf3; --success-200: #abefc6; --success-400: #47cd89; --success-500: #17b26a;
  --success-600: #079455; --success-700: #067647; --success-950: #053321;
  --warning-50: #fffaeb; --warning-200: #fedf89; --warning-400: #fdb022; --warning-500: #f79009;
  --warning-600: #dc6803; --warning-700: #b54708; --warning-950: #4e1d09;
  --error-50: #fef3f2; --error-200: #fecdca; --error-400: #f97066; --error-500: #f04438;
  --error-600: #d92d20; --error-700: #b42318; --error-950: #55160c;

  --alpha-white-10: #ffffff1a; --alpha-white-20: #ffffff33; --alpha-white-40: #ffffff66;
  --alpha-white-60: #ffffff99;

  /* ---- spacing (tokens/spacing.ts) ---- */
  --sp-xxs: 2px; --sp-xs: 4px; --sp-sm: 6px; --sp-md: 8px; --sp-lg: 12px; --sp-xl: 16px;
  --sp-2xl: 20px; --sp-3xl: 24px; --sp-4xl: 32px; --sp-5xl: 40px; --sp-6xl: 48px;
  --sp-7xl: 64px; --sp-8xl: 80px; --sp-9xl: 96px; --sp-10xl: 128px; --sp-11xl: 160px;

  /* ---- radius (tokens/radius.ts) ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-2xl: 16px;
  --r-3xl: 20px; --r-4xl: 24px; --r-full: 9999px;

  /* ---- typography (tokens/typography.ts) ---- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --fs-display-2xl: 72px; --lh-display-2xl: 90px; --ls-display-2xl: -1.44px;
  --fs-display-xl: 60px;  --lh-display-xl: 72px;  --ls-display-xl: -1.2px;
  --fs-display-lg: 48px;  --lh-display-lg: 60px;  --ls-display-lg: -0.96px;
  --fs-display-md: 36px;  --lh-display-md: 44px;  --ls-display-md: -0.72px;
  --fs-display-sm: 30px;  --lh-display-sm: 38px;  --ls-display-sm: 0;
  --fs-display-xs: 24px;  --lh-display-xs: 32px;  --ls-display-xs: 0;
  --fs-text-xl: 20px; --lh-text-xl: 30px;
  --fs-text-lg: 18px; --lh-text-lg: 28px;
  --fs-text-md: 16px; --lh-text-md: 24px;
  --fs-text-sm: 14px; --lh-text-sm: 20px;
  --fs-text-xs: 12px; --lh-text-xs: 16px;

  /* ---- shadows (themes/index.ts, components/Card.tsx elevated) ---- */
  --shadow-glass: 0px 3px 5px 0px rgba(0, 0, 0, 0.03);
  --shadow-card: 0px 4px 12px 0px rgba(24, 29, 39, 0.08);

  /* ---- semantic: light (themes/light.ts) ---- */
  --text-primary: #181d27;
  --text-secondary: #414651;
  --text-tertiary: #535862;
  --text-quaternary: #717680;
  --text-primary-on-brand: #ffffff;
  --text-secondary-on-brand: #b0b8ff;
  --text-white: #ffffff;
  --text-placeholder: #717680;
  --text-brand-primary: #202655;
  --text-brand-secondary: #414baa;
  --text-brand-tertiary: #515ed4;
  --text-error-primary: #d92d20;
  --text-success-primary: #079455;

  --bg-primary: #ffffff;
  --bg-primary-hover: #fafafa;
  --bg-secondary: #fafafa;
  --bg-secondary-hover: #f5f5f5;
  --bg-tertiary: #f5f5f5;
  --bg-quaternary: #e9eaeb;
  --bg-brand-primary: #dfe3ff;
  --bg-brand-secondary: #cad0ff;
  --bg-brand-solid: #6171ff;
  --bg-brand-solid-hover: #414baa;
  --bg-brand-section: #313980;
  --bg-brand-section-subtle: #414baa;
  --bg-canvas: #e9eaf7;
  --bg-canvas-wash: #a1aeffbf;
  --bg-glass: #ffffff66;
  --bg-glass-strong: #ffffff99;
  --bg-disabled: #f5f5f5;

  --border-primary: #d5d7da;
  --border-secondary: #e9eaeb;
  --border-tertiary: #f5f5f5;
  --border-brand: #6171ff;
  --border-glass: #ffffff99;

  --fg-primary: #181d27;
  --fg-secondary: #414651;
  --fg-quaternary: #a4a7ae;
  --fg-white: #ffffff;
  --fg-brand-primary: #6171ff;
  --fg-success-primary: #079455;

  /* Badge (components/Badge.tsx): utility[color][50] / [200] / [700] */
  --badge-brand-bg: var(--brand-50);   --badge-brand-border: var(--brand-200);   --badge-brand-text: var(--brand-700);
  --badge-gray-bg: var(--gray-50);     --badge-gray-border: var(--gray-200);     --badge-gray-text: var(--gray-700);
  --badge-success-bg: var(--success-50); --badge-success-border: var(--success-200); --badge-success-text: var(--success-700);
  --badge-warning-bg: var(--warning-50); --badge-warning-border: var(--warning-200); --badge-warning-text: var(--warning-700);
}

/* ---- semantic: dark (themes/dark.ts) ----
 * cillop's dark values are themselves [Inference] (its own file says so).
 * Applied when the viewer prefers dark and no explicit light theme is stamped,
 * and again when data-theme="dark" is stamped. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --text-primary: var(--gray-50);
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --text-quaternary: var(--gray-400);
    --text-primary-on-brand: var(--gray-50);
    --text-secondary-on-brand: var(--brand-200);
    --text-placeholder: var(--gray-500);
    --text-brand-primary: var(--gray-50);
    --text-brand-secondary: var(--brand-200);
    --text-brand-tertiary: var(--brand-300);
    --text-error-primary: var(--error-400);
    --text-success-primary: var(--success-400);

    --bg-primary: var(--gray-950);
    --bg-primary-hover: var(--gray-800);
    --bg-secondary: var(--gray-900);
    --bg-secondary-hover: var(--gray-800);
    --bg-tertiary: var(--gray-800);
    --bg-quaternary: var(--gray-700);
    --bg-brand-primary: var(--brand-900);
    --bg-brand-secondary: var(--brand-800);
    --bg-brand-solid: var(--brand-500);
    --bg-brand-solid-hover: var(--brand-600);
    --bg-brand-section: var(--gray-800);
    --bg-brand-section-subtle: var(--gray-900);
    --bg-canvas: var(--gray-950);
    --bg-canvas-wash: #202655bf;
    --bg-glass: var(--alpha-white-10);
    --bg-glass-strong: var(--alpha-white-20);
    --bg-disabled: var(--gray-800);

    --border-primary: var(--gray-700);
    --border-secondary: var(--gray-800);
    --border-tertiary: var(--gray-800);
    --border-brand: var(--brand-400);
    --border-glass: var(--alpha-white-20);

    --fg-primary: #ffffff;
    --fg-secondary: var(--gray-300);
    --fg-quaternary: var(--gray-400);
    --fg-brand-primary: var(--brand-500);
    --fg-success-primary: var(--success-400);

    --badge-brand-bg: var(--brand-950);   --badge-brand-border: var(--brand-800);   --badge-brand-text: var(--brand-200);
    --badge-gray-bg: var(--gray-900);     --badge-gray-border: var(--gray-700);     --badge-gray-text: var(--gray-300);
    --badge-success-bg: var(--success-950); --badge-success-border: #085d3a; --badge-success-text: var(--success-400);
    --badge-warning-bg: var(--warning-950); --badge-warning-border: #93370d; --badge-warning-text: var(--warning-400);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --text-primary: var(--gray-50);
  --text-secondary: var(--gray-300);
  --text-tertiary: var(--gray-400);
  --text-quaternary: var(--gray-400);
  --text-primary-on-brand: var(--gray-50);
  --text-secondary-on-brand: var(--brand-200);
  --text-placeholder: var(--gray-500);
  --text-brand-primary: var(--gray-50);
  --text-brand-secondary: var(--brand-200);
  --text-brand-tertiary: var(--brand-300);
  --text-error-primary: var(--error-400);
  --text-success-primary: var(--success-400);

  --bg-primary: var(--gray-950);
  --bg-primary-hover: var(--gray-800);
  --bg-secondary: var(--gray-900);
  --bg-secondary-hover: var(--gray-800);
  --bg-tertiary: var(--gray-800);
  --bg-quaternary: var(--gray-700);
  --bg-brand-primary: var(--brand-900);
  --bg-brand-secondary: var(--brand-800);
  --bg-brand-solid: var(--brand-500);
  --bg-brand-solid-hover: var(--brand-600);
  --bg-brand-section: var(--gray-800);
  --bg-brand-section-subtle: var(--gray-900);
  --bg-canvas: var(--gray-950);
  --bg-canvas-wash: #202655bf;
  --bg-glass: var(--alpha-white-10);
  --bg-glass-strong: var(--alpha-white-20);
  --bg-disabled: var(--gray-800);

  --border-primary: var(--gray-700);
  --border-secondary: var(--gray-800);
  --border-tertiary: var(--gray-800);
  --border-brand: var(--brand-400);
  --border-glass: var(--alpha-white-20);

  --fg-primary: #ffffff;
  --fg-secondary: var(--gray-300);
  --fg-quaternary: var(--gray-400);
  --fg-brand-primary: var(--brand-500);
  --fg-success-primary: var(--success-400);

  --badge-brand-bg: var(--brand-950);   --badge-brand-border: var(--brand-800);   --badge-brand-text: var(--brand-200);
  --badge-gray-bg: var(--gray-900);     --badge-gray-border: var(--gray-700);     --badge-gray-text: var(--gray-300);
  --badge-success-bg: var(--success-950); --badge-success-border: #085d3a; --badge-success-text: var(--success-400);
  --badge-warning-bg: var(--warning-950); --badge-warning-border: #93370d; --badge-warning-text: var(--warning-400);
}