/* ============================================================
   Dogalicious Design System — Colors & Type
   ============================================================
   AI-powered pet wellness marketplace.
   Casual + fun + trustworthy. Chunky, rounded, sticker-style.
============================================================ */

/* --- Webfonts --- */
/* Latin brand fonts — self-hosted (data-URI), zero CDN. See fonts/latin-fonts.css */
@import url('fonts/latin-fonts.css');

/* ============================================================
   Traditional Chinese — GenSenRounded2 TC (源柔黑 2 TC)
   ============================================================
   Real brand font, SELF-HOSTED. Only 4 weights ship in /fonts:
     R (400), M (500), B (700), H (900).
   (EL/250 and L/300 are NOT shipped — earlier @font-face rules
    referenced them and 404'd on every load. Removed.)

   ⚠️ DEPLOYMENT — the #1 cause of Chinese falling back to the
   system gothic on a server is these files not being reachable:
     • The `fonts/` folder MUST be deployed next to this CSS file
       (these url()s are RELATIVE to the CSS's own URL).
     • If you serve this CSS from a different path than the fonts,
       change `fonts/…` below to a root-absolute path, e.g.
       `/fonts/GenSenRounded2TW-R.otf`.
     • Your server must serve .otf as `font/otf` (or
       application/octet-stream) — some configs block it.
   Verify in DevTools → Network: each .otf should be 200, not 404.
============================================================ */

/* Weighted family used by every --font-*-zh stack.
   Weights 200/300 alias to R so light requests still render in-brand
   instead of dropping to the system font. */
@font-face {
  font-family: 'GenSenRounded2 TC';
  src: url('fonts/GenSenRounded2TW-R.otf') format('opentype');
  font-weight: 200 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GenSenRounded2 TC';
  src: url('fonts/GenSenRounded2TW-M.otf') format('opentype');
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GenSenRounded2 TC';
  src: url('fonts/GenSenRounded2TW-B.otf') format('opentype');
  font-weight: 700 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'GenSenRounded2 TC';
  src: url('fonts/GenSenRounded2TW-H.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE (from brief) ---------- */
  --peach:       #f6d4b4;   /* warm cream / peach — backgrounds, sticker outlines */
  --mint:        #8ffcff;   /* bright mint/cyan — playful highlights */
  --teal:        #00bbcc;   /* primary CTA / trust anchor */
  --coral:       #fc9f5b;   /* warm orange/coral — energy, tags */
  --forest:      #33673b;   /* deep forest green — "natural/wellness" anchor */
  --lime:        #a5e000;   /* lime pop — health, go, success accents */
  --spring:      #2af47b;   /* vibrant spring green — badges, "new", online */

  /* ---------- EXTENDED NEUTRALS ---------- */
  --ink:         #1a1613;   /* near-black with warm tint (matches logo ink) */
  --ink-soft:    #3a2e26;   /* illustration outline brown */
  --charcoal:    #5a4b40;
  --stone:       #8a7a6e;
  --sand:        #d8c6b5;
  --cream:       #fff7ec;   /* page background cream */
  --paper:       #fffaf2;   /* card background (off-white, warm) */
  --white:       #ffffff;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:              var(--cream);
  --bg-alt:          var(--peach);
  --surface:         var(--paper);
  --surface-raised:  var(--white);

  --fg1:             var(--ink);        /* primary text */
  --fg2:             var(--charcoal);   /* secondary text */
  --fg3:             var(--stone);      /* tertiary / captions */
  --fg-on-dark:      var(--cream);
  --fg-on-brand:     var(--white);

  --border:          #ead9c5;
  --border-strong:   var(--sand);
  --divider:         #f1e4d0;

  --brand:           var(--teal);       /* primary brand color (trust) */
  --brand-hover:     #009dac;
  --brand-press:     #008795;
  --accent:          var(--coral);      /* secondary accent (warmth) */
  --accent-hover:    #f28940;
  --success:         var(--spring);
  --success-ink:     var(--forest);
  --warn:            #ffb703;
  --danger:          #e04a3b;
  --info:            var(--mint);

  /* ---------- TYPOGRAPHY FAMILIES ----------
     SUBSTITUTIONS (flagged to user):
       Logo/Display  → Baloo 2 (closest free match to custom chunky rounded italic)
       UI/Display    → Fredoka (friendly rounded geometric)
       Body/UI       → Nunito (rounded humanist, highly legible)
       Handwriting   → Caveat (optional script/handwritten)
  */
  /* English-first stacks with Traditional Chinese fallback.
     Latin chars render via Baloo 2/Fredoka/Nunito; Han chars fall through to
     GenSenRounded2 TC — a genuinely rounded-chunky face that mirrors Baloo 2's vibe. */
  --font-display:  'Baloo 2', 'Fredoka', 'GenSenRounded2 TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-ui:       'Fredoka', 'Nunito', 'GenSenRounded2 TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --font-body:     'Nunito', 'GenSenRounded2 TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand:     'Caveat', 'GenSenRounded2 TC', 'Comic Sans MS', cursive;
  --font-mono:     ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, 'GenSenRounded2 TC', monospace;

  /* TC-first stacks — use on <html lang="zh-Hant"> or `.lang-zh` wrappers. */
  --font-display-zh: 'GenSenRounded2 TC', 'Baloo 2', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-ui-zh:      'GenSenRounded2 TC', 'Fredoka', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-body-zh:    'GenSenRounded2 TC', 'Nunito', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-hand-zh:    'GenSenRounded2 TC', 'Caveat', cursive;

  /* ---------- TYPE SCALE ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  84px;

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

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:     0.04em;

  /* ---------- SPACING (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;

  /* ---------- RADII (generous, sticker-ish) ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  40px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --border-thin:   1px solid var(--border);
  --border-med:    2px solid var(--border-strong);
  --border-ink:    3px solid var(--ink);       /* sticker / illustrated feel */

  /* ---------- SHADOWS (soft + "sticker" chunky) ---------- */
  --shadow-sm:     0 1px 2px rgba(26,22,19,.06), 0 1px 3px rgba(26,22,19,.08);
  --shadow-md:     0 4px 10px rgba(26,22,19,.08), 0 2px 4px rgba(26,22,19,.06);
  --shadow-lg:     0 12px 28px rgba(26,22,19,.12), 0 4px 10px rgba(26,22,19,.08);
  --shadow-xl:     0 24px 48px rgba(26,22,19,.18);
  /* "Sticker" chunky offset shadow — the signature brand feel */
  --shadow-sticker:  4px 4px 0 var(--ink);
  --shadow-sticker-lg: 6px 6px 0 var(--ink);
  --shadow-sticker-brand: 4px 4px 0 var(--teal);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.22,1,.36,1);
  --ease-bounce:  cubic-bezier(.34,1.56,.64,1);
  --dur-fast:     120ms;
  --dur-med:      220ms;
  --dur-slow:     380ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h5, .h5 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h6, .h6 {
  font-family: var(--font-ui);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

p, .p {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
  font-weight: var(--fw-medium);
}

small, .small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg3);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--brand);
}

