/* ─────────────────────────────────────────
   wuruw. — Design tokens
   Source: Figma color styles
───────────────────────────────────────── */
:root {

  /* ── Core palette (from Figma) ── */
  --color-black:            #141526;
  --color-white:            #FFFFFF;

  --color-divider-light:    #B5B5B5;
  --color-divider-dark:     #6F6F6F;
  --color-cursive:          #949494;

  --color-sky-blue:         #76A5FF;
  --color-aqua-mint:        #79F8F8;
  --color-soft-lavender:    #E5A2FA;
  --color-ice-cyan:         #82E3FA;
  --color-bright-turquoise: #25E5E7;
  --color-neon-lime:        #E8FD2F;
  --color-vibrant-orange:   #F27735;
  --color-pastel-lilac:     #FFA0FF;
  --color-golden-yellow:    #FBC51B;

  /* ── Extended palette (not in Figma, added for internal use) ── */

  /* Logo gradient stops — placeholder gradient in nav pill */
  --color-logo-blue:        #4DA6FF;
  --color-logo-purple:      #A259FF;
  --color-logo-orange:      #FF7B3A;

  /* Dark background tints — used in approach/studio section gradients */
  --color-bg-deep:          #0A1428;
  --color-bg-navy:          #1A2040;
  --color-bg-dark-purple:   #0D0F2A;
  --color-bg-indigo:        #1A1050;

  /* UI surface — work card placeholder background */
  --color-surface-light:    #E8E8E8;

  /* Logo shadow */
  --color-shadow-blue:      rgba(16, 128, 185, 0.12);

  /* ── Layout tokens ── */
  --container-width: 1440px;
  --header-height:   100px;
  --side-padding:    120px;

  /* Where the Approach sticky panel pins from the top of the viewport.
     Smaller than --header-height so the panel hugs the menu visuals
     (logo icon + nav are vertically centered in the 100px header, with
     their bottom edge ~70px down). Read by js/main.js. */
  --approach-pin-top: 72px;

  /* ── Semantic aliases ── */
  --bg:    var(--color-black);
  --white: var(--color-white);
  --blue:  var(--color-sky-blue);
  --aqua:  var(--color-aqua-mint);
  --orange: var(--color-vibrant-orange);
  --muted: var(--color-cursive);

}