/* ============================================================
   THESEO.AL — DESIGN TOKENS  ·  Light Mode Architecture
   (ui-ux-pro-max token system)
   ============================================================ */
:root{
  /* ---- Color · Brand ---- */
  --ink-0:#000000;
  --ink-1:#0B0E14;
  --ink-2:#181D27;
  --ink-3:#232A38;
  --violet-700:#5925DC;
  --violet-600:#6938EF;
  --violet-500:#7A5AF8;
  --violet-300:#A794FB;
  --violet-100:#EFEBFF;
  --violet-50:#F6F4FF;
  --coral-600:#EC4A0A;
  --coral-500:#FB6514;
  --coral-400:#FF7A2F;
  --coral-50:#FFF3EB;
  --white:#FFFFFF;
  --gray-50:#F7F7F7;
  --gray-100:#EDEEF2;
  --gray-300:#C6CAD4;
  --gray-500:#7C8394;
  --green-600:#079455;
  --green-50:#EDFCF3;

  /* ---- Color · Semantic (LIGHT) ---- */
  --color-bg:var(--white);
  --color-bg-alt:var(--gray-50);
  --color-bg-tint:var(--violet-50);
  --color-surface:var(--white);
  --color-surface-dark:var(--ink-2);
  --color-fg:var(--ink-2);
  --color-fg-muted:#4C5265;
  --color-fg-soft:var(--gray-500);
  --color-fg-invert:#EDEFF6;
  --color-fg-invert-muted:#9AA1B4;
  --color-accent:var(--violet-600);
  --color-accent-strong:var(--violet-700);
  --color-accent-soft:var(--violet-100);
  --color-cta:var(--coral-500);
  --color-ok:var(--green-600);
  --color-ok-soft:var(--green-50);
  --color-warn:var(--coral-600);
  --color-warn-soft:var(--coral-50);
  --color-border:#E4E6EC;
  --color-border-strong:#D3D6DF;
  --color-border-dark:rgba(255,255,255,.10);
  --color-ring:var(--violet-500);

  /* ---- Gradients ---- */
  --grad-violet:linear-gradient(135deg,var(--violet-500),var(--violet-600));
  --grad-cta:linear-gradient(135deg,#FF7A2F,#FB6514);
  --grad-ink:linear-gradient(160deg,#000000 0%,#0A0F14 55%,#001010 100%);
  --grad-hero-light:
    radial-gradient(46rem 26rem at 82% -10%,rgba(122,90,248,.14),transparent 65%),
    radial-gradient(34rem 22rem at -10% 20%,rgba(251,101,20,.08),transparent 60%),
    linear-gradient(180deg,#FFFFFF 0%,#F9F8FF 100%);
  --grad-text:linear-gradient(92deg,var(--violet-600),var(--violet-500) 45%,var(--coral-500));

  /* ---- Typography ---- */
  --font-display:"Sora",system-ui,sans-serif;
  --font-body:"Rethink Sans",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* Fluid type scale (375 → 1440) */
  --text-xs:clamp(.72rem,.7rem + .1vw,.78rem);
  --text-sm:clamp(.84rem,.8rem + .15vw,.9rem);
  --text-base:clamp(1rem,.96rem + .2vw,1.06rem);
  --text-lg:clamp(1.12rem,1.05rem + .35vw,1.25rem);
  --text-xl:clamp(1.3rem,1.2rem + .6vw,1.55rem);
  --text-2xl:clamp(1.6rem,1.4rem + 1vw,2.1rem);
  --text-3xl:clamp(2rem,1.65rem + 1.8vw,2.9rem);
  --text-hero:clamp(2.3rem,1.65rem + 3.3vw,4rem);

  --leading-tight:1.12;
  --leading-snug:1.3;
  --leading-body:1.65;
  --tracking-caps:.14em;

  /* ---- Spacing (4pt rhythm) ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem;
  --sp-24:6rem;
  --section-y:clamp(4rem,3rem + 5vw,7rem);

  /* ---- Layout ---- */
  --container:72rem;
  --container-pad:clamp(1.25rem,4vw,2.5rem);
  --radius-sm:.5rem;
  --radius-md:.9rem;
  --radius-lg:1.4rem;
  --radius-pill:99rem;

  /* ---- Elevation ---- */
  --shadow-card:0 1px 2px rgba(24,29,39,.05),0 12px 32px -12px rgba(24,29,39,.12);
  --shadow-float:0 24px 64px -20px rgba(24,29,39,.22);
  --shadow-pop:0 24px 64px -16px rgba(105,56,239,.28);
  --glow-violet:0 0 24px rgba(122,90,248,.35);

  /* ---- Motion ---- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:160ms;
  --dur-med:280ms;

  /* ---- Z scale ---- */
  --z-nav:100; --z-menu:110; --z-skip:1000;
}