/* ============================================================
   ORON — DESIGN TOKENS  v2
   Single source of truth. Brand values locked to the oron-brand
   skill + design-system/tokens.css. Do not invent new hexes.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --or-orange:        #F25533;
  --or-orange-vivid:  #FA5C12;
  --or-orange-deep:   #B73F06;
  --or-orange-tint:   #FFF1ED;
  --or-orange-tint-2: #FFE3DA;

  /* ---------- Ink ---------- */
  --or-black:   #0F0A0A;
  --or-ink-900: #171717;
  --or-ink-800: #212427;
  --or-ink-700: #2C2F2E;
  --or-ink-500: #6B6B6B;   /* AA on white/gray-50/sand/blue-50 (#737373 was 4.22 on sand) */
  --or-ink-400: #767676;
  --or-ink-300: #C7C7C7;

  /* ---------- Surfaces ---------- */
  --or-white:   #FFFFFF;
  --or-gray-50: #FAFAFA;
  --or-gray-100:#F5F5F4;
  --or-blue-50: #F0F3F8;
  --or-sand-50: #F6F1EB;
  --or-cream:   #FAF7F2;

  /* ---------- Lines ---------- */
  --or-border:        #E7E5E2;
  --or-border-strong: #D6D3CF;
  --or-border-soft:   #F1F0EE;
  --or-hairline:      rgba(15,10,10,.07);

  /* ---------- Accents ---------- */
  --or-blue:    #2A76F6;
  --or-green:   #00B67A;
  --or-mint-50: #E8F7F4;
  --or-mint-200:#B8E0D8;

  /* ---------- On-dark ---------- */
  --or-on-dark:        rgba(255,255,255,.94);
  --or-on-dark-muted:  rgba(255,255,255,.62);
  --or-on-dark-faint:  rgba(255,255,255,.42);
  --or-on-dark-line:   rgba(255,255,255,.10);
  --or-on-dark-line-2: rgba(255,255,255,.16);
  --or-on-dark-fill:   rgba(255,255,255,.045);

  /* ---------- Gradients / glows ---------- */
  --or-grad-cta:   linear-gradient(180deg, #FA5C12 0%, #E0490F 55%, #C9430C 100%);
  --or-grad-warm:  linear-gradient(135deg, #FA5C12 0%, #B73F06 100%);
  --or-glow:       radial-gradient(circle, rgba(242,85,51,.18) 0%, rgba(242,85,51,0) 70%);
  --or-grad-text:  linear-gradient(100deg, #171717 0%, #171717 55%, #6b6663 100%);

  /* ---------- Type ---------- */
  --or-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --or-mono: "SF Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;

  /* Fluid type scale — 390px → 1440px viewport */
  --fs-display: clamp(2.75rem, 1.55rem + 4.95vw, 5.25rem);  /* 44 → 84 */
  --fs-h1:      clamp(2.25rem, 1.42rem + 3.42vw, 3.9rem);   /* 36 → 62.4 */
  --fs-h2:      clamp(1.875rem, 1.30rem + 2.38vw, 3rem);    /* 30 → 48 */
  --fs-h3:      clamp(1.25rem, 1.08rem + 0.71vw, 1.625rem); /* 20 → 26 */
  --fs-h4:      clamp(1.0625rem, 1.00rem + 0.29vw, 1.25rem);/* 17 → 20 */
  --fs-lead:    clamp(1.0625rem, 0.97rem + 0.40vw, 1.3125rem); /* 17 → 21 */
  --fs-body:    clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);   /* 15 → 16 */
  --fs-small:   0.875rem;    /* 14 */
  --fs-caption: 0.8125rem;   /* 13 */
  --fs-micro:   0.75rem;     /* 12 */

  --lh-display: 1.02;
  --lh-tight:   1.08;
  --lh-heading: 1.14;
  --lh-snug:    1.35;
  --lh-body:    1.62;

  --ls-display: -0.035em;
  --ls-h1:      -0.032em;
  --ls-h2:      -0.028em;
  --ls-h3:      -0.02em;
  --ls-body:    -0.011em;
  --ls-eyebrow: 0.09em;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* ---------- Space (8pt grid, 4pt half-steps) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-28: 112px; --s-32: 128px;

  /* Vertical rhythm between sections (fluid) */
  --sp-section:   clamp(72px, 4.2vw + 52px, 128px);
  --sp-section-lg:clamp(96px, 6.0vw + 62px, 168px);
  --sp-stack:     clamp(20px, 1.2vw + 14px, 28px);

  /* ---------- Radius ---------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --r-xl: 24px; --r-2xl: 32px; --r-3xl: 40px; --r-pill: 9999px;

  /* ---------- Elevation — warm-tinted, never pure black ---------- */
  --sh-xs: 0 1px 2px rgba(23,15,10,.05);
  --sh-sm: 0 1px 2px rgba(23,15,10,.05), 0 2px 6px rgba(23,15,10,.04);
  --sh-md: 0 2px 4px rgba(23,15,10,.04), 0 8px 20px -6px rgba(23,15,10,.09);
  --sh-lg: 0 4px 8px rgba(23,15,10,.04), 0 18px 42px -12px rgba(23,15,10,.13);
  --sh-xl: 0 8px 16px rgba(23,15,10,.05), 0 36px 76px -22px rgba(23,15,10,.18);
  --sh-cta: 0 1px 1px rgba(255,255,255,.28) inset, 0 2px 6px rgba(183,63,6,.24), 0 10px 24px -8px rgba(242,85,51,.42);
  --sh-cta-hover: 0 1px 1px rgba(255,255,255,.32) inset, 0 3px 10px rgba(183,63,6,.28), 0 16px 34px -10px rgba(242,85,51,.5);
  --sh-ring: 0 0 0 1px var(--or-border);

  /* ---------- Motion ---------- */
  --e-out:    cubic-bezier(.22,.61,.36,1);
  --e-inout:  cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.34,1.4,.5,1);
  --e-smooth: cubic-bezier(.4,0,.2,1);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   460ms;
  --t-reveal: 760ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
  --nav-h: 68px;

  /* ---------- Z ---------- */
  --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-nav: 500; --z-modal: 1000;
}