/* Verbatim copy of Project Keystone/design-system/tokens/tokens.css (locked 2026-09-07), copied 2026-09-15 for the Critical Point Vision Site mockup. Do not edit here; the repo file is the source. */

/*
 * tokens.css - Critical Point Software design tokens
 * GENERATED FILE. Do not hand-edit; regenerate with:
 *   node design-system/tokens/build-tokens.mjs
 *
 * Structure (locked to Eric's pick, 2026-09-07: montserrat-karla on rust, both themes):
 *   :root                       foundations, the light theme, and the type set
 *   [data-theme="dark"], .dark  the dark theme (the showcase uses the attribute, the app uses the class)
 *
 * The five-option file with [data-palette] / [data-type] selectors is tokens/candidates/tokens.css.
 * Regenerate: node tokens/candidates/build-tokens.mjs && node tokens/lock-tokens.mjs
 */

:root {
  color-scheme: light;

  /* ink used for shadow compositing before a palette is chosen (hue-neutral);
     every [data-palette] block below overrides this with its own neutral-1000 */
  --ink-rgb: 10 15 14;

  /* spacing (8px base, Atlassian ladder) - rem per layout-spacing.md's REM
     rule (16px root); px equivalent trails as a comment on each line */
  --space-100: 0.5rem; /* 8px */
  --space-150: 0.75rem; /* 12px */
  --space-200: 1rem; /* 16px */
  --space-250: 1.25rem; /* 20px */
  --space-300: 1.5rem; /* 24px */
  --space-400: 2rem; /* 32px */
  --space-500: 2.5rem; /* 40px */
  --space-600: 3rem; /* 48px */
  --space-800: 4rem; /* 64px */
  --space-1000: 5rem; /* 80px */
  --space-025: 0.125rem; /* 2px */
  --space-050: 0.25rem; /* 4px */
  --space-075: 0.375rem; /* 6px */

  /* radius - rem, same REM rule. radius-full is the exception: 9999px is a
     "guaranteed fully round" idiom, not a real dimension, so it stays a
     flat px value that can never be under-rounded by a rem/root-size change */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.5rem; /* 8px */
  --radius-lg: 0.625rem; /* 10px */
  --radius-xl: 0.875rem; /* 14px */
  --radius-2xl: 1.125rem; /* 18px */
  --radius-full: 9999px;
  --radius: var(--radius-lg); /* 0.625rem / 10px, matches the app's --radius */

  /* elevation (ink alpha shadows; card resting state uses a border, not a shadow).
     Shadows stay in px - not in the REM rule's scope, and shadow softness is a
     pixel-level visual property rather than a typographic/layout dimension. */
  --shadow-1: 0 1px 2px rgb(var(--ink-rgb) / 0.06);
  --shadow-2: 0 4px 12px rgb(var(--ink-rgb) / 0.08);
  --shadow-3: 0 12px 32px rgb(var(--ink-rgb) / 0.12);

  /* motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inside: cubic-bezier(0.65, 0, 0.35, 1);
  /* recipes (Eric, 2026-09-07): select for a highlight moving between 2 to 4 options or through a carousel; hot for hot-path actions and core functions */
  --motion-select: var(--duration-base) var(--ease-inside);
  --motion-hot: var(--duration-fast) var(--ease-enter);

  /* focus ring geometry (color comes from the palette's --focus-ring) */
  --focus-ring-width: 0.1875rem; /* 3px */
  --focus-ring-offset: 0.125rem; /* 2px */

  /* type scale - rem, screen */
  --text-caption: 0.75rem; /* 12px */
  --text-ui: 0.875rem; /* 14px */
  --text-body: 1rem; /* 16px */
  --text-lead: 1.125rem; /* 18px */
  --text-h4: 1.25rem; /* 20px */
  --text-h3: 1.5rem; /* 24px */
  --text-h2: 2rem; /* 32px */
  --text-h1: 2.5rem; /* 40px */
  --text-display: 3.5rem; /* 56px */

  /* document scale, pt (print) - stays in points; this scale is for
     print/PDF output, where pt is the native unit, not the screen rem grid */
  --doc-caption: 9pt;
  --doc-small: 10pt;
  --doc-body: 11pt;
  --doc-h3: 14pt;
  --doc-h2: 18pt;
  --doc-h1: 24pt;
  --doc-cover: 32pt;

  /* line height (unitless - stays unitless regardless of the REM rule, since
     a unitless line-height scales correctly off the element's own font-size) */
  --leading-body: 1.5;
  --leading-heading: 1.25;
  --leading-display: 1.1;
  --doc-leading-body: 1.45;

  /* letter spacing rules - rem (see the REM conversion note in section 1);
     display faces get -0.01em (-0.16px at the 16px root) at 32px (h2) and
     up; condensed faces (Archivo Narrow / Oswald / Fjalla One) get +0.01em
     at all sizes instead - see the [data-type] blocks for --display-tracking */
  --tracking-display-large: -0.01rem; /* -0.16px, -0.01em nominal */
  --tracking-display-condensed: 0.01rem; /* 0.16px, 0.01em nominal */
  --tracking-normal: 0rem; /* 0px */

  /* touch target floor - rem */
  --touch-target-min: 2.75rem; /* 44px */

  /* grid - gutter/margin follow the REM rule; max-width stays px per the
     coordinator's explicit exception (a viewport-scale layout constant,
     not a typographic/spacing value) */
  --grid-columns: 12;
  --grid-max-width: 1200px;
  --grid-gutter-desktop: 1.5rem; /* 24px */
  --grid-margin-mobile: 1rem; /* 16px */

  /* icons (Lucide only, one set/size/stroke) - px per the coordinator's
     explicit exception; icon sizes are drawn on a fixed pixel grid to stay
     crisp, not scaled typographically */
  --icon-size-default: 20px;
  --icon-size-inline: 16px;
  --icon-stroke-width: 1.5px;
}