.hand {
  font-family: var(--font-hand);
  font-weight: var(--fw-bold);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

/* ---------- Traditional Chinese overrides ----------
   Apply to a page root with `<html lang="zh-Hant">` OR add class `.lang-zh`
   to any subtree that is primarily Traditional Chinese.
   TC display benefits from slightly tighter line-height and heavier weights
   to match the optical density of Baloo 2. */
:lang(zh-Hant), .lang-zh {
  font-family: var(--font-body-zh);
  letter-spacing: 0;       /* Chinese prefers no negative tracking */
  line-height: 1.55;
}
:lang(zh-Hant) h1, .lang-zh h1,
:lang(zh-Hant) .h1, .lang-zh .h1,
:lang(zh-Hant) h2, .lang-zh h2,
:lang(zh-Hant) .h2, .lang-zh .h2,
:lang(zh-Hant) h3, .lang-zh h3,
:lang(zh-Hant) .h3, .lang-zh .h3,
:lang(zh-Hant) .display, .lang-zh .display {
  font-family: var(--font-display-zh);
  font-weight: 900;         /* GenSenRounded2 TC Heavy for display punch */
  letter-spacing: 0.01em;
  line-height: 1.2;
}
:lang(zh-Hant) h4, .lang-zh h4,
:lang(zh-Hant) h5, .lang-zh h5,
:lang(zh-Hant) h6, .lang-zh h6,
:lang(zh-Hant) .eyebrow, .lang-zh .eyebrow {
  font-family: var(--font-ui-zh);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;      /* uppercase/tracking tricks are Latin-only */
}
:lang(zh-Hant) .hand, .lang-zh .hand {
  font-family: var(--font-hand-zh);
  font-weight: 400;
  letter-spacing: 0;
}

/* Big display hero text */
.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-6xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
}