/* ============================================================
   Pan Sobao Deli — Colors & Type tokens
   ============================================================ */

:root {
  /* ---------- BRAND COLOR — Puerto Rican flag core ---------- */
  --psd-red:        #D7141A;
  --psd-red-deep:   #A60F14;
  --psd-blue:       #0050A4;
  --psd-blue-deep:  #003972;
  --psd-white:      #FFFFFF;

  /* ---------- BRAND COLOR — Bread family ---------- */
  --psd-crust:      #C98A4B;
  --psd-crust-deep: #7A3E12;
  --psd-crumb:      #F4D9A8;

  /* ---------- SURFACE / NEUTRAL ---------- */
  --psd-cream:        #FFF8EC;
  --psd-cream-raised: #FFFDF6;
  --psd-cream-sunk:   #F5ECD7;
  --psd-ink:          #1C140C;
  --psd-ink-2:        #4A3B2C;
  --psd-ink-3:        #8A7860;
  --psd-hair:         rgba(28, 20, 12, 0.12);

  /* ---------- SEMANTIC ---------- */
  --psd-success:    #2E8540;
  --psd-warning:    #E0A21A;
  --psd-danger:     var(--psd-red);

  /* ---------- TYPOGRAPHY — families ---------- */
  --psd-font-display: 'Alfa Slab One', 'Rockwell', Georgia, serif;
  --psd-font-script:  'Pacifico', 'Brush Script MT', cursive;
  --psd-font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---------- TYPOGRAPHY — scale ---------- */
  --psd-fs-hero:    clamp(48px, 7vw, 96px);
  --psd-fs-h1:      clamp(36px, 5vw, 64px);
  --psd-fs-h2:      clamp(28px, 3.5vw, 44px);
  --psd-fs-h3:      24px;
  --psd-fs-h4:      20px;
  --psd-fs-body:    16px;
  --psd-fs-body-lg: 18px;
  --psd-fs-caption: 13px;
  --psd-fs-price:   22px;

  --psd-lh-tight:   1.05;
  --psd-lh-snug:    1.2;
  --psd-lh-normal:  1.5;
  --psd-lh-loose:   1.7;

  --psd-track-display: -0.01em;
  --psd-track-caps:    0.06em;

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

  /* ---------- RADIUS ---------- */
  --psd-r-sm:   6px;
  --psd-r-md:   12px;
  --psd-r-lg:   20px;
  --psd-r-pill: 999px;

  /* ---------- SHADOW ---------- */
  --psd-shadow-sm: 0 1px 2px rgba(28, 20, 12, 0.08);
  --psd-shadow-md: 0 6px 18px rgba(28, 20, 12, 0.10);
  --psd-shadow-lg: 0 18px 40px rgba(28, 20, 12, 0.14);

  /* ---------- MOTION ---------- */
  --psd-ease:      cubic-bezier(.2, .7, .2, 1);
  --psd-dur-fast:  160ms;
  --psd-dur-base:  260ms;
  --psd-dur-slow:  400ms;
}

/* ============================================================
   Semantic / role-level helpers
   ============================================================ */

.psd-display,
.psd-h-hero {
  font-family: var(--psd-font-display);
  font-size: var(--psd-fs-hero);
  line-height: var(--psd-lh-tight);
  letter-spacing: var(--psd-track-display);
  color: var(--psd-ink);
  text-transform: uppercase;
}

.psd-h1 {
  font-family: var(--psd-font-display);
  font-size: var(--psd-fs-h1);
  line-height: var(--psd-lh-tight);
  letter-spacing: var(--psd-track-display);
  text-transform: uppercase;
  color: var(--psd-ink);
}

.psd-h2 {
  font-family: var(--psd-font-display);
  font-size: var(--psd-fs-h2);
  line-height: var(--psd-lh-snug);
  text-transform: uppercase;
  color: var(--psd-ink);
}

.psd-h3 {
  font-family: var(--psd-font-body);
  font-weight: 800;
  font-size: var(--psd-fs-h3);
  line-height: var(--psd-lh-snug);
  color: var(--psd-ink);
}

.psd-h4 {
  font-family: var(--psd-font-body);
  font-weight: 700;
  font-size: var(--psd-fs-h4);
  line-height: var(--psd-lh-snug);
  color: var(--psd-ink);
}

.psd-script {
  font-family: var(--psd-font-script);
  font-weight: 400;
}

.psd-body {
  font-family: var(--psd-font-body);
  font-weight: 400;
  font-size: var(--psd-fs-body);
  line-height: var(--psd-lh-normal);
  color: var(--psd-ink-2);
}

.psd-body-lg {
  font-family: var(--psd-font-body);
  font-weight: 400;
  font-size: var(--psd-fs-body-lg);
  line-height: var(--psd-lh-normal);
  color: var(--psd-ink-2);
}

.psd-caption {
  font-family: var(--psd-font-body);
  font-weight: 600;
  font-size: var(--psd-fs-caption);
  line-height: var(--psd-lh-snug);
  letter-spacing: var(--psd-track-caps);
  text-transform: uppercase;
  color: var(--psd-ink-3);
}

.psd-price {
  font-family: var(--psd-font-body);
  font-weight: 900;
  font-size: var(--psd-fs-price);
  color: var(--psd-red);
  font-variant-numeric: tabular-nums;
}