/* ==========================================================================
   Rediza — Design Tokens
   Single source of truth for colour, type, space, motion and depth.
   ========================================================================== */

:root {
  /* --- Colour: base ------------------------------------------------------ */
  --ink:          #050507;
  --ink-soft:     #0c0c11;
  --ink-raised:   #131319;
  --paper:        #f5f5f7;
  --paper-soft:   #ebebef;
  --white:        #ffffff;

  /* --- Colour: accents — the Rediza aurora ------------------------------- */
  /* Glacier mint → periwinkle → orchid: cool, soothing, and not the blue/
     purple every AI company ships. Dawn peach marks destinations. */
  --mint:         #5ee6c0;
  --ai-1:         #6e8eff;
  --ai-2:         #b07cff;
  --ai-glow:      rgba(110, 142, 255, 0.42);
  --trip:         #ffb48f;
  --trip-2:       #ff8fa3;
  --trip-glow:    rgba(255, 180, 143, 0.38);

  /* --- Colour: text on dark ---------------------------------------------- */
  --t-hi:         rgba(255, 255, 255, 0.96);
  --t-mid:        rgba(255, 255, 255, 0.62);
  --t-lo:         rgba(255, 255, 255, 0.38);
  --t-faint:      rgba(255, 255, 255, 0.12);

  /* --- Colour: text on light --------------------------------------------- */
  --d-hi:         rgba(0, 0, 0, 0.92);
  --d-mid:        rgba(0, 0, 0, 0.56);
  --d-lo:         rgba(0, 0, 0, 0.34);
  --d-faint:      rgba(0, 0, 0, 0.1);

  /* --- Colour: semantic (remapped per-section via .on-light / .on-dark) --- */
  --bg:           var(--ink);
  --fg:           var(--t-hi);
  --fg-mid:       var(--t-mid);
  --fg-lo:        var(--t-lo);
  --rule:         var(--t-faint);

  /* --- Typography -------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale — min at 380px viewport, max at 1600px */
  --fs-display: clamp(2.9rem, 9.6vw, 10rem);
  --fs-h1:      clamp(2.5rem, 6.6vw, 6rem);
  --fs-h2:      clamp(2rem, 4.4vw, 3.75rem);
  --fs-h3:      clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h4:      clamp(1.15rem, 1.5vw, 1.4rem);
  --fs-lead:    clamp(1.125rem, 1.7vw, 1.6rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.125rem);
  --fs-small:   0.9375rem;
  --fs-micro:   0.75rem;

  --lh-tight:   0.94;
  --lh-snug:    1.08;
  --lh-body:    1.55;

  --tr-display: -0.045em;
  --tr-head:    -0.03em;
  --tr-body:    -0.011em;
  --tr-micro:   0.16em;

  /* --- Space ------------------------------------------------------------- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Section rhythm collapses on small screens */
  --section-y: clamp(6rem, 11vw, 12rem);
  --gutter:    clamp(1.25rem, 4vw, 4rem);
  --measure:   68ch;
  --maxw:      1440px;
  --maxw-text: 1100px;

  /* --- Motion ------------------------------------------------------------ */
  /* One easing family so the whole site moves like one machine. */
  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);      /* entrances       */
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);      /* scrubs, pins    */
  --e-soft:  cubic-bezier(0.4, 0, 0.2, 1);        /* UI, hover       */

  --d-fast:  0.24s;
  --d-mid:   0.44s;
  --d-slow:  0.72s;
  --d-epic:  1.1s;

  /* --- Depth ------------------------------------------------------------- */
  --z-canvas:  0;
  --z-content: 10;
  --z-nav:     100;
  --z-menu:    110;
  --z-cursor:  9999;

  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.16), 0 12px 40px rgba(0, 0, 0, 0.24);
  --shadow-deep: 0 2px 8px rgba(0, 0, 0, 0.2), 0 40px 90px rgba(0, 0, 0, 0.45);

  --radius-s:  8px;
  --radius-m:  16px;
  --radius-l:  28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  --nav-h: 62px;
}

/* Sections opt into a colour context rather than hard-coding colours.
   Everything downstream reads --bg / --fg / --fg-mid / --rule. */
.on-dark {
  --bg:     var(--ink);
  --fg:     var(--t-hi);
  --fg-mid: var(--t-mid);
  --fg-lo:  var(--t-lo);
  --rule:   var(--t-faint);
  background: var(--bg);
  color: var(--fg);
}

.on-light {
  --bg:     var(--paper);
  --fg:     var(--d-hi);
  --fg-mid: var(--d-mid);
  --fg-lo:  var(--d-lo);
  --rule:   var(--d-faint);
  background: var(--bg);
  color: var(--fg);
}