/* OGS — Creative Direction v4 "Precision & Momentum / Editorial Tech" (Nov 2026)
 * SELF-CONTAINED: defines every token the v4 homepage uses. v4 pages load this file
 * instead of ogs-tokens.css, so changes to the shared file cannot alter v4.
 * :root:root also wins if a shared component still injects ogs-tokens.css. */
:root:root {
  --ogs-white: #FFFFFF;
  --ogs-gray-050: #F5F6F7;       /* Cool Surface */
  --ogs-gray-200: #E1E5E8;       /* Border */
  --ogs-gray-300: #CDD3D8;       /* strong hairline (derived) */
  --ogs-gray-400: #A3A9B1;       /* muted text on Deep Graphite, 6.0:1 on #262A2F (derived) */
  --ogs-gray-600: #5B626B;       /* Muted Slate, 6.3:1 on white / 5.8:1 on #F5F6F7 */
  --ogs-black-950: #111111;      /* OGS Ink */
  --ogs-graphite-900: #1D2024;   /* Deep Graphite */
  --ogs-graphite-800: #262A2F;   /* cards on graphite (derived) */
  --ogs-graphite-700: #353A40;   /* hairlines on graphite, hover on ink (derived) */
  --ogs-orange-500: #E64B32;     /* OGS Orange: strokes, frames, markers. Text on it: #111111 */
  --ogs-orange-700: #B93A24;     /* Dark Orange: accent text on light, 5.9:1 */

  /* Names used by shared component markup, resolved to v4 values */
  --ogs-ink-950: var(--ogs-black-950);
  --ogs-ivory-050: var(--ogs-white);
  --ogs-ivory-100: var(--ogs-gray-050);
  --ogs-signal-500: var(--ogs-orange-500);
  --ogs-signal-650: var(--ogs-orange-700);
  --ogs-stone-200: var(--ogs-gray-200);
  --ogs-stone-300: var(--ogs-gray-300);
  --ogs-graphite-600: var(--ogs-gray-600);
  --ogs-graphite-400: var(--ogs-gray-400);
  --ogs-ink-800: var(--ogs-graphite-800);
  --ogs-ink-700: var(--ogs-graphite-700);
  --ogs-success-700: #2E6B45;
  --ogs-warning-700: #8A5A00;
  --ogs-error-700: #A8242E;

  --ogs-surface-canvas: var(--ogs-white);
  --ogs-surface-raised: var(--ogs-white);
  --ogs-surface-subtle: var(--ogs-gray-050);
  --ogs-surface-graphite: var(--ogs-graphite-900);
  --ogs-surface-inverse: var(--ogs-graphite-900);
  --ogs-text-primary: var(--ogs-black-950);
  --ogs-text-secondary: var(--ogs-gray-600);
  --ogs-text-inverse: var(--ogs-white);
  --ogs-text-inverse-muted: var(--ogs-gray-400);
  --ogs-text-accent: var(--ogs-orange-700);
  --ogs-border-default: var(--ogs-gray-200);
  --ogs-border-strong: var(--ogs-gray-600);
  --ogs-border-inverse: var(--ogs-graphite-700);
  --ogs-action-primary-bg: var(--ogs-black-950);
  --ogs-action-primary-text: var(--ogs-white);
  --ogs-action-secondary-border: var(--ogs-black-950);
  --ogs-signal: var(--ogs-orange-500);
  --ogs-focus-ring: var(--ogs-orange-700);

  /* Growth Frame for UI (S = 12px) */
  --ogs-gf-lead-h: 40px;
  --ogs-gf-lead-v: 52px;
  --ogs-gf-anchor-h: 20px;
  --ogs-gf-anchor-v: 26px;
  --ogs-gf-stroke: 2px;

  /* Spacing — 4px micro, 8px base */
  --ogs-space-1: 4px;
  --ogs-space-2: 8px;
  --ogs-space-3: 12px;
  --ogs-space-4: 16px;
  --ogs-space-6: 24px;
  --ogs-space-8: 32px;
  --ogs-space-12: 48px;
  --ogs-space-16: 64px;
  --ogs-space-24: 96px;
  --ogs-space-32: 128px;

  /* Radius & border */
  --ogs-radius-none: 0px;
  --ogs-radius-control: 4px;
  --ogs-radius-card: 4px;
  --ogs-border-width-default: 1px;
  --ogs-border-width-strong: 2px;
  --ogs-border-width-focus: 2px;

  /* Typography */
  --ogs-font-sans: 'Inter', 'InterVariable', 'Helvetica Neue', Arial, sans-serif;
  --ogs-font-display: 'Inter Display', 'Inter', 'InterVariable', 'Helvetica Neue', Arial, sans-serif;
  --ogs-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --ogs-weight-regular: 400;
  --ogs-weight-medium: 500;
  --ogs-weight-semibold: 600;
  --ogs-weight-bold: 700;
  --ogs-type-display-xl-size: 4.5rem;  /* 72px */
  --ogs-type-display-xl-line: 1.056;
  --ogs-type-display-xl-weight: 600;
  --ogs-type-display-xl-tracking: -0.025em;
  --ogs-type-display-l-size: 3.5rem;  /* 56px */
  --ogs-type-display-l-line: 1.071;
  --ogs-type-display-l-weight: 600;
  --ogs-type-display-l-tracking: -0.022em;
  --ogs-type-h1-size: 3rem;  /* 48px */
  --ogs-type-h1-line: 1.125;
  --ogs-type-h1-weight: 600;
  --ogs-type-h1-tracking: -0.02em;
  --ogs-type-h2-size: 2.25rem;  /* 36px */
  --ogs-type-h2-line: 1.167;
  --ogs-type-h2-weight: 600;
  --ogs-type-h2-tracking: -0.015em;
  --ogs-type-h3-size: 1.75rem;  /* 28px */
  --ogs-type-h3-line: 1.214;
  --ogs-type-h3-weight: 600;
  --ogs-type-h3-tracking: -0.01em;
  --ogs-type-h4-size: 1.375rem;  /* 22px */
  --ogs-type-h4-line: 1.273;
  --ogs-type-h4-weight: 600;
  --ogs-type-h4-tracking: -0.005em;
  --ogs-type-body-l-size: 1.25rem;  /* 20px */
  --ogs-type-body-l-line: 1.500;
  --ogs-type-body-l-weight: 400;
  --ogs-type-body-l-tracking: -0.005em;
  --ogs-type-body-size: 1rem;  /* 16px */
  --ogs-type-body-line: 1.625;
  --ogs-type-body-weight: 400;
  --ogs-type-body-tracking: 0em;
  --ogs-type-body-s-size: 0.875rem;  /* 14px */
  --ogs-type-body-s-line: 1.571;
  --ogs-type-body-s-weight: 400;
  --ogs-type-body-s-tracking: 0em;
  --ogs-type-caption-size: 0.8125rem;  /* 13px */
  --ogs-type-caption-line: 1.385;
  --ogs-type-caption-weight: 400;
  --ogs-type-caption-tracking: 0em;
  --ogs-type-metadata-size: 0.75rem;  /* 12px */
  --ogs-type-metadata-line: 1.333;
  --ogs-type-metadata-weight: 500;
  --ogs-type-metadata-tracking: 0.01em;
  --ogs-type-label-size: 0.75rem;  /* 12px */
  --ogs-type-label-line: 1.333;
  --ogs-type-label-weight: 600;
  --ogs-type-label-tracking: 0.1em;
  --ogs-type-button-size: 0.9375rem;  /* 15px */
  --ogs-type-button-line: 1.333;
  --ogs-type-button-weight: 600;
  --ogs-type-button-tracking: 0em;
  --ogs-type-nav-size: 0.9375rem;  /* 15px */
  --ogs-type-nav-line: 1.333;
  --ogs-type-nav-weight: 500;
  --ogs-type-nav-tracking: 0em;
  --ogs-type-ui-size: 0.875rem;  /* 14px */
  --ogs-type-ui-line: 1.429;
  --ogs-type-ui-weight: 500;
  --ogs-type-ui-tracking: 0em;
  --ogs-type-table-size: 0.875rem;  /* 14px */
  --ogs-type-table-line: 1.429;
  --ogs-type-table-weight: 400;
  --ogs-type-table-tracking: 0em;
  --ogs-type-numeral-xl-size: 6rem;  /* 96px */
  --ogs-type-numeral-xl-line: 1.000;
  --ogs-type-numeral-xl-weight: 600;
  --ogs-type-numeral-xl-tracking: -0.03em;

  /* Motion */
  --ogs-motion-duration-fast: 180ms;
  --ogs-motion-duration-standard: 240ms;
  --ogs-motion-duration-slow: 320ms;
  --ogs-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ogs-motion-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ogs-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ogs-motion-distance-short: 8px;
  --ogs-motion-distance-medium: 16px;

  /* Layout */
  --ogs-grid-columns: 12;
  --ogs-grid-gutter: 24px;
  --ogs-grid-margin: 20px;
  --ogs-content-max: 1240px;
  --ogs-canvas-max: 1440px;
  --ogs-measure: 68ch;

  /* Growth Frame */
  --ogs-frame-unit: 16px;  /* local base unit S — set per component */
  --ogs-frame-stroke: calc(var(--ogs-frame-unit) / 8);
  --ogs-frame-lead-h: calc(var(--ogs-frame-unit) * 3);
  --ogs-frame-lead-v: calc(var(--ogs-frame-unit) * 4);
  --ogs-frame-anchor-h: calc(var(--ogs-frame-unit) * 1.5);
  --ogs-frame-anchor-v: calc(var(--ogs-frame-unit) * 2);
}

