/* ══════════════════════════════════════════════════════════════
   ORIGINEI HUB — Design Tokens
   Single source of truth for all CSS values across the site.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ── Color: Brand ─────────────────────────────────────────── */
  --accent:          #FF6B00;
  --accent-hover:    #E55A00;
  --accent-light:    rgba(255, 107, 0, 0.12);
  --accent-mid:      rgba(255, 107, 0, 0.30);
  --accent-glow:     rgba(255, 107, 0, 0.18);

  /* ── Color: Surfaces ──────────────────────────────────────── */
  --surface:         #FFFFFF;
  --surface-alt:     #F8F8F6;
  --surface-card:    #FFFFFF;
  --surface-glass:   rgba(255, 255, 255, 0.72);

  --dark:            #0A0A0A;
  --dark-mid:        #141414;
  --dark-card:       rgba(255, 255, 255, 0.05);
  --dark-border:     rgba(255, 255, 255, 0.08);

  /* ── Color: Text (light bg) ───────────────────────────────── */
  --heading:         #0A0A0A;
  --text:            #3F3F46;
  --muted:           rgba(10, 10, 10, 0.50);
  --muted-light:     rgba(10, 10, 10, 0.28);

  /* ── Color: Text (dark bg) ────────────────────────────────── */
  --on-dark-heading: #FFFFFF;
  --on-dark-text:    rgba(255, 255, 255, 0.82);
  --on-dark-muted:   rgba(255, 255, 255, 0.45);
  --on-dark-subtle:  rgba(255, 255, 255, 0.22);

  /* ── Color: Borders ───────────────────────────────────────── */
  --border:          rgba(10, 10, 10, 0.10);
  --border-dark:     rgba(255, 255, 255, 0.08);

  /* ── Color: Semantic ──────────────────────────────────────── */
  --success:         #16A34A;
  --warning:         #D97706;
  --error:           #DC2626;
  --info:            #2563EB;

  /* ── Typography: Families ────────────────────────────────── */
  --font-sans:       'Inter', system-ui, -apple-system, sans-serif;
  --font-display:    'Outfit', 'Inter', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ── Typography: Scale ───────────────────────────────────── */
  --text-xs:         0.75rem;    /* 12px */
  --text-sm:         0.875rem;   /* 14px */
  --text-base:       1rem;       /* 16px */
  --text-lg:         1.125rem;   /* 18px */
  --text-xl:         1.25rem;    /* 20px */
  --text-2xl:        1.5rem;     /* 24px */
  --text-3xl:        1.875rem;   /* 30px */
  --text-4xl:        2.25rem;    /* 36px */
  --text-5xl:        3rem;       /* 48px */
  --text-6xl:        3.75rem;    /* 60px */
  --text-7xl:        4.5rem;     /* 72px */
  --text-8xl:        6rem;       /* 96px */

  /* ── Typography: Weights ────────────────────────────────── */
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  /* ── Typography: Line Heights ───────────────────────────── */
  --lh-tight:        1.1;
  --lh-snug:         1.25;
  --lh-normal:       1.5;
  --lh-relaxed:      1.7;

  /* ── Typography: Letter Spacing ─────────────────────────── */
  --ls-tight:        -0.03em;
  --ls-snug:         -0.02em;
  --ls-normal:       0em;
  --ls-wide:         0.04em;
  --ls-wider:        0.08em;
  --ls-widest:       0.12em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-8:    32px;
  --sp-10:   40px;
  --sp-12:   48px;
  --sp-16:   64px;
  --sp-20:   80px;
  --sp-24:   96px;
  --sp-32:   128px;

  /* ── Section padding ────────────────────────────────────── */
  --section-py:      96px;
  --section-py-sm:   64px;
  --section-py-lg:   128px;

  /* ── Layout ──────────────────────────────────────────────── */
  --max-w:           1200px;
  --max-w-narrow:    860px;
  --max-w-wide:      1400px;
  --container-px:    clamp(20px, 5vw, 60px);

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:       4px;
  --radius:          8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      32px;
  --radius-full:     9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.08);
  --shadow:          0 4px 16px rgba(0,0,0,0.10);
  --shadow-md:       0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:       0 16px 64px rgba(0,0,0,0.14);
  --shadow-accent:   0 8px 32px rgba(255,107,0,0.22);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:          150ms;
  --t-base:          250ms;
  --t-slow:          400ms;
  --t-slower:        600ms;

  /* ── Nav ─────────────────────────────────────────────────── */
  --nav-h:           80px;
  --nav-bg:          rgba(255, 255, 255, 0.96);
  --nav-border:      rgba(10, 10, 10, 0.08);

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:          1;
  --z-raised:        10;
  --z-sticky:        100;
  --z-nav:           200;
  --z-modal:         300;
  --z-toast:         400;
  --z-cursor:        9999;
}

/* Dark section overrides — apply class .section-dark to any section */
.section-dark {
  --heading:     var(--on-dark-heading);
  --text:        var(--on-dark-text);
  --muted:       var(--on-dark-muted);
  --muted-light: var(--on-dark-subtle);
  --border:      var(--border-dark);
  background:    var(--dark);
  color:         var(--on-dark-text);
}
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6 { color: var(--on-dark-heading); }
.section-dark p { color: var(--on-dark-text); }

/* Off-dark variant (#141414) */
.section-off-dark {
  --heading:     var(--on-dark-heading);
  --text:        var(--on-dark-text);
  --muted:       var(--on-dark-muted);
  --muted-light: var(--on-dark-subtle);
  --border:      var(--border-dark);
  background:    var(--dark-mid);
  color:         var(--on-dark-text);
}
.section-off-dark h1, .section-off-dark h2, .section-off-dark h3,
.section-off-dark h4, .section-off-dark h5, .section-off-dark h6 { color: var(--on-dark-heading); }
.section-off-dark p { color: var(--on-dark-text); }