/* =========================================================================
   CULCAT — Colors & Type
   Local art brand from Vietnam. Cats + Vietnamese culture.
   Tuxedo-cat tuxedo palette: black + cream-white, with playful accents
   pulled from Hanoi street life (neon signs, bia hơi, motorbike paint).
   ========================================================================= */

/* ---------- WEB FONTS ---------- */
/* Display: Super Mario 256 — the actual brand font, used on the CULCAT wordmark.
   Body: Fredoka — rounded, friendly, feels young & energetic. */
@font-face {
  font-family: 'Super Mario 256';
  src: url('fonts/SuperMario256.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Bungee&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Core tuxedo palette — the cat */
  --culcat-black:        #0E0E0E;     /* true tuxedo black (ink) */
  --culcat-ink:          #1A1A1A;     /* softer black for body text */
  --culcat-cream:        #F5EFE1;     /* off-white, hand-printed tee feel */
  --culcat-paper:        #FAF6EC;     /* lighter paper for surfaces */
  --culcat-white:        #FFFFFF;

  /* Accent palette — Vietnamese street colors */
  --culcat-red:          #E63329;     /* flag red, phở bò, lucky envelopes */
  --culcat-yellow:       #FFC83D;     /* star yellow, bia hơi crate yellow */
  --culcat-mint:         #7FD1B9;     /* che, retro tile */
  --culcat-sky:          #6FB7D6;     /* enamel blue */
  --culcat-pink:         #F4A4B7;     /* sakura, pork floss */
  --culcat-peach:        #F4C89B;     /* warm highlight */
  --culcat-green:        #2E8B57;     /* banh chung green */

  /* Neutrals */
  --culcat-stone-100:    #EDE6D4;
  --culcat-stone-200:    #D9CFB8;
  --culcat-stone-300:    #B8AD93;
  --culcat-stone-400:    #827963;
  --culcat-stone-500:    #4B4637;
  --culcat-stone-600:    #2A271E;

  /* ---------- SEMANTIC COLOR TOKENS ---------- */
  --bg:                  var(--culcat-cream);
  --bg-alt:              var(--culcat-paper);
  --surface:             var(--culcat-white);
  --surface-inverse:     var(--culcat-black);

  --fg1:                 var(--culcat-ink);      /* primary text */
  --fg2:                 var(--culcat-stone-500); /* secondary text */
  --fg3:                 var(--culcat-stone-400); /* tertiary / captions */
  --fg-on-dark:          var(--culcat-cream);
  --fg-inverse:          var(--culcat-cream);

  --border:              var(--culcat-ink);       /* brand uses heavy borders */
  --border-soft:         var(--culcat-stone-200);
  --border-heavy-width:  3px;

  --accent:              var(--culcat-red);
  --accent-fg:           var(--culcat-cream);
  --highlight:           var(--culcat-yellow);

  --success:             var(--culcat-green);
  --warning:             var(--culcat-yellow);
  --danger:              var(--culcat-red);
  --info:                var(--culcat-sky);

  /* ---------- TYPOGRAPHY ---------- */
  /* "Titan One" = Super-Mario-style display stand-in.
     "Fredoka" = rounded, friendly UI sans.
     "Baloo 2" = slightly chunkier body alt. */
  --font-display:        'Bungee', 'Super Mario 256', system-ui, sans-serif;
  --font-body:           'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs:               11px;
  --fs-sm:               13px;
  --fs-md:               15px;
  --fs-lg:               17px;
  --fs-xl:               20px;
  --fs-2xl:              26px;
  --fs-3xl:              32px;
  --fs-4xl:              42px;
  --fs-5xl:              56px;
  --fs-6xl:              76px;

  --lh-tight:            1.05;
  --lh-snug:             1.25;
  --lh-normal:           1.45;
  --lh-relaxed:          1.6;

  --tracking-display:    -0.01em;
  --tracking-body:       0;
  --tracking-caps:       0.08em;

  /* ---------- RADII ---------- */
  /* Culcat leans generous and rounded — pill buttons, chunky cards */
  --radius-xs:           4px;
  --radius-sm:           8px;
  --radius-md:           14px;
  --radius-lg:           20px;
  --radius-xl:           28px;
  --radius-pill:         999px;

  /* ---------- SHADOWS ---------- */
  /* Hand-printed vibe → prefer HARD offset shadows (sticker-style) over blur */
  --shadow-sticker-sm:   2px 2px 0 var(--culcat-black);
  --shadow-sticker:      4px 4px 0 var(--culcat-black);
  --shadow-sticker-lg:   6px 6px 0 var(--culcat-black);
  --shadow-soft:         0 4px 14px rgba(14,14,14,0.08);
  --shadow-card:         0 8px 24px rgba(14,14,14,0.10);

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

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these instead of raw font-size where possible.
   ========================================================================= */

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;
}

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

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-4);
}

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

h4, .h4, .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg2);
  margin: 0 0 var(--space-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg1);
}

small, .caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg3);
}

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

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--culcat-black); }

/* Utility classes */
.t-display   { font-family: var(--font-display); text-transform: uppercase; }
.t-mono      { font-family: var(--font-mono); }
.t-caps      { text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.t-center    { text-align: center; }

/* Ink border utility — recurring heavy-border look */
.ink-border  { border: var(--border-heavy-width) solid var(--culcat-black); }
.ink-card    {
  border: var(--border-heavy-width) solid var(--culcat-black);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sticker);
}