/* ==========================================================================
   TOKENS  —  LACQUER ROOM  ·  ARLINGTON, VA
   --------------------------------------------------------------------------
   Every colour, type step, radius and timing on the site is declared here.
   main.css contains no hard-coded colours — if a hex value ever needs to go
   in that file, add a token to this one instead.

   Palette: near-black canvas, acid-lime primary, electric-violet secondary,
   chrome hairlines. Built for a late-opening urban nail bar.
   ========================================================================== */

:root {

  /* ═══════════════════════════════════════════════════════════════ BRAND
     The six values the whole palette is derived from.                    */

  --brand-canvas:  #0B0B0F;  /* page background            (near black)   */
  --brand-surface: #141419;  /* cards, nav, raised panels  (charcoal)     */
  --brand-lime:    #D6FF3F;  /* PRIMARY accent: buttons, links, active    */
  --brand-violet:  #7B5CFF;  /* SECONDARY accent: duotone, gradients      */
  --brand-text:    #F3F3F6;  /* headings + body text       (near white)   */
  --brand-chrome:  #8E8EA0;  /* muted text, hairlines      (cool grey)    */

  /* ────────────────────────────────────────────────── derived surfaces */
  --c-canvas:      var(--brand-canvas);
  --c-surface:     var(--brand-surface);
  --c-surface-2:   #1C1C24;                    /* nested / hover panels  */
  --c-surface-3:   #262630;                    /* inputs, chips          */
  --c-line:        rgba(255,255,255,.09);      /* default hairline       */
  --c-line-strong: rgba(255,255,255,.18);      /* emphasised hairline    */

  /* ────────────────────────────────────────────────────── derived text */
  --c-text:        var(--brand-text);
  --c-text-soft:   #B9B9C6;                    /* body copy              */
  --c-text-mute:   var(--brand-chrome);        /* captions, meta         */
  /* Measured against --brand-canvas: 4.8:1, so it clears WCAG AA for normal
     text. The obvious darker grey (#5C5C6B) only reaches 3.0:1, and this
     token carries real body copy — the menu fine print and the footer
     hours line — not just decoration. */
  --c-text-faint:  #7C7C8C;                    /* fine print, meta       */
  --c-on-lime:     #0B0B0F;                    /* text ON a lime fill    */

  /* ──────────────────────────────────────────────────── derived accent */
  --c-lime:        var(--brand-lime);
  --c-lime-dim:    #B4DC1E;                    /* lime, pressed state    */
  --c-lime-wash:   rgba(214,255,63,.12);       /* lime tint fill         */
  --c-lime-edge:   rgba(214,255,63,.38);       /* lime hairline          */
  --c-violet:      var(--brand-violet);
  --c-violet-wash: rgba(123,92,255,.14);

  /* Status colours. Used by the live Open / Closed pill only. */
  --c-open:        #4ADE80;
  --c-closed:      #FF6B6B;

  /* ═══════════════════════════════════════════════════════════ EFFECTS */

  /* The signature gradient. Appears on the logo, the hero rule, and any
     element carrying .grad-text. */
  --grad-brand: linear-gradient(100deg,
                  var(--c-lime) 0%,
                  #A8F0A0 38%,
                  var(--c-violet) 100%);

  /* Chrome / brushed-metal sweep for large display type. */
  --grad-chrome: linear-gradient(155deg,
                  #FFFFFF 0%, #C9C9D6 22%, #74748A 46%,
                  #EDEDF5 62%, #9A9AAE 82%, #FFFFFF 100%);

  /* Duotone wash laid over grayscaled photography (mix-blend-mode: color).
     This is what makes the stock photos read as this brand and not another. */
  --duotone: linear-gradient(150deg, var(--c-violet) 0%, var(--c-lime) 100%);

  /* Ambient glows. --glow-pointer is repositioned by site.js on the hero. */
  --glow-lime:   0 0 0 1px var(--c-lime-edge), 0 0 34px -6px rgba(214,255,63,.55);
  --glow-violet: 0 0 44px -10px rgba(123,92,255,.65);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 18px 40px -18px rgba(0,0,0,.85);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.95);

  /* Fine noise, kept as a data URI so there is no extra HTTP request and no
     binary asset to lose. Stops large flat dark areas from banding. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  /* ══════════════════════════════════════════════════════════════ TYPE
     Both families load from Google Fonts in each page's <head>.
     If you change these, update the <link> tag on all 4 pages too.
     --font-mono is a system stack — it downloads nothing.               */

  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
                  Menlo, Consolas, monospace;

  /* Capped at 8.5rem so the longest word in the hero wordmark still fits
     the 640px type column at 1440px wide. Raise it and check the hero. */
  --fs-mega:   clamp(3.2rem, 10vw, 8.5rem);  /* hero wordmark            */
  --fs-h1:     clamp(2.4rem, 6vw, 4.4rem);
  --fs-h2:     clamp(1.9rem, 4vw, 3.1rem);
  --fs-h3:     clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.875rem;
  --fs-label:  0.6875rem;                    /* mono eyebrow labels      */

  --lh-mega:  0.86;
  --lh-tight: 1.06;
  --lh-body:  1.7;

  --ls-mega:  -0.045em;                      /* big type tracks tight    */
  --ls-h:     -0.025em;
  --ls-label: 0.2em;                         /* mono labels track wide   */

  /* ════════════════════════════════════════════════════════════ LAYOUT */

  --wrap:        1280px;
  --wrap-narrow: 760px;
  --gutter:      clamp(1.15rem, 4vw, 3rem);
  --section-y:   clamp(4.5rem, 10vw, 9rem);

  --radius-sm:   8px;
  --radius:      16px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* ════════════════════════════════════════════════════════════ MOTION
     One vocabulary for the whole site. --ease-out is the "arrive" curve:
     fast off the mark, long settle, which is what makes a reveal read as
     deliberate rather than as a jump. --ease-back overshoots slightly and
     is reserved for things that pop in (lightbox, drawer links).        */

  --ease:      cubic-bezier(.2,.7,.25,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.46,.42,1);
  --dur:       .5s;
  --dur-fast:  .22s;
  --dur-slow:  .85s;

  /* Scroll-reveal geometry, so every section moves by the same distance. */
  --rise:      26px;      /* how far a revealing block travels upward    */
  --slide:     38px;      /* sideways travel for .reveal--left / --right */
  --stagger:   .07s;      /* default gap between staggered children      */

  --header-h: 74px;
}

@media (max-width: 760px) {
  :root { --header-h: 62px; }
}

/* Respect users who ask for less motion. Timings collapse to nothing and
   main.css switches off the marquee, the parallax, the pointer glow, the
   entrance choreography and the count-up entirely. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: .001s; --dur-fast: .001s; --dur-slow: .001s;
    --rise: 0px; --slide: 0px; --stagger: 0s;
  }
}