/* ── Portfolio design tokens ──────────────────────────────────────────────────
   THE canonical palette / motion / radius / shadow source for this repo
   (CLAUDE.md → Conventions → Tokens points here). Every value below was derived
   from the literals already in the pages, not invented: each one recurs across
   at least two of index / preply / kyivstar / deal (or is the shared curtain).
   One-off literals that belong to a single page's art direction are deliberately
   NOT here — see "deliberately absent" at the bottom.

   Loaded byte-identical in every page's <head> (same rule as research-insights.css
   and the Swup vendor tags), so the head-plugin never sees a differing tag.
   Custom properties resolve live, so this may load before or after a page's
   inline <style>; page rules can override any token locally.

   ── TOKENS AVAILABLE ────────────────────────────────────────────────────────

   SPACING (page-edge chrome: page title / action buttons / nav)
     --page-pad-x   edge → title/buttons  (desktop 60 · tablet 40 · mobile 24)
     --page-pad-y   top inset shared by nav and modal chrome (desktop 28 · ≤tablet 24)
     Consume with a safe-area guard:
       padding-inline: max(var(--page-pad-x), env(safe-area-inset-left));

   MOTION (was an identical inline :root on all three project pages)
     --ease          cubic-bezier(.16,1,.3,1)      house "expo out" — reveals, folders,
                                                   modal content, sticker scatter
     --ease-soft     cubic-bezier(.25,.46,.45,.94) gentler ease-out for small moves
     --ease-curtain  cubic-bezier(0.5,0,0.2,1)     the full-screen "sweep" family:
                                                   Swup curtain clip-path, contact-popup
                                                   collapse, home loader collapse
     --dur           1s        default reveal duration
     --dur-slow      1.4s      hero / large reveals
     --dur-fast      .65s      quick UI moves

   BRAND COLOR
     --curtain-pink  #F1878C  page-transition curtain (all 4 pages; the theme-color
                              controller in assets/vendor/transitions-init.js hard-codes
                              the same hex — keep the two in sync)
     --contact-pink  #EC6EB4  "Let's chat" contact-popup backdrop (all 4 pages; also
                              pushed as a theme-color overlay from each page's JS)
     --contact-ink   #1c1220  text inside the contact popup (all 4 pages)
     --accent-pink   #E4699B  pill buttons / tip badges (preply · kyivstar · deal)
     --brand-brown   #5D3122  home base brown — nav backdrop, <meta theme-color>,
                              apple-touch-icon plate
     --bg-home       #cec8b8  home page ground
     The three project pages' body backgrounds (#D13D76 preply · #ffffff kyivstar ·
     #783C27 deal) are intentionally NOT tokens: each is one page's art direction,
     and each page's hero colour is duplicated in a <meta name="theme-color"> /
     data-theme-color HTML attribute, which cannot consume a var() — tokenizing
     only the CSS half would split the source of truth.

   FOLDER PALETTE (the .ks-folder custom-property triples, identical on all three
   project pages; index reuses the same pairs in its folder-icon gradients)
     --folder-yellow-a / -b / -back   #FFE2AF / #F0CE95 / #DFBD82
     --folder-red-a    / -b / -back   #FFAFB5 / #F09596 / #DF8482
     --folder-blue-a   / -b / -back   #AFD3FF / #95BEF0 / #95BEF0
     --folder-pink-a   / -b / -back   #FFAFDA / #F095C5 / #DF82B4

   SURFACE / OVERLAY
     --modal-dim     rgba(0,0,0,.85)  the shared full-screen modal scrim
                     (deal's .ks-modal uses .7 and index's video/figma modals .88 —
                     different by design, left as literals)
     --glass-sheen   the 145° white hairline gradient every glass surface paints
     --glass-blur    blur(2px) saturate(1.4) brightness(1.02) — the backdrop-filter
                     recipe; ALWAYS set -webkit-backdrop-filter alongside it

   SHADOW
     --glass-shadow        rest state of a glass surface (ring + soft drop)
     --glass-shadow-sm     same recipe, tighter drop (small pills)
     --glass-shadow-hover  hover/active state (0.5px ring, deeper drop)
     --shadow-sm           0 2px 10px rgba(0,0,0,0.10)
     --shadow-md           0 8px 24px rgba(0,0,0,0.22)
     --shadow-lift         0 8px 24px -4px rgba(0,0,0,.22) — inset-spread lift

   RADIUS (the values that recur across pages)
     --r-xs 8px · --r-sm 14px · --r-md 20px · --r-lg 24px · --r-xl 28px · --r-2xl 40px
     21 / 30 / 32px exist but only inside one page each, so they stay literal.

   FONT (self-hosted, see assets/shared/fonts.css)
     --font-sans  'General Sans' + the F2.3 fallback stack
     --font-hand  'Caveat' — declared but currently applied by no rule anywhere

   ── MIGRATION POLICY ────────────────────────────────────────────────────────
   New code MUST consume these tokens — no new hard-coded color/radius/shadow/
   font-family literals in page CSS. Legacy literals migrate opportunistically,
   and only on an EXACT match; never round a near-miss into a token. */

