/* Support Pets — Colors & Typography Tokens
 * Sourced from Figma "System / Color" + "Desktop/Mobile Font" frames.
 * Brand font: Poppins.
 *
 * ─── WEIGHT POLICY (HARD RULE) ──────────────────────────────────────────
 * SemiBold (600) is the MAXIMUM weight used anywhere in the Support Pets
 * system. Bold (700), ExtraBold (800), Black (900) and the CSS keywords
 * `bold` / `bolder` are NOT permitted — they break our soft, approachable
 * brand voice and fail our visual-weight balance against Boop coral.
 *
 *   Allowed:  400 Regular · 500 Medium · 600 SemiBold
 *   Banned:   700+ (Bold / ExtraBold / Black), `bold`, `bolder`
 *
 * The 700 @font-face entries are intentionally removed so stray `font-weight:700`
 * declarations cannot render a bold glyph — Poppins SemiBold will be used
 * instead. A safety-net rule at the bottom of this file also clamps any
 * 700–900 declaration back to 600 at runtime. Fix the source, don't rely
 * on the clamp.
 */

@font-face{font-family:'Poppins';src:url('fonts/Poppins-Thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-ThinItalic.ttf') format('truetype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-MediumItalic.ttf') format('truetype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');font-weight:600;font-style:italic;font-display:swap}
/* Poppins Bold (700) and Black (900) are intentionally NOT loaded.
 * Weight policy caps at SemiBold (600). See header comment. */

