/* ============================================================
   AI with Court × AI for Women — Brand foundations
   Tokens lifted verbatim from the design system's colors_and_type.css
   (2026 Brand Guidelines). Self-contained: only the 4 faces this
   site uses are wired here.
   "No hype. No jargon. No tech bros."
   ============================================================ */

@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/DMSerifDisplay-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/DMSerifDisplay-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-VariableFont.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ----- Brand palette — four working tones, exact hex ----- */
  --indigo:      #3740A3;
  --cream:       #FBF6EA;
  --lavender:    #EEE6F7;
  --vermilion:   #ED4811;
  --ink:         #1B1B1B;
  --white:       #FFFFFF;

  /* ----- Derived tints (in-system) ----- */
  --indigo-90:   #41499f;
  --indigo-12:   rgba(55, 64, 163, 0.12);
  --indigo-20:   rgba(55, 64, 163, 0.20);
  --vermilion-12:rgba(237, 72, 17, 0.12);
  --vermilion-90:#d63f0d;
  --placeholder: rgba(27,27,46,0.40);
  --cream-line:  #E7DEC9;
  --lavender-line:#DCD0EC;
  --white-70:    rgba(255,255,255,0.80);
  --white-40:    rgba(255,255,255,0.62);

  /* ----- Semantic roles ----- */
  --bg:          var(--cream);
  --bg-soft:     var(--lavender);
  --bg-hero:     var(--indigo);
  --fg:          var(--ink);
  --fg-on-hero:  var(--white);
  --accent:      var(--vermilion);
  --link:        var(--vermilion);

  /* ----- Families ----- */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ----- Type scale ----- */
  --t-display:   72px;
  --t-h1:        52px;
  --t-h2:        38px;
  --t-h3:        28px;
  --t-title:     22px;
  --t-lead:      20px;
  --t-body:      17px;
  --t-small:     15px;
  --t-caption:   13px;
  --t-kicker:    12px;

  /* ----- Weights ----- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ----- Line heights ----- */
  --lh-tight:  1.04;
  --lh-snug:   1.18;
  --lh-body:   1.6;

  /* ----- Letter spacing ----- */
  --ls-kicker: 0.14em;
  --ls-tight:  -0.02em;
  --ls-body:   0;

  /* ----- Radii ----- */
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* ----- Spacing (8pt) ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ----- Shadows — soft, warm, low ----- */
  --shadow-sm: 0 1px 2px rgba(27,27,46,0.06), 0 1px 3px rgba(27,27,46,0.05);
  --shadow-md: 0 6px 18px rgba(27,27,46,0.08);
  --shadow-lg: 0 18px 48px rgba(55,64,163,0.14);
  --shadow-indigo: 0 16px 40px rgba(55,64,163,0.28);

  /* ----- Motion — gentle, no bounce ----- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;
}