:root{
  /* spacing */
  --page-pad-x: 60px;
  --page-pad-y: 28px;

  /* motion */
  --ease:         cubic-bezier(.16,1,.3,1);
  --ease-soft:    cubic-bezier(.25,.46,.45,.94);
  --ease-curtain: cubic-bezier(0.5,0,0.2,1);
  --dur:      1s;
  --dur-slow: 1.4s;
  --dur-fast: .65s;

  /* brand color */
  --curtain-pink: #F1878C;
  --contact-pink: #EC6EB4;
  --contact-ink:  #1c1220;
  --accent-pink:  #E4699B;
  --brand-brown:  #5D3122;
  --bg-home:      #cec8b8;

  /* folder palette */
  --folder-yellow-a: #FFE2AF; --folder-yellow-b: #F0CE95; --folder-yellow-back: #DFBD82;
  --folder-red-a:    #FFAFB5; --folder-red-b:    #F09596; --folder-red-back:    #DF8482;
  --folder-blue-a:   #AFD3FF; --folder-blue-b:   #95BEF0; --folder-blue-back:   #95BEF0;
  --folder-pink-a:   #FFAFDA; --folder-pink-b:   #F095C5; --folder-pink-back:   #DF82B4;

  /* surface / overlay */
  --modal-dim:   rgba(0,0,0,.85);
  --glass-sheen: linear-gradient(145deg,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.35) 45%,rgba(255,255,255,0.15) 100%);
  --glass-blur:  blur(2px) saturate(1.4) brightness(1.02);

  /* shadow */
  --glass-shadow:       0 0 0 0 rgba(255,255,255,0.25),0 2px 10px rgba(0,0,0,0.10);
  --glass-shadow-sm:    0 0 0 0 rgba(255,255,255,0.25),0 1px 5px rgba(0,0,0,0.10);
  --glass-shadow-hover: 0 0 0 0.5px rgba(255,255,255,0.25),0 4px 16px rgba(0,0,0,0.14);
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.10);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.22);
  --shadow-lift: 0 8px 24px -4px rgba(0,0,0,.22);

  /* radius */
  --r-xs:  8px;
  --r-sm:  14px;
  --r-md:  20px;
  --r-lg:  24px;
  --r-xl:  28px;
  --r-2xl: 40px;

  /* font */
  --font-sans: 'General Sans',ui-sans-serif,system-ui,Arial,sans-serif;
  --font-hand: 'Caveat',cursive;
}

/* Three responsive tiers, reusing the portfolio's existing 899 / 599 breakpoints.
   Only the page-edge spacing is viewport-dependent; everything else is fixed. */
@media (max-width:899px){          /* tablet */
  :root{ --page-pad-x: 40px; --page-pad-y: 24px; }
}
@media (max-width:599px){          /* mobile */
  :root{ --page-pad-x: 24px; }
}
