/*
  ROWVIN design tokens.
  Source of truth: ROWVIN_VISUAL_DIRECTION.png's own "Color Palette" /
  "Typography" / "UI Elements" / "Icon Style" strip (bottom of the
  reference), synthesized across all three explored directions (Clarity /
  Momentum / Insight) into one system, per the founder's own instruction
  to synthesize rather than pick one option literally.

  No preprocessor, no build-time variable resolution -- plain CSS custom
  properties, consistent with this project's zero-build-tool discipline
  (matching Company OS's own zero-third-party-dependency convention).
*/

:root {
  /* --- Color: exact values from the reference's own swatches --- */
  --rowvin-black: #0D0D0D;
  --carbon: #111111;
  --graphite: #202124;
  --off-white: #F7F7F5;
  --pure-white: #FFFFFF;
  --electric-vermilion: #FF3B1F;

  /* Semantic aliases -- pages/components reference these, never the raw
     palette names above, so a future retheme touches this file only. */
  --color-bg-primary: var(--rowvin-black);
  --color-bg-elevated: var(--carbon);
  --color-bg-surface: var(--graphite);
  --color-bg-inverse: var(--pure-white);
  --color-bg-inverse-soft: var(--off-white);

  --color-text-primary: var(--off-white);
  --color-text-secondary: rgba(247, 247, 245, 0.68);
  /* 0.58, not the more "subtle"-looking 0.44 this was originally set to
     -- 0.44 measures 4.15:1 against --color-bg-primary, below WCAG AA's
     4.5:1 minimum for normal-size text (this token is used for
     .text-small, 14px, well under the "large text" 3:1 exception).
     0.58 measures 6.46:1. Verified with a real luminance/contrast
     calculation, not assumed -- see reports/ACCESSIBILITY_AUDIT.md. */
  --color-text-tertiary: rgba(247, 247, 245, 0.58);
  --color-text-on-light: var(--rowvin-black);
  --color-text-on-light-secondary: rgba(13, 13, 13, 0.64);

  --color-accent: var(--electric-vermilion);
  --color-accent-hover: #E5341B;
  --color-accent-text-on: var(--pure-white);

  --color-border-subtle: rgba(247, 247, 245, 0.12);
  --color-border-subtle-on-light: rgba(13, 13, 13, 0.12);
  --color-focus-ring: var(--electric-vermilion);

  /* --- Typography ---
     Reference names Inter / Manrope / Geist for Display; a system-font
     stack is used as the deployed fallback chain (zero web-font network
     dependency, and the reference's own choices are all in the same
     geometric-grotesk family, so the fallback stack is a faithful
     approximation) -- Inter itself is included first for hosts that do
     have it locally. */
  --font-family-base: Inter, "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-weight-display: 800;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --font-size-display-xl: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
  --font-size-display-lg: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --font-size-heading-lg: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --font-size-heading-md: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
  --font-size-heading-sm: 1.125rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-micro: 0.75rem;

  --line-height-tight: 1.1;
  --line-height-heading: 1.25;
  --line-height-body: 1.6;

  --letter-spacing-label: 0.06em;

  /* --- Spacing scale (8px base unit) --- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* --- Layout --- */
  --content-max-width: 1200px;
  --content-padding-inline: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* --- Motion ---
     Disciplined, not decorative -- durations short, easing deliberate.
     Every animation in this system must be wrapped by the
     prefers-reduced-motion guard in base.css. */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* --- Elevation (restrained -- this system does not use drop shadows
     as a primary device; used sparingly for focus/overlay states only) --- */
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.48);

  /* --- Icon stroke (matches reference: "Clean. Geometric. Consistent
     stroke, 2px. Rounded caps & joins.") --- */
  --icon-stroke-width: 2;
}