/* AMMO marketing site — design tokens
 * 2026-05-07 REBUILD: cream-dominant, sans-only, single accent.
 * Restraint > atmospherics. Whitespace > glow.
 */

@font-face {
  font-family: "General Sans";
  src: url("./fonts/GeneralSans-Variable.ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("./fonts/GeneralSans-VariableItalic.ttf") format("truetype-variations");
  font-style: italic;
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Grounds + ink */
  --cream:    #F2EEE6;   /* default surface */
  --paper:    #FAF7F1;   /* slightly lighter surface for cards */
  --ink:      #14110D;   /* primary ink — warm near-black */
  --ink-2:    #4A453E;   /* secondary copy */
  --ink-3:    #807A71;   /* labels, eyebrows */
  --ash:      #B5AEA3;   /* footnotes */
  --line:     rgba(20,17,13,0.10);
  --line-2:   rgba(20,17,13,0.18);

  /* Dark surfaces — used sparingly */
  --bg:       #14110D;
  --bg-2:     #1C1813;
  --bg-3:     #25201A;
  --ink-dark: #F2EEE6;
  --ink-2-dark: #B5AEA3;
  --ink-3-dark: #807A71;
  --line-dark: rgba(242,238,230,0.10);
  --line-2-dark: rgba(242,238,230,0.18);

  /* Brand palette — violet + mint, restored.
   * --accent is the primary brand ink (violet) used as the M in AMMO,
   * the score arc, eyebrow dots, link underlines. Use sparingly.
   * --mint is the positive/win semantic. */
  --accent:        #7B61FF;            /* violet */
  --accent-soft:   rgba(123,97,255,0.08);
  --accent-line:   rgba(123,97,255,0.22);
  --accent-hi:     rgba(123,97,255,0.18);

  --mint:          #4DE5A8;
  --mint-ink:      #1F8A5B;             /* readable mint on cream */
  --mint-soft:     rgba(77,229,168,0.16);

  --alert:         #B33A2E;

  /* Back-compat aliases — used inside the iPhone screen mockups
   * which are dark-on-dark. Map to the brand system. */
  --violet:        var(--accent);
  --violet-hi:     var(--accent-hi);
  --violet-lo:     var(--accent-soft);
  --smoke:         var(--ink-3-dark);
  --s1:            #1C1813;
  --s2:            #25201A;
  --s3:            #2E2922;
  --s4:            #38322A;
  --s5:            #423B33;
  --line-2:        var(--line-2-dark);

  /* Type families */
  --font-sans: "General Sans", "Söhne", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — smaller, more disciplined */
  --t-hero:    72px;   /* desktop hero */
  --t-h1:      40px;   /* section heads */
  --t-h2:      24px;
  --t-h3:      18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-eyebrow: 11px;

  /* Tracking */
  --tr-hero:    -0.035em;
  --tr-h1:      -0.025em;
  --tr-h2:      -0.015em;
  --tr-eyebrow: 0.16em;

  /* Layout */
  --pad-section:    120px;
  --pad-section-m:  72px;
  --max-w:          1180px;
  --gutter:         32px;

  /* Radii — modest */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Motion */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1.0);
  --d-fast: 150ms;
  --d-mid:  240ms;
  --d-slow: 480ms;
}

@media (max-width: 760px) {
  :root {
    --t-hero: 44px;
    --t-h1:   30px;
    --pad-section: var(--pad-section-m);
    --gutter: 20px;
  }
}