/* ============================================================
   YASMINE BADAWI DESIGN — Foundations
   colors_and_type.css
   Warm editorial portfolio of a creative director / art director.
   High-contrast Didone display + neutral grotesque body.
   ============================================================ */

/* ---- Display webfonts (substitutes — see README font note) ----
   System display: Syne (creative, contemporary, art/design-world face).
   Wordmark lockup keeps the high-contrast Didone: Bodoni Moda.
   Body is system Helvetica/Arial. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Syne:wght@400;500;600;700;800&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ---------- BASE COLOR PALETTE ---------- */
  /* Ink — near-black warm charcoal, the primary foreground */
  --ink:        #232220;
  --ink-soft:   #4A4744;   /* secondary text on light */
  --ink-mute:   #8A847C;   /* captions, meta, tertiary */

  /* Paper — warm off-whites, the default canvas */
  --paper:      #F3EDE4;   /* primary warm paper */
  --paper-2:    #FBF8F2;   /* lifted surface / near-white */
  --white:      #FFFFFF;

  /* Signature fields — full-bleed page backgrounds. */
  --wine:       #6C0F1E;   /* burgundy — deep hero field (cream text) */
  --wine-deep:  #520A16;   /* pressed / darker burgundy */
  --indigo:     #23395B;   /* twilight indigo — deep field (cream text) */
  --indigo-deep:#182A47;   /* pressed / darker indigo */

  /* Soft tint fields — light page backgrounds (ink text). */
  --petal:      #FADCE3;   /* petal frost — pale rose */
  --alice:      #DCECF9;   /* alice blue — pale blue */

  /* Warm gold accent — a small gilt touch beside the jewel fields */
  --gold:       #E0A52A;

  /* ---------- ACCENTS (gilt + soft tints beside the jewel fields) ---------- */
  --gold-accent:#E0A52A;   /* gilt — small luxe touches, rules, marks */
  --bone:       #E8DECE;   /* warm stone / sculpture cream */
  /* (petal frost & alice blue above double as tint accents) */
  --clay:       #C8704C;   /* terracotta — imagery gradients only */
  --sage:       #8C9479;   /* muted olive — imagery gradients only */
  --lilac:      #9A86A8;   /* watercolor mauve — imagery gradients only */

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  --fg-1:       var(--ink);
  --fg-2:       var(--ink-soft);
  --fg-3:       var(--ink-mute);
  --bg-1:       var(--paper);
  --bg-2:       var(--paper-2);
  --on-field:   var(--paper-2); /* light text on wine / indigo fields */
  --on-ink:     var(--paper-2); /* text on dark */

  /* ---------- LINES / BORDERS ---------- */
  --line:       rgba(35,34,32,0.16);  /* hairline rule on paper */
  --line-strong:rgba(35,34,32,0.42);
  --line-on-field: rgba(243,237,228,0.28); /* hairline on wine / indigo */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Syne', 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-wordmark: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif; /* lockup + italic flourishes */
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---------- TYPE SCALE (editorial, generous) ---------- */
  --fs-display: clamp(64px, 12vw, 168px); /* hero wordmark */
  --fs-h1:      clamp(44px, 7vw, 92px);
  --fs-h2:      clamp(32px, 4.4vw, 56px);
  --fs-h3:      28px;
  --fs-lead:    22px;   /* serif intro paragraphs */
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-meta:    11px;   /* tracked uppercase nav / labels */

  /* ---------- TRACKING ---------- */
  --track-meta: 0.18em;  /* the tiny uppercase nav look */
  --track-label:0.12em;
  --track-tight:-0.01em;

  /* ---------- SPACING (base unit 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---------- RADII ---------- */
  /* Brand is square/editorial. Pills are the ONE exception (nav active, tags). */
  --r-none: 0px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* Used sparingly — floating glass panels in the gallery. */
  --shadow-glass: 0 30px 80px -30px rgba(35,34,32,0.45);
  --shadow-soft:  0 12px 40px -20px rgba(35,34,32,0.30);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle, expensive ease-out */
  --dur:  0.5s;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES (opt-in via class)
   ============================================================ */
.yb-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}
.yb-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.0;  letter-spacing: var(--track-tight); color: var(--fg-1); }
.yb-h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.05; color: var(--fg-1); }
.yb-h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.15; color: var(--fg-1); }

.yb-lead {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
}
.yb-italic { font-family: var(--font-wordmark); font-style: italic; font-weight: 400; }

.yb-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-2);
}
.yb-small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }

/* The signature tiny tracked uppercase — nav, labels, meta */
.yb-meta {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--fg-1);
}
.yb-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-1);
}