/* ============================================================
   Bahia Games — Design System
   colors_and_type.css
   Brand color: #FFD037 (sampled directly from the logo)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&family=Audiowide&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color · raw tokens ---------- */
  --bg-yellow:        #FFD037;   /* The brand yellow */
  --bg-yellow-deep:   #F2B800;   /* Pressed / hover */
  --bg-yellow-soft:   #FFF3C2;   /* Tinted bg, hover halo */

  --ink-900: #111418;
  --ink-700: #2A2E33;
  --ink-500: #6B6F75;
  --ink-400: #9498A0;
  --ink-300: #C9CCD1;
  --ink-200: #DDDFE3;
  --ink-100: #EEEFF2;
  --ink-50:  #F6F6F4;

  --paper:  #FFFFFF;
  --canvas: #F6F6F4;

  --ok:     #2BB673;
  --warn:   #F39C12;
  --danger: #E74C3C;
  --info:   #4A90E2;

  /* ---------- Color · semantic tokens ---------- */
  --color-primary:           var(--bg-yellow);
  --color-primary-hover:     var(--bg-yellow-deep);
  --color-primary-soft:      var(--bg-yellow-soft);
  --color-on-primary:        var(--ink-900);

  --color-bg-page:           var(--canvas);
  --color-bg-surface:        var(--paper);
  --color-bg-elevated:       var(--paper);
  --color-bg-hover:          var(--ink-100);
  --color-bg-pressed:        var(--ink-200);
  --color-bg-selected:       var(--bg-yellow-soft);

  --color-fg-default:        var(--ink-900);
  --color-fg-muted:          var(--ink-500);
  --color-fg-subtle:         var(--ink-400);
  --color-fg-on-dark:        #FFFFFF;
  --color-fg-on-yellow:      var(--ink-900);

  --color-border-default:    var(--ink-100);
  --color-border-strong:     var(--ink-300);
  --color-border-focus:      var(--bg-yellow);

  --color-status-ok:         var(--ok);
  --color-status-warn:       var(--warn);
  --color-status-danger:     var(--danger);
  --color-status-info:       var(--info);

  /* ---------- Type · families ---------- */
  --font-display: "Sora", "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --font-accent:  "Audiowide", "Sora", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* ---------- Type · base scale (16px root) ---------- */
  --fs-12: 0.75rem;    /* 12  metadata */
  --fs-13: 0.8125rem;  /* 13  micro labels */
  --fs-14: 0.875rem;   /* 14  ui small */
  --fs-15: 0.9375rem;  /* 15  ui regular */
  --fs-16: 1rem;       /* 16  body */
  --fs-18: 1.125rem;   /* 18  body+ */
  --fs-20: 1.25rem;    /* 20  h5 */
  --fs-24: 1.5rem;     /* 24  h4 */
  --fs-30: 1.875rem;   /* 30  h3 */
  --fs-38: 2.375rem;   /* 38  h2 */
  --fs-48: 3rem;       /* 48  h1 */
  --fs-64: 4rem;       /* 64  display */

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

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-caps:    0.12em;

  /* ---------- 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-24: 96px;

  /* ---------- Radius ---------- */
  --r-sm:   6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-sm: 0 1px 2px rgba(17,20,24,.05), 0 1px 1px rgba(17,20,24,.04);
  --shadow-md: 0 4px 12px rgba(17,20,24,.06), 0 2px 4px rgba(17,20,24,.04);
  --shadow-lg: 0 12px 32px rgba(17,20,24,.10), 0 4px 8px rgba(17,20,24,.06);
  --shadow-glow-yellow: 0 8px 24px rgba(255,208,55,.35);
  --shadow-inset-hairline: inset 0 0 0 1px var(--ink-100);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:   120ms;
  --dur-default: 200ms;
  --dur-panel:   320ms;

  /* ---------- Layout ---------- */
  --layout-sidebar-w:          240px;
  --layout-sidebar-collapsed:  64px;
  --layout-topbar-h:           64px;
  --layout-page-max:           1280px;
}

/* ============================================================
   Semantic typography utility classes
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-default);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-default);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-38);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-default);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--color-fg-default);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--color-fg-default);
}
.t-h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--color-fg-default);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--color-fg-default);
}
.t-body-strong {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--color-fg-default);
}
.t-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.t-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.t-overline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-fg-muted);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-normal);
  color: var(--color-fg-default);
}
.t-accent {
  font-family: var(--font-accent);
  font-weight: var(--fw-regular);
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-fg-default);
}

/* ============================================================
   Element defaults (apply with :where to keep specificity low)
   ============================================================ */

:where(html) {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-fg-default);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(body) { margin: 0; }
:where(h1) { font: var(--fw-bold) var(--fs-48)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0; }
:where(h2) { font: var(--fw-bold) var(--fs-38)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0; }
:where(h3) { font: var(--fw-semibold) var(--fs-30)/var(--lh-snug) var(--font-display); margin: 0; }
:where(h4) { font: var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-display); margin: 0; }
:where(h5) { font: var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-body); margin: 0; }
:where(p)  { font: var(--fw-regular) var(--fs-15)/var(--lh-normal) var(--font-body); margin: 0; }
:where(code, kbd, samp) { font-family: var(--font-mono); font-size: var(--fs-13); }
:where(*, *::before, *::after) { box-sizing: border-box; }