/* ──────────────────────────────────────────────────────────────────
 * Us — Color & Type tokens
 * Source of truth for every product surface, slide, mock, and prototype.
 * Pulled from the Figma styleguide ("Us – Design System").
 * ──────────────────────────────────────────────────────────────────*/

/* Self-hosted latin woff2. Owners / Owners Wide files go in /fonts/owners/ (see Layout.astro). */
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ─────────  PRIMARY (the only big-fill brand color besides B&W)  ───────── */
  --us-cream:           #F5F4E5;   /* Soft off-white, the warm background */
  --us-ink:             #19191B;   /* Brand black, used for fills + text  */
  --us-white:           #FFFFFF;

  /* ─────────  SECONDARY  (text-on-tint accent dots — never large fills)  ─── */
  --us-peach:           #FFB985;
  --us-peach-text:      #872012;   /* deep terracotta, for text on peach */

  --us-mint:            #8DFFB7;
  --us-mint-text:       #1E625A;   /* deep teal text on mint            */

  --us-sky:             #A7F0FB;
  --us-sky-text:        #0D4F6E;

  --us-pink:            #F3AAFF;
  --us-pink-text:       #7E1C74;

  --us-lilac:           #BDB4FF;   /* the holographic lilac (used a LOT) */
  --us-lilac-deep:      #6257E8;
  --us-lilac-text:      #423A75;

  /* ─────────  GRADIENTS  (used on CTA bars and big graphic moments)  ────── */
  --us-grad-warm:       linear-gradient(135deg, #FFB985 0%, #F3AAFF 50%, #BDB4FF 100%);
  --us-grad-cool:       linear-gradient(135deg, #A7F0FB 0%, #8DFFB7 50%, #BDB4FF 100%);
  --us-grad-iridescent: linear-gradient(135deg, #FFB985 0%, #F3AAFF 25%, #BDB4FF 55%, #A7F0FB 80%, #8DFFB7 100%);

  /* ─────────  NEUTRAL SCALE  (the workhorses)  ───────────────────────── */
  --us-n-00:            #FFFFFF;
  --us-n-10:            #FCFCFC;
  --us-n-20:            #F9F9F9;
  --us-n-30:            #F3F3F3;
  --us-n-40:            #EAEAEA;
  --us-n-50:            #D9D9D9;
  --us-n-60:            #A7A7A7;
  --us-n-70:            #707070;
  --us-n-80:            #494949;
  --us-n-90:            #2E2E2E;
  --us-n-100:           #000000;

  /* ─────────  SEMANTIC (text, surface, border, focus)  ──────────────── */
  --fg-1:               #19191B;   /* primary text */
  --fg-2:               #2E2E2E;   /* secondary text */
  --fg-3:               #5F5F66;   /* tertiary/muted text; ≥ 4.5:1 on cream/white/n-30 */
  --stat-label:         #5F5F66;   /* solid (no opacity) so stat captions stay ≥ 4.5:1 */
  --fg-on-dark:         #FFFFFF;
  --fg-link:            #19191B;
  --fg-disabled:        #A7A7A7;

  --bg-page:            #FFFFFF;
  --bg-page-alt:        #F5F4E5;   /* the cream alt page bg            */
  --bg-surface:         #FFFFFF;
  --bg-surface-2:       #F9F9F9;
  --bg-surface-3:       #F3F3F3;
  --bg-dark:            #19191B;   /* footer / hero dark surface       */

  --border-subtle:      #EAEAEA;
  --border-decor:       #D9D9D9;   /* decorative dividers only */
  --border-default:     #8A8A8A;   /* form controls; ≥ 3:1 on white */
  --border-strong:      #19191B;

  --focus-ring:         #6257E8;
  --shadow-card:        0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-pop:         0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.10);

  /* ─────────  STATUS  (sparingly used)  ────────────────────────────── */
  --status-success:     #41BD73;
  --status-warning:     #FFB985;
  --status-error:       #872012;
  --status-info:        #6257E8;

  /* ─────────  TYPE (Us Web profile: Owners + Public Sans, Archivo fallback)  ─ */
  --font-display:       "owners-wide", "Archivo", "Public Sans", system-ui, sans-serif;
  --font-body:          "Public Sans", system-ui, sans-serif;
  --font-button:        "owners", "Archivo", "Public Sans", system-ui, sans-serif;
  --font-quote:         "ivypresto-display", "Archivo", "Public Sans", Georgia, serif;
  --font-mono:          ui-monospace, "SF Mono", monospace;

  /* fluid heading clamps – mobile → desktop  */
  --fs-h1:              clamp(40px, 6vw, 80px);
  --fs-h2:              clamp(32px, 4.5vw, 56px);
  --fs-h3:              clamp(28px, 3vw, 40px);
  --fs-h4:              clamp(24px, 2.4vw, 32px);
  --fs-h5:              22px;
  --fs-h6:              18px;
  --fs-quote:           clamp(28px, 3vw, 40px);
  --fs-lead:            20px;
  --fs-body:            16px;
  --fs-small:           14px;
  --fs-micro:           12px;

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

  --tracking-display:   normal;
  --tracking-body:      0;

  /* ─────────  SHAPE  ──────────────────────────────────────────────── */
  --r-xs:               4px;
  --r-sm:               8px;
  --r-md:               16px;
  --r-lg:               24px;
  --r-xl:               32px;
  --r-pill:             500px;

  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;

  --container-max:      1280px;
  --container-pad:      130px;     /* desktop side gutter from the figma */
}

/* ─────────  Element defaults  ──────────────────────────────────── */
html, body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: 0.95; }
h2 { font-size: var(--fs-h2); line-height: 1.0;  }
h3 { font-size: var(--fs-h3); line-height: 1.1;  }
h4 { font-size: var(--fs-h4); line-height: 1.15; }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p  { margin: 0; text-wrap: pretty; }
.p-large  { font-size: var(--fs-lead); line-height: 1.6; }
.p-small  { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-2); }
.eyebrow  {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.quote {
  font-family: var(--font-quote);
  font-weight: 500;
  font-size: var(--fs-quote);
  line-height: 1.2;
}
.link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link:hover { text-decoration-thickness: 2px; }

/* utility */
.us-pill { border-radius: var(--r-pill); }
.us-card { background: var(--bg-surface); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }