/* ============================================================================
   ShowTrail by family.one — Color & Type Tokens
   ----------------------------------------------------------------------------
   Two surfaces with deliberately different visual postures:

   1. MARKETING (ShowTrail website, business.family.one)
      Warm, energetic, family-safe. Denim blue lead, turquoise + French pink
      accents. Generous radii. Approachable but commercially credible.

   2. OPERATIONAL (connect.family.one dashboard)
      Calmer, denser, more neutral. Same brand hues, lower saturation
      backgrounds, tighter radii. Looks like proof, not adtech.
   ============================================================================ */

/* Fraunces — editorial accents only (pull-quotes / hero italics).
   Loaded from local /fonts. We use the standard "72pt" optical-size cut
   (the Soft / SuperSoft variants on disk are decorative alternates we
   reserve for special headlines, not wired into the default family). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300;
  src: url("fonts/Fraunces_72pt-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300;
  src: url("fonts/Fraunces_72pt-LightItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400;
  src: url("fonts/Fraunces_72pt-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400;
  src: url("fonts/Fraunces_72pt-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600;
  src: url("fonts/Fraunces_72pt-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 600;
  src: url("fonts/Fraunces_72pt-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700;
  src: url("fonts/Fraunces_72pt-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 700;
  src: url("fonts/Fraunces_72pt-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 900;
  src: url("fonts/Fraunces_72pt-Black.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 900;
  src: url("fonts/Fraunces_72pt-BlackItalic.ttf") format("truetype"); font-display: swap; }

/* Fraunces Soft & SuperSoft — decorative alternates (separate families,
   so designers can opt in deliberately: font-family: "Fraunces Soft"). */