:root {
  /* ─── PRIMARY BRAND (named palette) ──────────────── */
  --sp-boop:         #F25E61;   /* Primary CTA / button fill */
  --sp-lake-walk:    #CAF6F6;   /* Pale aqua wash */
  --sp-neon-zoomies: #DDFECE;   /* Mint success / highlight */
  --sp-lighter-teal: #0C5A66;   /* Mid-deep teal accent */
  --sp-medium-teal:  #023945;   /* Deep teal surface */
  --sp-pet-pool:     #75DBC8;   /* Accent / heart mark */

  /* Legacy aliases — keep until all kits are migrated */
  --sp-coral:        var(--sp-boop);
  --sp-coral-600:    #F46F72;
  --sp-coral-700:    #E04B4E;
  --sp-teal:         var(--sp-pet-pool);
  --sp-teal-dark:    var(--sp-lighter-teal);

  /* ─── NEUTRALS (named palette) ───────────────────── */
  --sp-dark-teal:          #042E33;   /* Primary text / near-black */
  --sp-tranquil-dark:      #668182;   /* Secondary text — large text only in light mode (3.8:1 on white) */
  --sp-tranquil-light:     #7B9C9E;   /* Placeholder only in light mode (2.8:1 on white) */
  --sp-light-neutral-gray: #F0F6F6;   /* Page background */
  --sp-light-neutral-cool: #E1EDEA;   /* Card wash / subtle surface */
  --sp-whisker:            #FFFFFF;   /* Brand white */

  /* Legacy aliases — keep until kits are migrated */
  --sp-ink:          var(--sp-dark-teal);
  --sp-ink-2:        var(--sp-medium-teal);   /* Headings emphasis */
  --sp-fg-1:         var(--sp-tranquil-dark); /* RESTRICTED: large text only in light mode — see typography-handoff.md §6 */
  --sp-fg-2:         var(--sp-tranquil-light);/* RESTRICTED: placeholder only in light mode — see typography-handoff.md §6 */
  --sp-line:         #DFE8E4;
  --sp-surface:      var(--sp-light-neutral-gray);
  --sp-surface-2:    var(--sp-light-neutral-cool);
  --sp-white:        var(--sp-whisker);
  --sp-off-white:    var(--sp-whisker);

  /* ─── SEMANTIC ACCENT / TINTS ────────────────────── */
  --sp-mint-50:      var(--sp-neon-zoomies);   /* #DDFECE */
  --sp-mint-100:     #E0FED3;
  --sp-aqua-50:      #D0F7F2;
  --sp-aqua-100:     var(--sp-lake-walk);      /* #CAF6F6 */
  --sp-rose-50:      #FEE6E8;
  --sp-rose-100:     #FDD5D6;

  /* ─── SEMANTIC ROLES ─────────────────────────────── */
  --sp-bg:           var(--sp-white);
  --sp-bg-muted:     var(--sp-surface);
  --sp-text:         var(--sp-ink);
  --sp-text-muted:   var(--sp-fg-1);
  --sp-text-subtle:  var(--sp-fg-2);
  --sp-border:       var(--sp-line);
  --sp-primary:      var(--sp-coral);
  --sp-primary-fg:   #FFFFFF;
  --sp-secondary-fg: var(--sp-ink);
  --sp-success:      #2E9E6A;
  --sp-warning:      #E0A82E;
  --sp-danger:       var(--sp-coral);

  /* ─── DARK SURFACE (Hero-Dark, CTA-Dark) ────────── */
  --sp-dark-bg:      var(--sp-ink-2);   /* #023945 */
  --sp-dark-bg-2:    var(--sp-ink);     /* #042E33 */
  --sp-dark-fg:      var(--sp-off-white);
  --sp-dark-muted:   #7B9C9E;

  /* ─── TYPE FAMILIES ──────────────────────────────── */
  /* Poppins is the brand font (self-hosted, all weights up to SemiBold).
   * Weight policy: max 600 SemiBold — see header comment.
   * All three tokens resolve to Poppins; they exist as separate variables
   * so swapping a display or utility face in the future is a single-line change. */
  --sp-font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-font-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --sp-font-utility: 'Poppins', sans-serif;

  /* ─── TYPE SCALE — DESKTOP ──────────────────────── */
  --sp-fs-h0:        64px;
  --sp-fs-h1:        48px;
  --sp-fs-h2:        32px;
  --sp-fs-h3:        24px;
  --sp-fs-h4:        20px;
  --sp-fs-body-xl:   24px;
  --sp-fs-body-lg:   20px;
  --sp-fs-body:      16px;
  --sp-fs-body-sm:   12px;

  /* ─── TYPE SCALE — MOBILE ───────────────────────────
   * Per Figma "System / Mobile Font" frame. Sourced from
   * the Typography Handoff step-down guidance. Used by the
   * media-query override below at viewports <= 640px so the
   * existing `--sp-fs-*` tokens (and all .sp-* presets) reflow
   * to mobile sizes automatically. Keep these in sync with the
   * desktop scale — every desktop token has a mobile counterpart. */
  --sp-fs-h0-m:        44px;   /* hero display */
  --sp-fs-h1-m:        40px;   /* page / section title */
  --sp-fs-h2-m:        32px;   /* sub-section */
  --sp-fs-h3-m:        24px;   /* card heading */
  --sp-fs-h4-m:        18px;   /* small heading */
  --sp-fs-body-xl-m:   20px;   /* hero sub-copy */
  --sp-fs-body-lg-m:   18px;   /* emphasized body */
  --sp-fs-body-m:      16px;   /* default body */
  --sp-fs-body-sm-m:   14px;   /* caption / fine print */

  /* ─── WEIGHTS ────────────────────────────────────── */
  /* Weight scale — SemiBold (600) is the max. See header policy. */
  --sp-fw-regular:   400;
  --sp-fw-medium:    500;
  --sp-fw-semi:      600;
  /* --sp-fw-bold removed: bold weights are not permitted. Use --sp-fw-semi. */
  --sp-fw-strong:    600;  /* alias for the strongest allowed weight */

  /* ─── LINE HEIGHT ────────────────────────────────── */
  --sp-lh-tight:     1.1;
  --sp-lh-heading:   1.2;
  --sp-lh-body:      1.5;
  --sp-lh-prose:     1.6;

  /* ─── LINE LENGTH (MEASURE) ──────────────────────── */
  /* Apply to containing elements — not typographic classes directly.
   * See typography-handoff.md §9 for usage guidance. */
  --sp-measure:        72ch;   /* default body column */
  --sp-measure-prose:  66ch;   /* long-form articles */
  --sp-measure-narrow: 52ch;   /* card body, sidebar copy */

  /* ─── VERTICAL RHYTHM ────────────────────────────── */
  /* Companion spacing for stacking typographic elements.
   * See typography-handoff.md §10 for usage guidance. */
  --sp-space-prose-block:   1.5em;  /* margin-bottom between body paragraphs */
  --sp-space-heading-above: 2em;    /* margin-top before h2/h3 within body copy */
  --sp-space-heading-below: 0.5em;  /* margin-bottom from heading to first paragraph */
  --sp-space-caption:       0.5em;  /* margin-top above .sp-body-sm captions */

  /* ─── RADII ──────────────────────────────────────── */
  --sp-r-sm:         8px;
  --sp-r-md:         12px;
  --sp-r-lg:         16px;
  --sp-r-xl:         24px;
  --sp-r-pill:       999px;     /* buttons are always pills */
  --sp-r-card:       16px;

  /* ─── SPACING ────────────────────────────────────── */
  --sp-s-1:   4px;
  --sp-s-2:   8px;
  --sp-s-3:   12px;
  --sp-s-4:   16px;
  --sp-s-5:   24px;
  --sp-s-6:   32px;
  --sp-s-7:   48px;
  --sp-s-8:   64px;
  --sp-s-9:   96px;
  --sp-s-10:  120px;   /* section padding used throughout marketing */

  /* ─── SHADOWS ────────────────────────────────────── */
  --sp-shadow-sm:    0 1px 2px rgba(0,0,0,0.06);
  --sp-shadow-md:    0 4px 16px rgba(0,0,0,0.10);
  --sp-shadow-lg:    0 12px 40px rgba(18,68,78,0.20);
  --sp-shadow-card:  0 2px 12px rgba(18,68,78,0.08);

  /* ─── BUTTON HEIGHTS ─────────────────────────────── */
  --sp-btn-h-lg:   52px;
  --sp-btn-h-md:   44px;
  --sp-btn-h-sm:   36px;

  /* ─── DARK MODE — ACCESSIBLE PALETTE ────────────── */
  /* Night-ocean hierarchy. All pairs meet WCAG AA against
   * --spd-bg (#001A22) unless noted. Contrast ratios recorded in
   * typography-handoff.md §6 — update there if these change. */

  /* Surfaces (deep teals, not black) */
  --spd-bg:           #001A22;   /* Page — deepest */
  --spd-bg-elev-1:    #052B35;   /* Card / panel */
  --spd-bg-elev-2:    #0B3C48;   /* Popover / dropdown */
  --spd-bg-muted:     #042029;   /* Secondary section wash */
  --spd-bg-hover:     #0E4652;   /* Row/button hover fill */

  /* Text — tuned for AA on --spd-bg (#001A22) */
  --spd-text:         #EAF5F4;   /* Primary — 16.8:1 */
  --spd-text-muted:   #A8C7C8;   /* Secondary — 9.3:1 */
  --spd-text-subtle:  #7FA3A5;   /* Tertiary / placeholder — 5.6:1 */
  --spd-text-disabled:#4F6E71;   /* Disabled — 2.9:1 (exempt per WCAG 1.4.3) */

  /* Borders / dividers */
  --spd-border:       #12404B;   /* Hairline on elev-1 */
  --spd-border-strong:#1E5A68;   /* Input / active */
  --spd-focus-ring:   #8FE7D8;   /* 2px focus halo — 11.2:1 on --spd-bg */

  /* Accents — shifted lighter for AA on dark */
  --spd-primary:      #FF8184;   /* Boop, +20% L — 6.0:1 AA text */
  --spd-primary-hover:#FFA1A3;
  --spd-primary-fg:   #1A0A0B;   /* Text on coral button */
  --spd-accent-teal:  #8FE7D8;   /* Pet Pool, brightened — 11.2:1 */
  --spd-accent-aqua:  #9EEBE4;   /* Lake Walk, deeper to hold on dark */
  --spd-accent-mint:  #B6F0A2;   /* Zoomies, AA safe */

  /* Tint washes for banners / badges */
  --spd-tint-coral:   #3A1618;   /* Rose ambient */
  --spd-tint-teal:    #0E3A3F;
  --spd-tint-mint:    #16371E;
  --spd-tint-aqua:    #10343A;

  /* Semantic */
  --spd-success:      #6FE0A0;   /* AA on --spd-bg */
  --spd-warning:      #FFC861;
  --spd-danger:       #FF8184;
  --spd-info:         #8FE7D8;

  /* Shadows — pushed deeper since surface is already dark */
  --spd-shadow-sm:    0 1px 2px rgba(0,0,0,0.5);
  --spd-shadow-md:    0 4px 16px rgba(0,0,0,0.45);
  --spd-shadow-lg:    0 12px 40px rgba(0,0,0,0.55);
  --spd-shadow-card:  0 2px 12px rgba(0,0,0,0.35);
}

