/* ============================================
   Zamon Design System — Colors & Type
   ============================================ */

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

:root {
  /* ---------- Brand colors ---------- */
  --zamon-navy:   #101C32;   /* Primary brand — deep navy */
  --zamon-lime:   #B8E94A;   /* Accent — energetic lime green */
  --zamon-cream:  #F7F7F2;   /* Surface — warm off-white */
  --zamon-slate:  #5C6470;   /* Secondary text / muted */

  /* ---------- Extended palette (derived for UI) ---------- */
  --navy-900: #0A1224;
  --navy-800: #101C32;       /* brand */
  --navy-700: #1A2742;
  --navy-600: #25345A;
  --navy-500: #364778;
  --navy-400: #5A6A95;

  --lime-700: #8AB627;
  --lime-600: #A6D438;
  --lime-500: #B8E94A;       /* brand */
  --lime-400: #C7EE6B;
  --lime-300: #DDF49C;
  --lime-100: #F1FBD9;

  --slate-900: #2A3038;
  --slate-700: #44495A;
  --slate-600: #5C6470;      /* brand */
  --slate-500: #7A8290;
  --slate-400: #9CA3AE;
  --slate-300: #C3C8CF;
  --slate-200: #E1E4E8;
  --slate-100: #EFF1F3;

  --cream-50:  #FFFFFF;
  --cream-100: #F7F7F2;      /* brand */
  --cream-200: #EDEDE6;

  /* ---------- Semantic colors ---------- */
  --bg:          var(--cream-100);
  --bg-elevated: #FFFFFF;
  --bg-inverse:  var(--navy-800);

  --fg:          var(--navy-800);
  --fg-muted:    var(--slate-600);
  --fg-subtle:   var(--slate-500);
  --fg-inverse:  var(--cream-100);

  --border:      var(--slate-200);
  --border-strong: var(--slate-300);

  --accent:      var(--lime-500);
  --accent-hover: var(--lime-600);
  --accent-fg:   var(--navy-800);     /* text on lime */

  --success:     #2EA34F;
  --warning:     #E7A23A;
  --danger:      #DC4848;
  --info:        var(--navy-600);

  /* ---------- Type ---------- */
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Weights — Montserrat */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extra: 800;

  /* Sizes (rem, 1rem = 16px) */
  --t-display-1: 4.5rem;   /* 72 */
  --t-display-2: 3.5rem;   /* 56 */
  --t-h1: 2.5rem;          /* 40 */
  --t-h2: 2rem;            /* 32 */
  --t-h3: 1.5rem;          /* 24 */
  --t-h4: 1.25rem;         /* 20 */
  --t-h5: 1.125rem;        /* 18 */
  --t-body: 1rem;          /* 16 */
  --t-small: 0.875rem;     /* 14 */
  --t-caption: 0.75rem;    /* 12 */
  --t-eyebrow: 0.6875rem;  /* 11 */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.65;

  /* Letter-spacing — geometric sans wants generous tracking on caps */
  --ls-eyebrow: 0.18em;    /* ALL-CAPS eyebrows / pill labels */
  --ls-display: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;

  /* ---------- Spacing ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(16,28,50,0.04);
  --shadow-sm: 0 2px 6px rgba(16,28,50,0.06), 0 1px 2px rgba(16,28,50,0.04);
  --shadow-md: 0 6px 16px rgba(16,28,50,0.08), 0 2px 4px rgba(16,28,50,0.04);
  --shadow-lg: 0 20px 40px rgba(16,28,50,0.12), 0 4px 12px rgba(16,28,50,0.06);
  --shadow-focus: 0 0 0 4px rgba(184,233,74,0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
}

/* ============================================
   Semantic typography classes
   ============================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-1, .display-2, h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
}

.display-1 {
  font-size: var(--t-display-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.display-2 {
  font-size: var(--t-display-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
h1, .h1 { font-size: var(--t-h1); font-weight: var(--fw-bold);    line-height: var(--lh-snug); letter-spacing: var(--ls-display); }
h2, .h2 { font-size: var(--t-h2); font-weight: var(--fw-bold);    line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--t-h3); font-weight: var(--fw-semibold);line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--t-h4); font-weight: var(--fw-semibold);line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--t-h5); font-weight: var(--fw-semibold);line-height: var(--lh-normal); }

p, .body { font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--fg); margin: 0; }
.small   { font-size: var(--t-small); line-height: var(--lh-relaxed); color: var(--fg-muted); }
.caption { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--fg-subtle); }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

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