/* tokens.css — single source of truth for the VICONEX design system (Direction A2, locked).
   Components/sections must use these vars only — no raw hex/px. See .loop/DESIGN.md. */

:root {
  /* ============ Colour ============ */
  /* Surfaces / ink (light-committed, warm neutral). */
  --paper: #FFFFFF;
  --paper-edge: #F4F4F2;
  --ink: #181B1C;
  --ink-2: #53585A;
  --ink-3: #868B8D;

  /* Green. Brand green is for the logo + large solid fills only (too light for AA text
     on white); UI text/accents use the darker variants. See DESIGN.md §3. */
  --brand-green: #70A046;      /* logo / large fills only */
  --green: #5C8A38;            /* accents, small fills */
  --green-deep: #3F5F29;       /* text, links, hover */
  --green-fill: #4C7130;
  --green-line: rgba(92, 138, 56, .4);

  /* Lines are the primary separators — we use borders, not shadows. */
  --line: rgba(24, 27, 28, .12);
  --line-soft: rgba(24, 27, 28, .08);
  --line-strong: rgba(24, 27, 28, .2);
  --circles: rgba(24, 27, 28, .12);         /* Kreise pattern stroke — visible on light bg */
  --circles-node: rgba(92, 138, 56, .65);   /* green accent nodes */

  /* Feedback */
  --danger: #C2433B;

  /* Semantic aliases (roles → raw tokens) */
  --bg: var(--paper);
  --surface: var(--paper);
  --border: var(--line);
  --fg: var(--ink);
  --fg-muted: var(--ink-2);
  --fg-subtle: var(--ink-3);
  --primary: var(--green);
  --primary-strong: var(--green-deep);
  --primary-fg: #FFFFFF;

  /* ============ Type ============ */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Inter Tight', var(--sans);

  /* Fluid scale */
  --text-micro: 12.5px;
  --text-eyebrow: 13px;
  --text-sm: 15px;
  --text-body: 17px;
  --text-lede: clamp(18px, 1.7vw, 21px);
  --text-h3: clamp(19px, 2vw, 24px);
  --text-h2: clamp(30px, 4vw, 46px);
  --text-h1: clamp(40px, 6vw, 68px);

  /* Line-height */
  --lh-tight: 1.05;
  --lh-heading: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  /* Tracking */
  --track-tight: -.02em;
  --track-eyebrow: .13em;

  /* Weight */
  --w-body: 400;
  --w-medium: 500;
  --w-semi: 600;

  /* ============ Spacing (4px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ============ Layout ============ */
  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 56px);
  --hero-col: 640px;               /* left content column in the hero */
  --section-y: clamp(60px, 9vw, 112px);

  /* ============ Radii ============ */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --pill: 999px;

  /* ============ Motion ============ */
  --ease: cubic-bezier(.22, .7, .24, 1);
  --dur-fast: .2s;
  --dur: .3s;
  --dur-slow: .45s;
  --dur-reveal: .7s;

  /* ============ Elevation (reserved: funnel modal only) ============ */
  --shadow-modal: 0 30px 70px -30px rgba(18, 21, 22, .5);

  /* ============ Focus ============ */
  --focus-ring: 0 0 0 3px rgba(92, 138, 56, .35);

  /* ============ Z-index ============ */
  --z-header: 50;
  --z-modal: 100;
}