/* numeric tables/counters: font-variant-numeric: tabular-nums */
.tnum {
  font-variant-numeric: tabular-nums;
}

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

[data-theme="dark"] {
  color-scheme: dark;
}

/* ---------------------------------------------------------------- */
/* palette: forest  (light) */
/* ---------------------------------------------------------------- */

/* rust, light theme (picked 2026-09-07) */
:root {
  /* raw ramps - gate-adjusted per this theme; see contrast-report.md */
  --primary-100: #FFF2EE;
  --neutral-100: #FBFAF9;
  --primary-200: #FFE5DC;
  --neutral-200: #F5F3F2;
  --primary-300: #FFD3C4;
  --neutral-300: #EEEAE9;
  --primary-400: #FFB298;
  --neutral-400: #E6DBD8;
  --primary-500: #E89174;
  --neutral-500: #D5CBC8;
  --primary-600: #C67256;
  --neutral-600: #968D8A;
  --primary-700: #B7410E;
  --neutral-700: #7B726F;
  --primary-800: #A03400;
  --neutral-800: #6A615E;
  --primary-900: #872A00;
  --neutral-900: #534B48;
  --primary-1000: #651D00;
  --neutral-1000: #1B1412;
  --ink-rgb: 27 20 18;

  /* semantic layer */
  --background: #FBFAF9;
  --foreground: #1B1412;
  --card: #FBFAF9;
  --card-foreground: #1B1412;
  --popover: #FBFAF9;
  --popover-foreground: #1B1412;
  --primary: #B7410E;
  --primary-foreground: #FFFFFF;
  --secondary: #F5F3F2;
  --secondary-foreground: #1B1412;
  --muted: #F5F3F2;
  --muted-foreground: #534B48;
  --accent: #F5F3F2;
  --accent-foreground: #1B1412;
  --destructive: #A32014;
  --destructive-foreground: #FFFFFF;
  --border: #E6DBD8;
  --input: #E6DBD8;
  --ring: #C67256;
  --chart-1: #B7410E;
  --chart-2: #004A75;
  --chart-3: #E66C41;
  --chart-4: #862A00;
  --chart-5: #571800;
  --sidebar: #F5F3F2;
  --sidebar-foreground: #1B1412;
  --sidebar-primary: #B7410E;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEEAE9;
  --sidebar-accent-foreground: #1B1412;
  --sidebar-border: #E6DBD8;
  --sidebar-ring: #C67256;
  --success: #2E6F40;
  --success-foreground: #FFFFFF;
  --warning: #B45309;
  --warning-foreground: #FFFFFF;
  --info: #1F5F8B;
  --info-foreground: #FFFFFF;
  --paper: #FBFAF9;
  --ink: #1B1412;

  /* component layer */
  --button-primary-bg: var(--primary);
  --button-primary-hover: #A03400;
  --button-primary-active: #872A00;
  --button-primary-text: var(--primary-foreground);
  --input-border: #968D8A;
  --input-focus: #C67256;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--ring);
  --link: #872A00;
  --table-stripe: #F5F3F2;
}

