/* ============================================================
   NAMS Network — Design Tokens
   Colors, typography, spacing, radii, shadow.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -------- Brand Color -------- */
  --nams-maroon:        #680000;  /* primary, extracted from logo */
  --nams-maroon-deep:   #4a0000;  /* pressed / shadow */
  --nams-maroon-rich:   #8b1414;  /* hover / emphasis */
  --nams-maroon-soft:   #b94747;  /* subtle red tint */
  --nams-maroon-wash:   #f7eaea;  /* backgrounds */

  /* -------- Neutral Scale (warm-leaning ink) -------- */
  --nams-ink:           #0a0a0a;  /* near black */
  --nams-ink-2:         #1c1a18;
  --nams-graphite:      #2e2a26;
  --nams-stone:         #54504a;
  --nams-mist:          #8a857d;
  --nams-fog:           #b9b3aa;
  --nams-cream:         #ecdcd1;  /* (placeholder — warm tint, may revise) */
  --nams-parchment:     #f3ecdf;
  --nams-paper:         #faf7f1;  /* warm off-white */
  --nams-snow:          #ffffff;

  /* -------- Semantic Colors -------- */
  --color-bg:           var(--nams-paper);
  --color-bg-elev:      var(--nams-snow);
  --color-bg-inverse:   var(--nams-ink);
  --color-surface:      var(--nams-snow);
  --color-surface-2:    var(--nams-parchment);

  --color-fg:           var(--nams-ink);
  --color-fg-1:         var(--nams-ink);
  --color-fg-2:         var(--nams-graphite);
  --color-fg-3:         var(--nams-stone);
  --color-fg-mute:      var(--nams-mist);
  --color-fg-inverse:   var(--nams-snow);

  --color-border:       #e3ddd1;
  --color-border-strong:#c9c1b1;
  --color-divider:      #ece5d6;

  --color-accent:       var(--nams-maroon);
  --color-accent-hover: var(--nams-maroon-rich);
  --color-accent-press: var(--nams-maroon-deep);
  --color-accent-bg:    var(--nams-maroon-wash);
  --color-on-accent:    var(--nams-snow);

  --color-success:      #2f6a3a;
  --color-warn:         #a8741f;
  --color-danger:       var(--nams-maroon-rich);
  --color-info:         #2f4a6a;

  /* -------- Type Families -------- */
  --font-display:  "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:     "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* -------- Type Scale -------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* -------- Line Heights -------- */
  --lh-tight:   1.05;  /* @kind font */
  --lh-snug:    1.2;   /* @kind font */
  --lh-normal:  1.4;   /* @kind font */
  --lh-relaxed: 1.6;   /* @kind font */

  /* -------- Tracking (letter-spacing) -------- */
  --tr-tight:    -0.02em;  /* @kind font */
  --tr-normal:    0;       /* @kind font */
  --tr-wide:     0.04em;   /* @kind font */
  --tr-wider:    0.1em;    /* @kind font */
  --tr-widest:   0.2em;    /* @kind font */

  /* -------- Weights -------- */
  --fw-light:    300;  /* @kind font */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-black:    900;  /* @kind font */

  /* -------- Spacing (4pt scale) -------- */
  --sp-0:  0;  /* @kind spacing */
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.25rem;   /* 20 */
  --sp-6:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-10: 2.5rem;    /* 40 */
  --sp-12: 3rem;      /* 48 */
  --sp-16: 4rem;      /* 64 */
  --sp-24: 6rem;      /* 96 */

  /* -------- Radius -------- */
  --r-0:   0;  /* @kind radius */
  --r-1:   2px;
  --r-2:   4px;       /* default — squared, heraldic */
  --r-3:   6px;
  --r-4:   8px;
  --r-pill: 999px;

  /* -------- Border -------- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;
  --rule: 1px solid var(--color-border);
  --rule-strong: 1px solid var(--color-border-strong);

  /* -------- Shadow (low/sober) -------- */
  --sh-1: 0 1px 0 rgba(20,16,10,0.04), 0 1px 2px rgba(20,16,10,0.05);
  --sh-2: 0 1px 2px rgba(20,16,10,0.06), 0 4px 12px rgba(20,16,10,0.06);
  --sh-3: 0 2px 4px rgba(20,16,10,0.07), 0 10px 30px rgba(20,16,10,0.08);
  --sh-inset: inset 0 0 0 1px rgba(20,16,10,0.06);

  /* -------- Motion -------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);  /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   400ms;  /* @kind other */
}

/* ============================================================
   Semantic Type Styles
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--color-fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--color-fg-1);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--color-fg-1);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--color-fg-1);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.t-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--color-fg-3);
}

.t-lede {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-2);
}

.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--color-fg-1);
}

.t-body-sm {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-fg-2);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--color-fg-3);
}

.t-code {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: 0.92em;
  background: var(--nams-parchment);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
  padding: 0.1em 0.4em;
}

.t-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--color-fg-1);
  font-style: italic;
}