/* ==========================================================================
   KeyDesign — design tokens

   One rule governs the palette: the artwork supplies the colour. Everything
   the interface draws is a neutral with a slight cool cast, so that a pink
   strawberry character and a purple lowrider pattern can sit on the same page
   without either fighting the furniture.

   The green is the brand's, and it stays a mark rather than a surface — badges,
   the active nav rule, focus, small interaction states. Nothing large is green.
   ========================================================================== */

:root {
  /* --- grounds ------------------------------------------------------------
     Cool near-blacks rather than pure #000, so cut-out product shadows have
     somewhere to fall and the page does not look like a void. */
  --ground:        #0B0B0D;
  --surface:       #131316;
  --surface-2:     #191A1E;
  --surface-3:     #212228;

  /* --- the product well ---------------------------------------------------
     Where cut-out products sit. A soft top-lit graphite, so a garment reads as
     photographed rather than pasted. */
  --well-from:     #34383F;
  --well-to:       #131418;
  --well-shadow:   rgba(0, 0, 0, 0.55);

  /* --- the studio tile ----------------------------------------------------
     For white goods that cannot be cut out without destroying them - a white
     beanie, a poster, a pale blanket. Starts at the same #FFFFFF the mockup
     itself uses, so the image edge disappears into the tile instead of drawing
     a second rectangle inside the first, then falls to a warm grey so the tile
     still reads as a lit surface rather than a hole in the page. */
  --studio-from:   #FFFFFF;
  --studio-to:     #F1EFEA;
  --studio-edge:   rgba(0, 0, 0, 0.12);

  /* --- ink ---------------------------------------------------------------- */
  --ink:           #F4F4F1;
  --ink-2:         #A8ABA3;
  --ink-3:         #74776F;
  --ink-on-light:  #161814;

  /* --- brand mark --------------------------------------------------------- */
  /* Neon baby blue, and it moves.
     Bone was quiet enough to disappear; the acid green was loud enough to fight
     the artwork. A cool neon sits between the two — bright enough to be a mark,
     cold enough that it never competes with the pinks, golds and purples in the
     designs, which are all warm.
     The accent rotates through a small cool family as you move through the site
     (see accent.js). Each is checked to the same contrast on the dark ground, so
     the interface stays legible whichever one is showing. */
  --accent:        #5CD9FF;   /* neon baby blue — small marks, rules, focus */
  --accent-deep:   #2FAFD8;   /* larger fills and hovers */
  --accent-ink:    #04222C;   /* text on an accent fill */
  --accent-soft:   rgba(92, 217, 255, 0.12);

  --danger:        #D98268;   /* muted to sit with the neutral palette */
  --danger-soft:   rgba(255, 107, 74, 0.12);

  /* --- lines -------------------------------------------------------------- */
  --line:          rgba(255, 255, 255, 0.09);
  --line-strong:   rgba(255, 255, 255, 0.18);

  /* --- type --------------------------------------------------------------- */
  --f-display: 'Oswald', 'Arial Narrow', sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Consolas', monospace;

  /* A real scale, so nothing is sized by feel.
     1.25 minor third — tight enough for dense product grids. */
  --t-3xs: 0.6875rem;   /* 11px — mono labels */
  --t-2xs: 0.75rem;     /* 12px */
  --t-xs:  0.8125rem;   /* 13px */
  --t-sm:  0.9375rem;   /* 15px */
  --t-md:  1.0625rem;   /* 17px — body */
  --t-lg:  1.375rem;
  --t-xl:  1.75rem;
  --t-2xl: 2.25rem;
  --t-3xl: 3rem;

  --track-label: 0.14em;   /* uppercase mono labels */
  --track-nav:   0.09em;

  /* --- space -------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --page-max: 1480px;
  --gutter: clamp(18px, 4vw, 56px);
  --nav-h: 62px;

  --radius:    3px;      /* the brand is square-ish; corners stay tight */
  --radius-lg: 6px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms var(--ease);
  --med:  240ms var(--ease);
}

/* The storefront commits to one dark world on purpose — it is a shop window,
   and the goods are lit against a dark ground. There is no light variant, so
   every colour is painted explicitly and nothing is inherited from the host. */