/* rust, dark theme (picked 2026-09-07, kept alongside light) */
[data-theme="dark"], .dark {
  /* raw ramps - seeded from the light block, further adjusted only where a
     dark-specific check needed a different lightness; see contrast-report.md */
  --primary-100: #FFF2EE;
  --neutral-100: #FBFAF9;
  --primary-200: #FFE5DC;
  --neutral-200: #F5F3F2;
  --primary-300: #FFD3C4;
  --neutral-300: #EEEAE9;
  --primary-400: #FFB298;
  --neutral-400: #E6DBD8;
  --primary-500: #E89174;
  --neutral-500: #D5CBC8;
  --primary-600: #B26045;
  --neutral-600: #968D8A;
  --primary-700: #B7410E;
  --neutral-700: #726966;
  --primary-800: #A03400;
  --neutral-800: #6A615E;
  --primary-900: #872A00;
  --neutral-900: #534B48;
  --primary-1000: #651D00;
  --neutral-1000: #1B1412;
  --ink-rgb: 27 20 18;

  /* semantic layer */
  --background: #140E0C;
  --foreground: #F2EDEB;
  --card: #1D1714;
  --card-foreground: #F2EDEB;
  --popover: #1D1714;
  --popover-foreground: #F2EDEB;
  --primary: #B26045;
  --primary-foreground: #FFFFFF;
  --secondary: #27201D;
  --secondary-foreground: #F2EDEB;
  --muted: #27201D;
  --muted-foreground: #A49C9A;
  --accent: #27201D;
  --accent-foreground: #F2EDEB;
  --destructive: #A32014;
  --destructive-foreground: #FFFFFF;
  --border: #675E5B;
  --input: #675E5B;
  --ring: #B26045;
  --chart-1: #B26045;
  --chart-2: #004A75;
  --chart-3: #FFB298;
  --chart-4: #FB7F54;
  --chart-5: #DF663A;
  --sidebar: #1D1714;
  --sidebar-foreground: #F2EDEB;
  --sidebar-primary: #B26045;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #27201D;
  --sidebar-accent-foreground: #F2EDEB;
  --sidebar-border: #675E5B;
  --sidebar-ring: #B26045;
  --success: #2E6F40;
  --success-foreground: #FFFFFF;
  --warning: #B45309;
  --warning-foreground: #FFFFFF;
  --info: #1F5F8B;
  --info-foreground: #FFFFFF;
  --paper: #FBFAF9;
  --ink: #1B1412;

  /* component layer */
  --button-primary-bg: var(--primary);
  --button-primary-hover: #B26045;
  --button-primary-active: #B26045;
  --button-primary-text: var(--primary-foreground);
  --input-border: #675E5B;
  --input-focus: #B26045;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--ring);
  --link: #FFD3C4;
  --table-stripe: #27201D;
}

/* type set montserrat-karla (picked 2026-09-07) */
:root {
  --font-display: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: Karla, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01rem; /* -0.16px, -0.01em nominal */
  --body-weight: 400;
  --body-bold-weight: 700;
  --body-bold-tracking: 0rem; /* 0px, 0em nominal */
}