/* ================================================
   POLINO Mosaic Studio — Design System
   All values live here. Never hardcode elsewhere.
   ================================================ */

:root {

  /* --- COLORS --- */
  --bg:            #F4E8D2;   /* warm cream page background */
  --paper:         #E8D7B9;   /* vintage paper */
  --olive:         #68704A;   /* soft olive */
  --olive-deep:    #3F4A32;   /* deep olive */
  --olive-dark:    #26301F;   /* dark forest olive */
  --terra:         #C96A3A;   /* terracotta orange — primary accent */
  --clay:          #9E4326;   /* burnt clay */
  --gold:          #E6A15C;   /* warm golden studio light */
  --amber:         #F1B56A;   /* soft amber glow */
  --text:          #2B2118;   /* espresso brown — main body text */
  --text-light:    #5C4A38;   /* lighter body text */
  --walnut:        #7A4B35;   /* warm walnut — DIY kit card accent */
  --white-mosaic:  #F7F1E6;   /* mosaic white — text on dark */
  --teal:          #87A7A0;   /* dusty teal */
  --teal-deep:     #0F6F73;   /* accent teal */
  --teal-ocean:    #08464F;   /* deep teal */
  --navy:          #1B2A4A;   /* deep navy */
  --black-tile:    #1A1A1A;   /* near-black — mosaic background */
  --dark-tile:     #2A2218;   /* dark warm charcoal — tile fill */
  --coral:         #D65A42;   /* coral mosaic accent */
  --cta-brick:     #D97042;   /* burnished copper — primary CTA */
  --cta-brick-hot: #E07A47;   /* gently brighter CTA hover state */
  --rose:          #C0392B;   /* deep red rose */
  --cream-tile:    #F0E6D3;   /* cream tile / frame color */
  --gold-stem:     #C98F35;   /* golden vine/stem in mosaic */
  --green-leaf:    #4A6741;   /* mosaic leaf green */
  --blue-accent:   #5B8DB8;   /* cornflower blue accent */

  /* --- CARD SURFACE --- */
  --card-bg:       #FBF6EC;   /* card surface — lighter than --bg so cards read as objects */
  --card-border:   rgba(38, 48, 31, 0.10);

  /* --- TYPOGRAPHY --- */
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Manrope', system-ui, sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-semi:    600;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.85;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.14em;

  /* --- SPACING --- */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* --- BORDER RADIUS --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* --- SHADOWS --- */
  --shadow-sm:    0 1px 3px rgba(43, 33, 24, 0.08);
  --shadow-md:    0 4px 16px rgba(43, 33, 24, 0.12);
  --shadow-lg:    0 8px 32px rgba(43, 33, 24, 0.18);
  --shadow-xl:    0 16px 56px rgba(43, 33, 24, 0.28);
  --shadow-glow:  0 0 40px rgba(230, 161, 92, 0.28);
  --shadow-terra: 0 8px 32px rgba(201, 106, 58, 0.22);
  --shadow-dark:  0 24px 64px rgba(26, 26, 26, 0.45);

  /* --- TRANSITIONS --- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 900ms;

  /* Scroll reveal. Longer than --duration-slow because the observer now fires
     these while the element is still climbing the lower fifth of the screen. */
  --duration-reveal: 800ms;
  /* Was 1000ms. The wipe uncovers what sits behind the photograph, so every
     millisecond of it is a millisecond of empty frame — shortened until the
     effect still registers but nothing is left waiting on it. */
  --duration-wipe:   600ms;
  --reveal-shift:     40px;
  --reveal-shift-sm:  28px;

  /* --- LAYOUT --- */
  --container-max: 1280px;
  --header-height: 72px;

  /* --- Z-INDEX --- */
  --z-base:    1;
  --z-above:   10;
  --z-header:  100;
  --z-overlay: 200;
}