/* base.css — Imredi brand tokens (light default) */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { background: none; border: 0; cursor: pointer; }

:root {
  /* Imredi brand — light default */
  --bg: #FFFFFF;
  --bg-alt: #F6F7F8;        /* soft card/section background */
  --surface: #FFFFFF;
  --surface-2: #F6F7F8;
  --surface-3: #EDEEF0;
  --border: #E3E5E8;
  --border-strong: #CFD2D6;
  --text: #121212;          /* primary ink */
  --text-dim: #3A3F44;
  --text-muted: #828282;
  --accent: #BC0A29;        /* Imredi red */
  --accent-hover: #A00822;
  --accent-soft: #FBE9ED;
  --accent-ink: #FFFFFF;
  --success: #1B8A4F;
  --warning: #E08A00;
  --danger: #BC0A29;

  /* Type */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-hero: clamp(40px, 5.2vw, 64px);
  --text-display: clamp(30px, 3.6vw, 44px);

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

  /* Radius — Imredi uses generous rounding */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(18, 18, 18, 0.04), 0 1px 1px rgba(18, 18, 18, 0.02);
  --shadow-md: 0 4px 12px rgba(18, 18, 18, 0.06), 0 2px 4px rgba(18, 18, 18, 0.03);
  --shadow-lg: 0 12px 32px rgba(18, 18, 18, 0.08), 0 4px 8px rgba(18, 18, 18, 0.04);

  /* Misc */
  --container: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

[data-theme="dark"] {
  --bg: #0F1113;
  --bg-alt: #161A1D;
  --surface: #1A1E22;
  --surface-2: #222830;
  --surface-3: #2B323B;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #F2F3F5;
  --text-dim: #B4BAC1;
  --text-muted: #7A828B;
  --accent: #E84762;       /* brighter red for dark */
  --accent-hover: #F26079;
  --accent-soft: rgba(232, 71, 98, 0.14);
  --accent-ink: #0F1113;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
}

/* Numeric tabular for data */
.num { font-variant-numeric: tabular-nums lining-nums; }