/* Curtis Jack — campaign site stylesheet (generated: all design-system tokens inlined) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@500;600&display=swap');

/* ===== tokens/fonts.css ===== */
/* ============================================================
   Mission Curtis — Webfonts
   ------------------------------------------------------------
   SUBSTITUTION NOTE: No custom typefaces were provided, so the
   brand is built on Google Fonts. These are strong, civic,
   highly legible families that match the "confident, modern,
   clean sans" direction. Swap the @import + family vars in
   typography.css if licensed fonts are provided later.

     Display / headlines ...... Archivo  (grotesque, strong weights)
     Body / UI ................ Public Sans (designed for civic use)
     Mono / data labels ....... Spline Sans Mono
   ============================================================ */

/* ===== tokens/colors.css ===== */
/* ============================================================
   Mission Curtis — Color tokens
   Patriotic Canadian red, steady navy ink, clean civic neutrals.
   Base scales first, then semantic aliases.
   ============================================================ */

:root {
  /* ---- Brand red (primary) ---------------------------------- */
  --red-50:  #FFF1F2;
  --red-100: #FFE0E2;
  --red-200: #FCC2C6;
  --red-300: #F6979D;
  --red-400: #EC6068;
  --red-500: #DE2F39;
  --red-600: #C8102E;   /* PRIMARY — flag-adjacent confident red */
  --red-700: #A30C25;
  --red-800: #7E0C1F;
  --red-900: #5C0C19;

  /* ---- Navy (secondary / ink) ------------------------------- */
  --navy-50:  #F2F5FB;
  --navy-100: #E2E9F5;
  --navy-200: #C2D0E8;
  --navy-300: #93A9CF;
  --navy-400: #5C76A6;
  --navy-500: #34507F;
  --navy-600: #1E3866;
  --navy-700: #142A50;   /* deep institutional navy */
  --navy-800: #0E1F3C;
  --navy-900: #0A1629;   /* near-black ink */

  /* ---- Neutrals (cool-warm slate, bright & civic) ----------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FCFCFB;   /* page paper */
  --neutral-50:  #F7F8F7;
  --neutral-100: #EFF1F0;
  --neutral-200: #E2E5E4;
  --neutral-300: #CBD0CF;
  --neutral-400: #A3ABAA;
  --neutral-500: #79817F;
  --neutral-600: #565E5C;
  --neutral-700: #3D4442;
  --neutral-800: #262B2A;
  --neutral-900: #161918;

  /* ---- Warm sand (subtle support / section fills) ----------- */
  --sand-50:  #FAF6EF;
  --sand-100: #F2EADA;
  --sand-200: #E6D7BC;

  /* ---- Semantic status -------------------------------------- */
  --green-500: #1F8A4C;
  --green-600: #157A41;
  --amber-500: #C98A12;
  --amber-600: #A8720C;
  --blue-500:  #1F6FB2;

  /* =================== SEMANTIC ALIASES ===================== */
  /* Brand */
  --color-primary:        var(--red-600);
  --color-primary-hover:  var(--red-700);
  --color-primary-press:  var(--red-800);
  --color-primary-soft:   var(--red-50);
  --color-on-primary:     #FFFFFF;

  --color-ink:            var(--navy-900);
  --color-ink-soft:       var(--navy-700);
  --color-secondary:      var(--navy-700);

  /* Surfaces */
  --surface-page:         var(--neutral-25);
  --surface-card:         var(--neutral-0);
  --surface-raised:       var(--neutral-0);
  --surface-sunken:       var(--neutral-50);
  --surface-inverse:      var(--navy-900);
  --surface-accent:       var(--red-600);
  --surface-band:         var(--navy-800);   /* full-bleed dark section */
  --surface-sand:         var(--sand-50);

  /* Text */
  --text-strong:          var(--navy-900);
  --text-body:            var(--navy-800);
  --text-muted:           var(--neutral-600);
  --text-faint:           var(--neutral-500);
  --text-on-dark:         #FFFFFF;
  --text-on-dark-muted:   rgba(255,255,255,0.72);
  --text-link:            var(--red-700);

  /* Borders & lines */
  --border-subtle:        var(--neutral-200);
  --border-default:       var(--neutral-300);
  --border-strong:        var(--navy-900);
  --border-on-dark:       rgba(255,255,255,0.18);
  --focus-ring:           var(--red-500);

  /* Status semantic */
  --color-success:        var(--green-600);
  --color-success-soft:   #E7F4EC;
  --color-warning:        var(--amber-600);
  --color-warning-soft:   #FBF1DC;
  --color-info:           var(--blue-500);
  --color-info-soft:      #E6F0F8;
  --color-danger:         var(--red-600);
  --color-danger-soft:    var(--red-50);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Mission Curtis — Typography tokens
   Archivo (display) · Public Sans (body/UI) · Spline Sans Mono
   ============================================================ */

:root {
  /* ---- Families --------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Public Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* ---- Type scale (rem, 16px base) -------------------------- */
  --text-2xs:  0.6875rem;  /* 11 — micro labels */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 — body default */
  --text-md:   1.125rem;   /* 18 — lead body */
  --text-lg:   1.375rem;   /* 22 */
  --text-xl:   1.75rem;    /* 28 */
  --text-2xl:  2.25rem;    /* 36 */
  --text-3xl:  3rem;       /* 48 */
  --text-4xl:  3.875rem;   /* 62 */
  --text-5xl:  5rem;       /* 80 — hero */
  --text-6xl:  6.5rem;     /* 104 — display banner */

  /* ---- Line heights ----------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing --------------------------------------- */
  --tracking-tighter: -0.03em;  /* big display */
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.14em;   /* eyebrow / kicker all-caps */

  /* ---- Semantic roles --------------------------------------- */
  --role-display-family: var(--font-display);
  --role-display-weight: var(--weight-black);
  --role-display-tracking: var(--tracking-tighter);

  --role-heading-family: var(--font-display);
  --role-heading-weight: var(--weight-extra);
  --role-heading-tracking: var(--tracking-tight);

  --role-eyebrow-family: var(--font-mono);
  --role-eyebrow-weight: var(--weight-semibold);
  --role-eyebrow-tracking: var(--tracking-caps);

  --role-body-family: var(--font-body);
  --role-body-weight: var(--weight-regular);
  --role-body-leading: var(--leading-relaxed);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Mission Curtis — Spacing, radius, shadow, layout tokens
   8px base grid.
   ============================================================ */

:root {
  /* ---- Spacing (8px grid; 4px half-steps) ------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-11:  6rem;     /* 96 */
  --space-12:  8rem;     /* 128 */

  /* ---- Radius — restrained, civic, mostly square ------------ */
  --radius-none: 0;
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ---- Border widths ---------------------------------------- */
  --border-hair:  1px;
  --border-thin:  1.5px;
  --border-thick: 2px;
  --border-bold:  3px;   /* brand underline / accent bar */

  /* ---- Shadows — soft, low, grounded (no purple glows) ------ */
  --shadow-xs: 0 1px 2px rgba(10, 22, 41, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 22, 41, 0.08), 0 1px 2px rgba(10, 22, 41, 0.05);
  --shadow-md: 0 4px 12px rgba(10, 22, 41, 0.08), 0 2px 4px rgba(10, 22, 41, 0.05);
  --shadow-lg: 0 12px 28px rgba(10, 22, 41, 0.12), 0 4px 8px rgba(10, 22, 41, 0.06);
  --shadow-xl: 0 24px 56px rgba(10, 22, 41, 0.16);
  --shadow-focus: 0 0 0 3px rgba(222, 47, 57, 0.35);

  /* ---- Layout ----------------------------------------------- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-max: 1320px;
  --gutter:        var(--space-5);
  --section-y:     var(--space-11);

  /* ---- Motion ----------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);    /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Mission Curtis — Base element defaults & a few brand helpers
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-extra);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

strong { font-weight: var(--weight-bold); }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- Brand helper classes ---------------------------------- */
.mc-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
}

.mc-kicker-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.mc-kicker-line::before {
  content: "";
  width: 28px;
  height: var(--border-bold);
  background: var(--color-primary);
}

.mc-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

/* Accent underline used under section headings */
.mc-underline { position: relative; display: inline-block; }
.mc-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.18em;
  width: 100%; height: var(--border-bold);
  background: var(--color-primary);
}

/* ===== tokens/components.css ===== */
/* ============================================================
   Mission Curtis — Component interaction states
   Inline styles paint the base; these rules add hover/active/
   focus/checked behaviour that inline styles can't express.
   ============================================================ */

/* ---- Buttons ---------------------------------------------- */
.mc-btn { -webkit-tap-highlight-color: transparent; }
.mc-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mc-btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }

