/* ============================================================
   LŌRA AI STUDIO — DESIGN TOKENS
   Mirrors projects/loraaistudio website/design-system/index.html
   Source: Figma DSM (JS10m8LPy6xuINGmPK1xcx, node 2060:302)
   + computed styles pulled live from loraaistudio.com
   ============================================================ */
:root{
  /* ---- Color ramps (0 = lightest, 100 = darkest) ---- */
  --sandy-0:#FFFFFF;   --sandy-5:#F7F5F3;  --sandy-10:#EFEAE6; --sandy-15:#E7E0DA;
  --sandy-20:#DFD6CE;  --sandy-30:#CEC1B5; --sandy-40:#BEAD9D; --sandy-50:#AE9884;
  --sandy-60:#8C7B6A;  --sandy-70:#6B5D51; --sandy-80:#494037; --sandy-85:#38312A;
  --sandy-90:#28221E;  --sandy-95:#171411; --sandy-100:#060504;

  --amber-0:#FFFCF8;   --amber-5:#F9EFE0;  --amber-10:#F4E2C8; --amber-15:#EED5B0;
  --amber-20:#E8C898;  --amber-30:#DDAE69; --amber-40:#D19439; --amber-50:#C67A09;
  --amber-60:#9E6207;  --amber-70:#774905; --amber-80:#4F3104; --amber-85:#3B2503;
  --amber-90:#281802;  --amber-95:#140C01; --amber-100:#000000;

  --passion-0:#FFFBF8;  --passion-5:#F9EAE0;  --passion-10:#F4D9C8; --passion-15:#EEC8B0;
  --passion-20:#E8B798; --passion-30:#DD9569; --passion-40:#D17339; --passion-50:#C65109;
  --passion-60:#9E4107; --passion-70:#773105; --passion-80:#4F2004; --passion-85:#3B1803;
  --passion-90:#281002; --passion-95:#140801; --passion-100:#000000;

  /* ---- Semantic aliases — build pages from these, not raw ramps ---- */
  --color-bg:            var(--sandy-20);  /* confirmed via computed style on the live site */
  --color-bg-alt:        var(--sandy-15);  /* alternating section background — confirmed via computed style on the live site */
  --color-surface:       var(--sandy-0);
  --color-border:        var(--sandy-95);
  --color-border-subtle: var(--sandy-20);
  --color-text:          var(--sandy-90);
  --color-text-muted:    var(--sandy-70);
  --color-text-inverse:  var(--sandy-0);
  --color-accent:        var(--passion-50);
  --color-accent-hover:  var(--passion-60);
  --color-accent-active: var(--passion-70);
  --color-accent-subtle: var(--passion-30);

  /* ---- Type — Sora (headings/UI), Zodiak (accent/editorial) ---- */
  --font-sora: 'Sora', system-ui, sans-serif;
  --font-zodiak: 'Zodiak Variable', Georgia, serif;

  /* ---- Radii — flat design, no shadows anywhere ---- */
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ---- Spacing — 8px rhythm ---- */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px;

  /* ---- Type scale — H1 > H2 > H3 > H4 at every breakpoint ---- */
  --fs-h1:64px; --ls-h1:-2.56px;
  --fs-h2:52px; --ls-h2:-2.08px;
  --fs-h3:34px; --ls-h3:-1.36px;
  --fs-h4:24px; --ls-h4:-0.96px;
  --fs-title:32px;   /* component titles: cards, steps, stats */
  --fs-h5:20px;      /* labels / small titles */
  --fs-lead:22px;    /* intro + quote paragraphs */
  --fs-body:18px;    /* long-form paragraphs */
  --fs-small:16px;   /* captions, labels */
  --fs-btn:20px;     /* section CTAs (header buttons stay 16) */
  --btn-pad-y:12px; --btn-pad-x:32px;

  /* ---- Motion — emil-design-eng strong curves ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Tablet: H1 56 / H2 40 / H3 28 */
@media (max-width:1439px){
  :root{
    --fs-h1:56px; --ls-h1:-2.24px;
    --fs-h2:40px; --ls-h2:-1.6px;
    --fs-h3:28px; --ls-h3:-1.12px;
    --fs-title:28px; --fs-h5:18px; --fs-lead:20px; --fs-btn:18px; --btn-pad-x:28px;
  }
}
/* Phone: H1 36 / H2 30 / H3 24 / H4 20 */
@media (max-width:639px){
  :root{
    --fs-h1:36px; --ls-h1:-1.44px;
    --fs-h2:30px; --ls-h2:-1.2px;
    --fs-h3:24px; --ls-h3:-0.96px;
    --fs-h4:20px; --ls-h4:-0.8px;
    --fs-title:24px; --fs-lead:18px; --fs-body:16px; --fs-small:14px; --fs-btn:16px; --btn-pad-y:11px; --btn-pad-x:24px;
  }
}