/* ============================================================
   A S Fashions — Design tokens
   Colors sampled from the brand-red wordmark (#BF1E2E).
   Everything else is extrapolated; hold for review.
   ============================================================ */

/* Brand fonts — finalized: Archivo (display) · Inter (body) · JetBrains Mono (numerics) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* -------- Brand core -------- */
  --brand-red:       #BF1E2E;   /* sampled from logo-red.png */
  --brand-red-ink:   #8F0E1C;   /* pressed / emphasis */
  --brand-red-tint:  #F7E3E5;   /* very light wash, use sparingly */

  --ink:             #0A0A0A;   /* near-black, warmer than #000 */
  --ink-soft:        #1A1A1A;   /* body text */
  --paper:           #FAF7F2;   /* warm off-white, default surface */
  --white:           #FFFFFF;

  /* -------- Neutral scale (warm grays) -------- */
  --n-900: #1A1A1A;
  --n-800: #2B2A27;
  --n-700: #3F3D38;
  --n-600: #5A574F;
  --n-500: #7A766B;
  --n-400: #9C978A;
  --n-300: #BDB9AE;
  --n-200: #E8E3DA;
  --n-100: #F2EFE9;
  --n-050: #F7F4EE;

  /* -------- Semantic foreground -------- */
  --fg-1: var(--ink);        /* primary text */
  --fg-2: var(--n-700);      /* body */
  --fg-3: var(--n-500);      /* secondary / metadata */
  --fg-4: var(--n-400);      /* disabled / placeholder */
  --fg-on-red: var(--paper); /* text on red */
  --fg-on-ink: var(--paper); /* text on black */

  /* -------- Semantic background -------- */
  --bg:         var(--paper);
  --bg-card:    var(--white);
  --bg-inset:   var(--n-050);
  --bg-inverse: var(--ink);
  --bg-accent:  var(--brand-red);

  /* -------- Borders -------- */
  --border:        var(--n-200);
  --border-strong: var(--ink);
  --border-red:    var(--brand-red);

  /* -------- Semantic status (extrapolated, conservative) -------- */
  --success: #2F6B3A;   /* muted forest, stays warm */
  --warning: #B8791F;   /* ochre */
  --danger:  var(--brand-red);
  --info:    #2B4E6B;   /* slate blue */

  /* -------- Typography — families -------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* -------- Typography — scale -------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;

  /* -------- Type — line heights -------- */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* -------- Type — letter spacing -------- */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.04em;
  --track-caps:   0.08em;  /* for ALL-CAPS micro labels */

  /* -------- Spacing -------- */
  --space-0:  0;
  --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;
  --space-10: 128px;

  /* -------- Radii -------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 999px; /* reserved; rarely used */

  /* -------- Shadows (print-native, minimal) -------- */
  --shadow-paper: 0 1px 0 rgba(10,10,10,0.04), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-lift:  0 4px 16px rgba(10,10,10,0.06);
  --shadow-deep:  0 12px 32px rgba(10,10,10,0.10);

  /* -------- Motion -------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-both: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  140ms;
  --dur-base:  220ms;
  --dur-slow:  360ms;

  /* -------- Layout -------- */
  --container-sm:  640px;
  --container-md:  960px;
  --container-lg:  1200px;
  --gutter:        24px;
}

/* ============================================================
   Semantic type styles — apply directly to elements
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg); }
body { font-size: var(--text-md); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.display,
.h0 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

p, .p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

small, .small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.eyebrow,
.tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

a {
  color: var(--brand-red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-red-ink); }