@font-face { font-family: "Fraunces Soft"; font-style: normal; font-weight: 400;
  src: url("fonts/Fraunces_72pt_Soft-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Soft"; font-style: italic; font-weight: 400;
  src: url("fonts/Fraunces_72pt_Soft-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Soft"; font-style: normal; font-weight: 600;
  src: url("fonts/Fraunces_72pt_Soft-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Soft"; font-style: italic; font-weight: 600;
  src: url("fonts/Fraunces_72pt_Soft-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Soft"; font-style: normal; font-weight: 700;
  src: url("fonts/Fraunces_72pt_Soft-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces Soft"; font-style: italic; font-weight: 700;
  src: url("fonts/Fraunces_72pt_Soft-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces SuperSoft"; font-style: normal; font-weight: 400;
  src: url("fonts/Fraunces_72pt_SuperSoft-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces SuperSoft"; font-style: italic; font-weight: 400;
  src: url("fonts/Fraunces_72pt_SuperSoft-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces SuperSoft"; font-style: normal; font-weight: 600;
  src: url("fonts/Fraunces_72pt_SuperSoft-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces SuperSoft"; font-style: italic; font-weight: 600;
  src: url("fonts/Fraunces_72pt_SuperSoft-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces SuperSoft"; font-style: normal; font-weight: 700;
  src: url("fonts/Fraunces_72pt_SuperSoft-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fraunces SuperSoft"; font-style: italic; font-weight: 700;
  src: url("fonts/Fraunces_72pt_SuperSoft-BoldItalic.ttf") format("truetype"); font-display: swap; }

/* Nunito — brand sans, loaded from local variable fonts in /fonts.
   The variable files cover the full weight range 200–1000 (including
   Medium 500, which the static files didn't ship). Paths are repo-root-
   relative so any page that imports this CSS from any depth resolves
   them correctly (browsers resolve @font-face URLs relative to the
   stylesheet, not the document). */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  src: url("fonts/Nunito-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Nunito-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 200 1000;
  src: url("fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Nunito-Italic-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE -------------------------------------------------- */
  /* Denim — the load-bearing brand color, used for primary type & CTAs */
  --denim-900: #11215a;          /* headline / deepest */
  --denim-800: #1b3382;
  --denim-700: #2a46a8;          /* PRIMARY — current observed brand blue */
  --denim-600: #3c5ec3;
  --denim-500: #5a7adb;
  --denim-400: #8aa3ec;
  --denim-300: #b8c8f5;
  --denim-200: #dbe4fb;
  --denim-100: #eef2fd;
  --denim-50:  #f6f8ff;

  /* Turquoise — used for "discovery / navigate" affordances and chart fills */
  --turquoise-700: #0f8c8f;
  --turquoise-600: #1bb0b3;      /* SUPPORT — secondary accent */
  --turquoise-500: #2ecaca;
  --turquoise-400: #6cdedb;
  --turquoise-300: #a6ece9;
  --turquoise-200: #d2f5f3;
  --turquoise-100: #e8faf8;

  /* French pink — used sparingly for "remembrance / saved / favorite" */
  --pink-700: #c33370;
  --pink-600: #e35089;           /* ACCENT — sparing use */
  --pink-500: #f06ea1;
  --pink-400: #f99cbf;
  --pink-300: #ffc5da;
  --pink-200: #ffe1ec;
  --pink-100: #fff2f7;

  /* Warm cream — page background warmth instead of pure white */
  --cream-100: #fbf7f1;
  --cream-200: #f5efe4;
  --cream-300: #ebe3d4;

  /* Sun — used sparingly for "giveaway / interact / offer" affordances */
  --sun-600: #f4a300;
  --sun-500: #ffb930;
  --sun-400: #ffcf66;
  --sun-300: #ffe1a0;
  --sun-200: #fff0cf;

  /* ---------- NEUTRALS (warm-leaning, never pure black) ------------------- */
  --ink-900: #1a1d2c;            /* body text on light */
  --ink-700: #404556;
  --ink-500: #6b7187;            /* secondary text */
  --ink-400: #8b91a6;
  --ink-300: #b2b7c7;
  --ink-200: #d8dbe5;            /* hairline */
  --ink-100: #e9ebf2;
  --ink-50:  #f4f5f9;
  --white:   #ffffff;

  /* ---------- SEMANTIC ---------------------------------------------------- */
  --success-600: #2f9669;
  --success-500: #45b585;
  --success-100: #dcf2e6;
  /* Warning shifted from amber → terracotta orange so it can't be confused
     with the Sun pillar (giveaway/interact). Sun = golden yellow, warning =
     orange-red, danger = pink-red. Three distinct hues. */
  --warning-600: #c8531f;
  --warning-500: #e2733d;
  --warning-100: #fbe3d2;
  /* Danger shifted deeper + more crimson so it cannot be confused with
     Remembrance (pink-700 #c33370). Pink = rose/magenta; danger = blood-red. */
  --danger-600:  #a5202c;
  --danger-500:  #c63a47;
  --danger-100:  #f8d8d6;
  --info-600:    var(--denim-700);
  --info-100:    var(--denim-100);

  /* ---------- SURFACE ROLES (marketing default) --------------------------- */
  --bg-page:      var(--cream-100);
  --bg-surface:   var(--white);
  --bg-raised:    var(--white);
  --bg-sunken:    var(--ink-50);
  --bg-inverse:   var(--denim-900);
  --fg-primary:   var(--ink-900);
  --fg-secondary: var(--ink-500);
  --fg-muted:     var(--ink-400);
  --fg-on-brand:  var(--white);
  --fg-on-inverse:var(--white);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --brand:        var(--denim-700);
  --brand-strong: var(--denim-800);
  --brand-soft:   var(--denim-100);
  --accent:       var(--turquoise-600);
  --remember:     var(--pink-600);
  --interact:     var(--sun-500);

  /* ---------- ELEVATION (soft, never harsh) ------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 30, 80, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 30, 80, 0.06), 0 1px 2px rgba(20, 30, 80, 0.04);
  --shadow-md: 0 8px 20px -6px rgba(20, 30, 80, 0.12), 0 2px 6px rgba(20, 30, 80, 0.06);
  --shadow-lg: 0 24px 48px -12px rgba(20, 30, 80, 0.18), 0 4px 10px rgba(20, 30, 80, 0.06);
  --shadow-xl: 0 40px 80px -20px rgba(20, 30, 80, 0.22), 0 8px 16px rgba(20, 30, 80, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-focus: 0 0 0 4px rgba(42, 70, 168, 0.22);

  /* ---------- RADII (rounded, family-safe; tighter on operational) -------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------- SPACING SCALE (4px base) ------------------------------------ */
  --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;
  --space-32: 128px;

  /* ---------- TYPE FAMILIES ----------------------------------------------- */
  --font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Nunito", system-ui, sans-serif; /* heavier weights of Nunito as display */
  --font-editorial: "Fraunces", Georgia, "Times New Roman", serif; /* sparing — pull quotes, hero accents */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (marketing) -------------------------------------- */
  --fs-display: clamp(48px, 6vw, 88px);
  --fs-h1: clamp(36px, 4vw, 56px);
  --fs-h2: clamp(28px, 3vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 12px;

  /* ---------- LINE HEIGHTS ------------------------------------------------ */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* ---------- LETTER SPACING ---------------------------------------------- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-overline: 0.14em;

  /* ---------- WEIGHTS ----------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ---------- MOTION ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ---------- LAYOUT ------------------------------------------------------ */
  --container-max: 1200px;
  --container-narrow: 880px;
  --hit-min: 44px;
}

/* ============================================================================
   OPERATIONAL SURFACE OVERRIDES — apply via <body class="surface-operational">
   Tighter, calmer; reads like proof of value, not marketing.
   ============================================================================ */
[data-surface="operational"], .surface-operational {
  --bg-page:      #f6f7fb;
  --bg-surface:   var(--white);
  --bg-sunken:    var(--ink-50);
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-md: 0 4px 10px -4px rgba(20, 30, 80, 0.08), 0 1px 3px rgba(20, 30, 80, 0.04);
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES (base reset + role classes)
   ============================================================================ */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--denim-900);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--denim-900);
  text-wrap: balance;
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--denim-900);
  margin: 0 0 var(--space-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--denim-900);
  margin: 0 0 var(--space-2);
}

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--denim-900);
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--ink-700); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--ink-700); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--ink-700); }
.caption { font-size: var(--fs-caption); color: var(--ink-500); }

.overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--denim-700);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-overline);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--denim-700);
}

.editorial {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: var(--fw-regular);
}

a {
  color: var(--denim-700);
  text-decoration-color: color-mix(in oklab, var(--denim-700) 30%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover:not(.btn) { color: var(--denim-800); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

::selection { background: var(--denim-200); color: var(--denim-900); }