/* =============================================================
   THE GREAT WHITE SHIRT · v2.1 "PURE"
   Pure black & white. Brand kit typography.
   Cotton & silk · Men & women · Five sizes.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,700;1,6..96,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Manrope:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ====== PALETTE — Director-grade contrast (System A: warm-neutral) ====== */
  --gws-ink:        #0A0A0A;   /* body text — 19.5:1 contrast (AAA) */
  --gws-ink-soft:   #1F1F1F;   /* secondary headlines — 14.0:1 (AAA) */
  --gws-paper:      #F2F0EB;   /* slightly deeper warm-neutral; less glare */
  --gws-paper-2:    #E8E5DE;   /* section breaks, cards */
  --gws-paper-pure: #FFFFFF;   /* button hovers, blur surfaces only */
  --gws-graphite:   #3A3A3A;   /* meta + captions — 10.4:1 (AAA) — was #4A4A4A */
  --gws-graphite-2: #5C5C5C;   /* lightest acceptable secondary — 6.5:1 (AA) */
  --gws-mist:       #6E6E6E;   /* divider color (was #888888 — bumped) */

  /* derived */
  --gws-hairline:        rgba(0, 0, 0, 0.20);   /* 1px dividers */
  --gws-hairline-strong: rgba(0, 0, 0, 0.40);   /* heavy dividers */
  --gws-rule:            rgba(0, 0, 0, 0.85);   /* page rules */
  --gws-shade:           rgba(0, 0, 0, 0.06);   /* hover backgrounds */
  --gws-shade-deep:      rgba(0, 0, 0, 0.12);
  --gws-glow:            rgba(255, 255, 255, 0.85);

  /* inverse — for dark sections (System C) */
  --gws-paper-inv:    rgba(255, 255, 255, 0.96);  /* primary text on dark */
  --gws-graphite-inv: rgba(255, 255, 255, 0.78);  /* meta on dark — was 0.55 (failed AA) */
  --gws-hairline-inv: rgba(255, 255, 255, 0.22);  /* dividers on dark — was 0.14 */
  --gws-eyebrow-inv:  rgba(255, 255, 255, 0.72);  /* eyebrow tags on dark */

  /* ====== FONTS — official brand kit ====== */
  --gws-display:  'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --gws-italic:   'Cormorant Garamond', Georgia, serif;
  --gws-body:     'Manrope', system-ui, -apple-system, sans-serif;
  --gws-mono:     'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ====== TYPE SCALE ====== */
  --gws-text-xxs: 11px;
  --gws-text-xs:  12px;
  --gws-text-sm:  13px;
  --gws-text-md:  15px;
  --gws-text-base:16px;
  --gws-text-lg:  18px;
  --gws-text-xl:  22px;
  --gws-text-2xl: 32px;
  --gws-text-3xl: 48px;
  --gws-text-4xl: 72px;
  --gws-text-5xl: 120px;
  --gws-text-6xl: 180px;

  --gws-tracking-tightest: -0.045em;
  --gws-tracking-tighter:  -0.03em;
  --gws-tracking-tight:    -0.02em;
  --gws-tracking-normal:    0;
  --gws-tracking-wide:      0.04em;
  --gws-tracking-wider:     0.18em;
  --gws-tracking-widest:    0.32em;

  /* ====== SPACING ====== */
  --gws-1: 4px;
  --gws-2: 8px;
  --gws-3: 12px;
  --gws-4: 16px;
  --gws-5: 24px;
  --gws-6: 32px;
  --gws-7: 48px;
  --gws-8: 64px;
  --gws-9: 96px;
  --gws-10: 128px;
  --gws-11: 192px;

  /* ====== RADIUS — mostly square ====== */
  --gws-radius-none: 0;
  --gws-radius-sm:   2px;
  --gws-radius-md:   4px;

  /* ====== MOTION ====== */
  --gws-dur-fast:  180ms;
  --gws-dur-base:  320ms;
  --gws-dur-slow:  640ms;
  --gws-dur-rise:  1100ms;
  --gws-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);

  /* layout widths */
  --gws-wrap:        1320px;
  --gws-wrap-tight:  1080px;
  --gws-wrap-narrow: 720px;
}

/* =============================================================
   BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--gws-paper);
  color: var(--gws-ink);
  font-family: var(--gws-body);
  font-weight: 400;
  font-size: var(--gws-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; padding: 0; }

::selection { background: var(--gws-ink); color: var(--gws-paper); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}