/* Apply dark tokens when data-theme="dark" is set on any ancestor. */
[data-theme="dark"] {
  --sp-bg:           var(--spd-bg);
  --sp-bg-muted:     var(--spd-bg-muted);
  --sp-text:         var(--spd-text);
  --sp-text-muted:   var(--spd-text-muted);
  --sp-text-subtle:  var(--spd-text-subtle);
  --sp-border:       var(--spd-border);
  --sp-primary:      var(--spd-primary);
  --sp-primary-fg:   var(--spd-primary-fg);
  --sp-success:      var(--spd-success);
  --sp-warning:      var(--spd-warning);
  --sp-danger:       var(--spd-danger);

  --sp-ink:          var(--spd-text);
  --sp-ink-2:        var(--spd-text);       /* Both ink tokens resolve to --spd-text in dark mode */
  --sp-fg-1:         var(--spd-text-muted); /* Promoted to AA in dark — 9.3:1 on --spd-bg */
  --sp-fg-2:         var(--spd-text-subtle);/* 5.6:1 on --spd-bg — still keep to placeholder/secondary use */
  --sp-line:         var(--spd-border);
  --sp-surface:      var(--spd-bg-muted);
  --sp-surface-2:    var(--spd-bg-elev-1);
  --sp-white:        var(--spd-bg-elev-1);

  --sp-shadow-sm:    var(--spd-shadow-sm);
  --sp-shadow-md:    var(--spd-shadow-md);
  --sp-shadow-lg:    var(--spd-shadow-lg);
  --sp-shadow-card:  var(--spd-shadow-card);
}

