/* Generated from DESIGN.md — do not edit raw values here. Edit DESIGN.md first. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,600;9..40,700;9..40,900&family=Space+Mono:wght@400;700&display=swap');

:root {

  /* === COLOR === */

  /* Navy family */
  --navy:        #0a1530;
  --navy-2:      #14204a;
  --navy-ink:    #060d22;

  /* Paper family */
  --paper:       #faf7f0;
  --paper-2:     #f0ebe0;
  --paper-3:     #d4cfc0;

  /* Surface */
  --white:       #ffffff;

  /* Slate family */
  --slate:       #6b7a8d;
  --slate-2:     #8a96a6;

  /* Accent (10% rule — the single brand accent, per DESIGN.md).
     Historically referenced across admin/operators as var(--orange) with a
     #ff5a1f fallback; defining it here makes the bare references resolve to the
     intended accent instead of inheriting. Fans only ever used the fallback, so
     this is a no-op there. */
  --orange:      #ff5a1f;

  /* Semantic */
  --success:     #2f7d4f;
  --warning:     #b8770a;
  --danger:      #b3311f;

  /* Map alias */
  --map-red:     var(--danger);

  /* === TYPOGRAPHY === */

  --font-display: 'Arial Black', Arial, sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-sans:    var(--font-body);  /* alias — referenced across admin/operators */

  /* Scale */
  --text-nano:  9px;
  --text-micro: 10px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  32px;
  --text-3xl:  clamp(38px, 5vw, 64px);

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  600;
  --fw-bold:    700;
  --fw-display: 900;

  /* Line-heights */
  --lh-display:  1.06;
  --lh-heading:  1.2;
  --lh-body:     1.6;
  --lh-price:    1.0;

  /* === SPACING === */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;

  /* === RADII === */

  --radius-sm:   7px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 100px;

  /* === SHADOW === */

  --shadow-sm: 0 2px 4px rgba(10,21,48,.08);
  --shadow-md: 0 8px 24px rgba(10,21,48,.12);
  --shadow-lg: 0 12px 40px rgba(10,21,48,.18);
  --shadow-xl: 0 24px 80px rgba(0,0,0,.30);
}

/* === FONT-SIZE UTILITIES === */

.text-nano  { font-size: var(--text-nano); }
.text-micro { font-size: var(--text-micro); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

/* === FONT-FAMILY UTILITIES === */

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

/* === FONT-WEIGHT UTILITIES === */

.fw-regular { font-weight: var(--fw-regular); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-bold    { font-weight: var(--fw-bold); }
.fw-display { font-weight: var(--fw-display); }

/* === COLOR UTILITIES === */

.color-navy    { color: var(--navy); }
.color-navy-ink { color: var(--navy-ink); }
.color-slate   { color: var(--slate); }
.color-slate-2 { color: var(--slate-2); }
.color-success { color: var(--success); }
.color-warning { color: var(--warning); }
.color-danger  { color: var(--danger); }

/* === BACKGROUND UTILITIES === */

.bg-paper   { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-white   { background: var(--white); }
.bg-navy    { background: var(--navy); }

/* === SEMANTIC ROLE CLASSES === */

/* Eyebrow: mono xs 700 uppercase +2px tracking, slate */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--slate);
  line-height: var(--lh-heading);
}

/* Label: body xs 700 uppercase +0.6px tracking, slate */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--slate);
  line-height: var(--lh-heading);
}

/* Price inline: mono xl 700 */
.price-xl {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-price);
  color: var(--navy);
}

/* Price modal/hero: mono 2xl 700 */
.price-2xl {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-price);
  color: var(--navy);
}

/* Hero H1: display 3xl 900, -2.5px tracking */
.h1-hero {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--fw-display);
  letter-spacing: -2.5px;
  line-height: var(--lh-display);
}

/* Section H2: body 2xl 700, -1.2px tracking */
.h2-section {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: -1.2px;
  line-height: var(--lh-heading);
}

/* Card H3: body xl 700, -0.3px tracking */
.h3-card {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.3px;
  line-height: var(--lh-heading);
}

/* Subhead: body lg 700, -0.2px tracking */
.h-subhead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.2px;
  line-height: var(--lh-heading);
}