/* ============================================================
   SIP C0DE — Design Tokens
   Single source of truth for colors, type, spacing, radii, shadows.
   Imported by design-system.html and (later) the shop.
   ============================================================ */

:root {
  /* ---------- Brand neutrals ----------
     ink* tokens are FIXED across themes — they describe the brand's
     "always dark" surfaces (nav, footer, dark heroes). Page surface
     tokens (bg, off, line, body, mute, heading) swap with theme.    */
  --c-ink:        #0A0A0A;   /* fixed near-black */
  --c-ink-2:      #161616;   /* fixed card surfaces on dark */
  --c-ink-3:      #262626;   /* fixed borders on dark */

  /* Page surface (swaps in dark theme) */
  --c-bg:         #FFFFFF;   /* canvas */
  --c-off:        #F5F5F5;   /* off-white surface */
  --c-elevated:   #FFFFFF;   /* cards / inputs (raised above bg) */
  --c-line:       #E5E5E5;   /* hairlines */
  --c-heading:    #0A0A0A;   /* h1–h4 */
  --c-body:       #333333;   /* default body text */
  --c-mute:       #666666;   /* secondary text */

  /* ---------- Variety palette (hex values agreed with Adrian) ---------- */
  /* Reds / dark grapes */
  --c-amaranth:   #B0233C;   /* Fetească Neagră — roșu amarant */
  --c-coral-deep: #E55B4B;   /* Rară Neagră — coral profund */
  --c-bordeaux:   #6E1423;   /* Merlot — bordo */
  --c-burgundy:   #A61E4D;   /* Cabernet Sauvignon — burgundy */
  --c-ruby:       #C5283D;   /* Saperavi — rubiniu intens */

  /* Whites / aromatics */
  --c-cream:      #F1E3C2;   /* Fetească Albă — crem luminos */
  --c-straw:      #E8D26B;   /* Regală — galben pai */
  --c-gold:       #D4A537;   /* Chardonnay — galben auriu */
  --c-sage:       #9CAF88;   /* Sauvignon Blanc — verde salvie */
  --c-turquoise:  #1B9E9D;   /* Viorica — turcoaz */
  --c-mint:       #A8D5BA;   /* Traminer — mentă */

  /* Pink */
  --c-rose:       #F77F88;   /* Rosé — roz corai */

  /* Brand accent (Adrian signature, batch numbers) */
  --c-signature:  #C41E3A;

  /* ---------- Typography ---------- */
  --f-display:    "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:       "Inter", system-ui, -apple-system, sans-serif;
  --f-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (rem-based) */
  --t-xs:    0.75rem;   /* 12 */
  --t-sm:    0.875rem;  /* 14 */
  --t-base:  1rem;      /* 16 */
  --t-lg:    1.125rem;  /* 18 */
  --t-xl:    1.375rem;  /* 22 */
  --t-2xl:   1.75rem;   /* 28 */
  --t-3xl:   2.25rem;   /* 36 */
  --t-4xl:   3rem;      /* 48 */
  --t-5xl:   4.5rem;    /* 72 */

  /* Tracking */
  --tr-tight:  -0.01em;
  --tr-normal: 0;
  --tr-wide:   0.04em;
  --tr-mono:   0.18em;   /* used for SIP C0DE wordmark */
  --tr-eyebrow:0.30em;   /* eyebrow / mono labels */

  /* ---------- Spacing (8px scale) ---------- */
  --s-1: 0.5rem;    /* 8  */
  --s-2: 1rem;      /* 16 */
  --s-3: 1.5rem;    /* 24 */
  --s-4: 2rem;      /* 32 */
  --s-5: 3rem;      /* 48 */
  --s-6: 4rem;      /* 64 */
  --s-7: 6rem;      /* 96 */

  /* ---------- Radii (kept minimal — modern + squared) ---------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---------- Shadows (Bold & Shadowed) ---------- */
  --sh-sm:  0 2px 8px   rgba(0,0,0,.08);
  --sh-md:  0 8px 24px  rgba(0,0,0,.12);
  --sh-lg:  0 16px 40px rgba(0,0,0,.18);
  --sh-cta: 0 6px 20px  rgba(230,57,70,.45);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --nav-h:     72px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 150ms;
  --t-med:  250ms;
}

/* ---------- Dark theme override ----------
   Only page-surface tokens flip. Brand "ink" surfaces and variety
   colors stay constant — identity must read the same across themes. */
[data-theme="dark"] {
  --c-bg:       #0A0A0A;
  --c-off:      #161616;
  --c-elevated: #1A1A1A;
  --c-line:     #2A2A2A;
  --c-heading:  #FAFAFA;
  --c-body:     #D4D4D4;
  --c-mute:     #8A8A8A;

  --sh-sm:  0 2px 8px   rgba(0,0,0,.35);
  --sh-md:  0 8px 24px  rgba(0,0,0,.45);
  --sh-lg:  0 16px 40px rgba(0,0,0,.55);
}

/* Smooth theme transition */
html { color-scheme: light; transition: background-color var(--t-med) var(--ease); }
html[data-theme="dark"] { color-scheme: dark; }

/* Base resets layered with tokens */
html, body { margin:0; padding:0; }
body {
  font-family: var(--f-body);
  color: var(--c-body);
  background: var(--c-bg);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
h1,h2,h3,h4 { font-family: var(--f-display); color: var(--c-heading); margin:0; line-height:1.15; font-weight:500; }
.mono { font-family: var(--f-mono); letter-spacing: var(--tr-wide); }

/* Wordmark — canonical treatment */
.wordmark {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: var(--tr-mono);
  text-transform: none;
}