/* ─── MOBILE TYPE SCALE OVERRIDE ────────────────────────────────────────
 * At viewports <= 640px, remap every desktop --sp-fs-* token to its
 * mobile counterpart. Because all .sp-* presets reference the desktop
 * tokens via var(), they reflow automatically — no per-class media
 * queries needed. */
@media (max-width: 640px) {
  :root {
    --sp-fs-h0:      var(--sp-fs-h0-m);
    --sp-fs-h1:      var(--sp-fs-h1-m);
    --sp-fs-h2:      var(--sp-fs-h2-m);
    --sp-fs-h3:      var(--sp-fs-h3-m);
    --sp-fs-h4:      var(--sp-fs-h4-m);
    --sp-fs-body-xl: var(--sp-fs-body-xl-m);
    --sp-fs-body-lg: var(--sp-fs-body-lg-m);
    --sp-fs-body:    var(--sp-fs-body-m);
    --sp-fs-body-sm: var(--sp-fs-body-sm-m);
  }
}

/* ─── SEMANTIC TYPE PRESETS ─────────────────────── */
.sp-h0         { font: var(--sp-fw-regular) var(--sp-fs-h0)/var(--sp-lh-tight) var(--sp-font-display); color: var(--sp-ink-2); letter-spacing:-0.02em; }
.sp-h1, h1.sp { font: var(--sp-fw-regular) var(--sp-fs-h1)/var(--sp-lh-heading) var(--sp-font-display); color: var(--sp-ink-2); letter-spacing:-0.02em; }
.sp-h2, h2.sp { font: var(--sp-fw-medium) var(--sp-fs-h2)/var(--sp-lh-heading) var(--sp-font-display); color: var(--sp-ink-2); letter-spacing:-0.01em; }
.sp-h3, h3.sp { font: var(--sp-fw-semi) var(--sp-fs-h3)/var(--sp-lh-heading) var(--sp-font-display); color: var(--sp-ink-2); }
.sp-h4, h4.sp { font: var(--sp-fw-semi) var(--sp-fs-h4)/var(--sp-lh-heading) var(--sp-font-sans);  color: var(--sp-ink-2); }
.sp-body-xl    { font: var(--sp-fw-regular) var(--sp-fs-body-xl)/var(--sp-lh-body) var(--sp-font-sans); color: var(--sp-ink); }
.sp-body-xl-b  { font: var(--sp-fw-semi) var(--sp-fs-body-xl)/var(--sp-lh-body) var(--sp-font-sans); color: var(--sp-ink-2); }
.sp-body-lg    { font: var(--sp-fw-regular) var(--sp-fs-body-lg)/var(--sp-lh-body) var(--sp-font-sans); color: var(--sp-ink); }
.sp-body-lg-b  { font: var(--sp-fw-semi) var(--sp-fs-body-lg)/var(--sp-lh-body) var(--sp-font-sans); color: var(--sp-ink-2); }
.sp-body       { font: var(--sp-fw-regular) var(--sp-fs-body)/var(--sp-lh-body)    var(--sp-font-sans); color: var(--sp-ink); }
.sp-body-b     { font: var(--sp-fw-semi) var(--sp-fs-body)/var(--sp-lh-body)    var(--sp-font-sans); color: var(--sp-ink-2); }
.sp-body-sm    { font: var(--sp-fw-regular) var(--sp-fs-body-sm)/1.5               var(--sp-font-sans); color: var(--sp-ink); }
.sp-body-sm-b  { font: var(--sp-fw-semi) var(--sp-fs-body-sm)/1.5               var(--sp-font-sans); color: var(--sp-ink-2); }
.sp-btn-label  { font: var(--sp-fw-medium) var(--sp-fs-body)/1 var(--sp-font-sans); }
.sp-hairline   { font: var(--sp-fw-semi) var(--sp-fs-body)/1 var(--sp-font-utility); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-ink); }
.sp-hairline-sm{ font: var(--sp-fw-semi) var(--sp-fs-body-sm)/1 var(--sp-font-utility); text-transform: uppercase; letter-spacing: 0.12em; color: var(--sp-ink); }
.sp-link       { color: var(--sp-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ─── MEASURE / LINE LENGTH ─────────────────────────────────────────────
 * Apply to containing elements, not typographic classes directly.
 * See typography-handoff.md §9 for full guidance. */
.sp-body-column  { max-width: var(--sp-measure); }
.sp-prose        { max-width: var(--sp-measure-prose); }
.sp-narrow-copy  { max-width: var(--sp-measure-narrow); }

/* ─── VERTICAL RHYTHM HELPERS ───────────────────────────────────────────
 * Starting values — component-level overrides are expected.
 * See typography-handoff.md §10 for full guidance. */
.sp-article p           { margin-bottom: var(--sp-space-prose-block); }
.sp-article h2,
.sp-article h3          { margin-top: var(--sp-space-heading-above); margin-bottom: var(--sp-space-heading-below); }
.sp-caption             { margin-top: var(--sp-space-caption); }

/* ─── TRUNCATION HELPERS ─────────────────────────────────────────────────
 * Never apply to interactive labels (buttons, nav, form labels).
 * Always pair truncated elements with a title attribute or accessible tooltip.
 * See typography-handoff.md §14 for full guidance. */
.sp-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── FOCUS STYLES ───────────────────────────────────────────────────────
 * Meets WCAG 2.4.7 / 2.4.11. See typography-handoff.md §12.
 * Full focus system lives in focus.css — these are the text-element rules only. */
.sp-link:focus-visible {
  outline: 2px solid var(--sp-ink);   /* #042E33 — 15.1:1 on white */
  outline-offset: 2px;
  border-radius: 2px;
}
[data-theme="dark"] .sp-link:focus-visible {
  outline-color: var(--spd-focus-ring); /* #8FE7D8 — 11.2:1 on --spd-bg */
}

/* ─── PLACEHOLDER & DISABLED STATES ─────────────────────────────────────
 * See typography-handoff.md §15 for full usage restrictions. */
::placeholder {
  color: var(--sp-fg-2); /* Light: #7B9C9E — placeholder only. Dark: #7FA3A5 via --spd-text-subtle */
  opacity: 1;            /* Firefox reduces opacity by default — reset it */
}
[disabled], [aria-disabled="true"] {
  color: var(--sp-fg-1); /* Light: #668182. Dark: #A8C7C8 via --spd-text-muted */
  cursor: not-allowed;
}
[data-theme="dark"] [disabled],
[data-theme="dark"] [aria-disabled="true"] {
  color: var(--spd-text-disabled); /* #4F6E71 — visually distinct disabled on dark */
}

/* ─── WEIGHT POLICY SAFETY NET ──────────────────────────────────────────
 * Any element that tries to render at 700+ is clamped back to SemiBold.
 * The cascade targets both the `font-weight` property and the keyword
 * forms. This is a guardrail, not a license — fix the source declaration.
 * Scoped to elements that inherit the brand font so we don't touch
 * embedded third-party widgets. */
body, body *, .sp-scope, .sp-scope * {
  font-synthesis-weight: none; /* never fake a bolder face */
}
:where(body, body *, .sp-scope, .sp-scope *)[style*="font-weight:700"],
:where(body, body *, .sp-scope, .sp-scope *)[style*="font-weight: 700"],
:where(body, body *, .sp-scope, .sp-scope *)[style*="font-weight:800"],
:where(body, body *, .sp-scope, .sp-scope *)[style*="font-weight: 800"],
:where(body, body *, .sp-scope, .sp-scope *)[style*="font-weight:900"],
:where(body, body *, .sp-scope, .sp-scope *)[style*="font-weight: 900"]{
  font-weight: 600 !important;
}
/* Native HTML bold elements → SemiBold, not Bold. */
b, strong { font-weight: 600; }