/* ============================================================
   SOU.SOU.RO — Core Design Tokens: Color & Type
   "A store. A mood. A point of view."
   Import this file anywhere you need the brand foundations.
   ============================================================ */

/* ---------- Brand display font (logo / wordmark) ---------- */
@font-face {
  font-family: "Pizza Spritz";
  src: url("../fonts/GBPizza_SpritzLight.woff2") format("woff2"),
       url("../fonts/GBPizzaSpritzLight.ttf") format("truetype");
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: "Pizza Spritz";
  src: url("../fonts/GBPizza_SpritzBold.woff2") format("woff2"),
       url("../fonts/GBPizzaSpritzBold.ttf") format("truetype");
  font-weight: 600 700;
  font-display: swap;
}

/* ---------- Utility web font ----------
   Hanken Grotesk — clean grotesque used ONLY for legibility-critical
   micro-text: spaced spec labels, prices, captions, fine print. This
   mirrors the clean sans on the real candle labels. Everything else is
   set in the brand font (Pizza Spritz), which supports Greek + Latin.
   Loaded from Google Fonts; mirror locally for production.            */

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     Pastel, warm, sophisticated. Orchid is the hero (drawn from the
     logo dots); occasion accents echo the product lines.
     ============================================================ */

  /* Orchid / Mauve — PRIMARY brand color */
  --orchid-700: #7E4A6E;
  --orchid-600: #9A5A86;
  --orchid-500: #B56DA0;   /* primary */
  --orchid-400: #C98BB6;
  --orchid-300: #DFB1D0;
  --orchid-200: #EED4E6;
  --orchid-100: #F8ECF4;

  /* Blush / Coral — "love & occasion" accent (Valentine line) */
  --blush-600: #D96A5E;
  --blush-500: #E8857C;
  --blush-300: #F4C3BD;
  --blush-100: #FBE7E3;

  /* Lemon — "citrus & zest" accent */
  --lemon-600: #D7A93C;
  --lemon-500: #EBC15A;
  --lemon-300: #F4E0A0;
  --lemon-100: #FBF3D8;

  /* Sage — fresh / herbal accent (the leaf green in the labels) */
  --sage-600: #7E9A75;
  --sage-500: #A1BD97;
  --sage-300: #CBDCC3;
  --sage-100: #ECF2E7;

  /* Terracotta / Clay — warm photographic neutral */
  --clay-600: #C07A52;
  --clay-500: #D49873;
  --clay-300: #E8C2A8;
  --clay-100: #F6E7DC;

  /* Warm neutrals (ink → cream) */
  --ink-900: #2A2622;     /* primary text — warm near-black */
  --ink-700: #4A433C;
  --ink-500: #6B635C;     /* secondary text */
  --ink-400: #948B82;     /* muted / captions */
  --line-300: #E7DFD4;    /* hairline borders */
  --line-200: #F0EAE0;    /* subtle dividers */
  --cream-200: #F4EEE4;   /* tinted surface */
  --cream-100: #FBF7F1;   /* page background */
  --paper:     #FFFDF9;   /* card / surface */
  --white:     #FFFFFF;

  /* ============================================================
     COLOR — SEMANTIC TOKENS
     ============================================================ */
  --bg:            var(--cream-100);
  --bg-tint:       var(--cream-200);
  --surface:       var(--paper);
  --surface-2:     var(--white);

  --fg1:           var(--ink-900);   /* headings / primary */
  --fg2:           var(--ink-500);   /* body secondary */
  --fg3:           var(--ink-400);   /* muted / meta */
  --fg-inverse:    var(--cream-100);

  --brand:         var(--orchid-500);
  --brand-strong:  var(--orchid-600);
  --brand-soft:    var(--orchid-100);
  --on-brand:      #FFFFFF;
  --accent-dot:    var(--orchid-500); /* the · between sou·sou·ro */

  --border:        var(--line-300);
  --border-soft:   var(--line-200);

  --price:         var(--ink-900);
  --sale:          var(--blush-600);
  --success:       var(--sage-600);
  --focus-ring:    color-mix(in oklch, var(--orchid-500) 55%, white);

  /* ============================================================
     TYPE — FAMILIES
     The brand font (Pizza Spritz) is the PRIMARY voice for the whole
     site — wordmark, headings AND body. It supports Greek + Latin.
     Hanken Grotesk is a utility face for spec labels, prices, captions.
     ============================================================ */
  --font-brand:   "Pizza Spritz", "Hanken Grotesk", sans-serif; /* wordmark */
  --font-display: "Pizza Spritz", "Hanken Grotesk", sans-serif; /* headings */
  --font-sans:    "Pizza Spritz", "Hanken Grotesk", system-ui, sans-serif; /* body + UI */
  --font-util:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;  /* spec / price / caption */
  /* Back-compat alias (was the serif slot) */
  --font-serif:   var(--font-display);

  /* ============================================================
     TYPE — SCALE (semantic)
     Display / headings / body = Pizza Spritz. Micro-labels = util sans.
     Pizza Light = 400, Pizza Bold = 700. Body runs a touch looser for
     comfortable reading in the hand-drawn face. Mobile-first sizes.
     ============================================================ */
  --display:        700 clamp(2.6rem, 6vw, 4.5rem)/1.02 var(--font-display);
  --h1:             700 clamp(2.1rem, 4.5vw, 3.2rem)/1.06 var(--font-display);
  --h2:             700 clamp(1.6rem, 3vw, 2.3rem)/1.12 var(--font-display);
  --h3:             700 1.375rem/1.2 var(--font-display);
  --h4:             700 1.125rem/1.3 var(--font-display);
  --body-lg:        400 1.1875rem/1.65 var(--font-sans);
  --body:           400 1.0625rem/1.65 var(--font-sans);
  --body-sm:        400 1rem/1.6 var(--font-sans);
  --caption:        500 0.8125rem/1.4 var(--font-util);
  /* Eyebrow / spec label — spaced caps in the utility sans (label tone) */
  --eyebrow:        600 0.75rem/1.3 var(--font-util);
  --eyebrow-spacing: 0.18em;
  --price-type:     600 1.0625rem/1.2 var(--font-util);

  /* ============================================================
     SPACING / RADIUS / SHADOW / MOTION
     ============================================================ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(42,38,34,0.05);
  --shadow-sm: 0 2px 8px rgba(42,38,34,0.06);
  --shadow-md: 0 8px 24px rgba(42,38,34,0.08);
  --shadow-lg: 0 18px 48px rgba(42,38,34,0.12);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   ELEMENT DEFAULTS (optional convenience layer)
   ============================================================ */
.ssr-type-display { font: var(--display); color: var(--fg1); letter-spacing: -0.01em; }
.ssr-type-h1 { font: var(--h1); color: var(--fg1); letter-spacing: -0.01em; }
.ssr-type-h2 { font: var(--h2); color: var(--fg1); }
.ssr-type-h3 { font: var(--h3); color: var(--fg1); }
.ssr-type-body { font: var(--body); color: var(--fg2); }
.ssr-type-eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--fg3);
}

/* Brand wordmark helper — lowercase, dotted */
.ssr-wordmark {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg1);
  text-transform: lowercase;
}
.ssr-wordmark .dot { color: var(--accent-dot); }