.mc-btn--primary:hover:not(:disabled)  { background: var(--color-primary-hover) !important; border-color: var(--color-primary-hover) !important; }
.mc-btn--primary:active:not(:disabled) { background: var(--color-primary-press) !important; border-color: var(--color-primary-press) !important; }
.mc-btn--secondary:hover:not(:disabled){ background: var(--navy-800) !important; border-color: var(--navy-800) !important; }
.mc-btn--outline:hover:not(:disabled)  { background: var(--navy-900) !important; color: #fff !important; }
.mc-btn--ghost:hover:not(:disabled)    { background: var(--color-primary-soft) !important; }
.mc-btn--onDark:hover:not(:disabled)   { background: var(--neutral-100) !important; }
.mc-btn:focus-visible { box-shadow: var(--shadow-focus); }

/* ---- Cards ------------------------------------------------ */
.mc-card--interactive { cursor: pointer; }
.mc-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }

/* ---- Inputs ----------------------------------------------- */
.mc-input::placeholder { color: var(--neutral-400); }
.mc-input:hover { border-color: var(--neutral-400); }
.mc-input:focus { border-color: var(--color-primary) !important; box-shadow: var(--shadow-focus); }

/* ---- Checkbox --------------------------------------------- */
.mc-checkbox:checked { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.mc-checkbox:checked::after {
  content: "";
  width: 6px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-1px);
}
.mc-checkbox:focus-visible { box-shadow: var(--shadow-focus); }