@media (min-width: 768px) { :root:root { --ogs-grid-margin: 24px; } }
@media (min-width: 1200px) { :root:root { --ogs-grid-margin: 100px; } }

/* Responsive display sizes (desktop values above) */
@media (max-width: 1199px) { :root:root {
  --ogs-type-display-xl-size: 3.5rem;
  --ogs-type-display-l-size: 2.75rem;
  --ogs-type-h1-size: 2.5rem;
  --ogs-type-h2-size: 1.875rem;
  --ogs-type-h3-size: 1.5rem;
  --ogs-type-h4-size: 1.25rem;
  --ogs-type-body-l-size: 1.125rem;
} }
@media (max-width: 767px) { :root:root {
  --ogs-type-display-xl-size: 2.5rem;
  --ogs-type-display-l-size: 2.125rem;
  --ogs-type-h1-size: 2rem;
  --ogs-type-h2-size: 1.625rem;
  --ogs-type-h3-size: 1.375rem;
  --ogs-type-h4-size: 1.1875rem;
  --ogs-type-body-l-size: 1.125rem;
} }

@media (prefers-reduced-motion: reduce) { :root:root {
  --ogs-motion-duration-fast: 0ms;
  --ogs-motion-duration-standard: 0ms;
  --ogs-motion-duration-slow: 0ms;
  --ogs-motion-distance-short: 0px;
  --ogs-motion-distance-medium: 0px;
} }
.ogs-tabular { font-variant-numeric: tabular-nums lining-nums; }