/* Jaspisowa — design tokens. Wygenerowane z brand/tokens.json. */

:root {
  /* color — jasny (domyślny) */
  --surface-100: #FFFFFF;
  --surface-200: #F7F1E7;
  --surface-300: #EEE3CF;
  --ink: #2A1712;
  --ink-muted: #5C4238;
  --border: rgba(126,38,23,0.16);
  --brand-700: #7E2617;
  --brand-600: #A3311C;
  --brand-500: #BF3E26;
  --brand-400: #D95F3F;
  --on-brand: #FBF5EC;
  --success: #217A4E;
  --warning: #96601C;
  --danger: #C21F1F;
  --info: #2F5FA0;

  /* type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-text: 'Inter', system-ui, sans-serif;

  /* spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 96px;

  /* radius */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-sm: 0 8px 24px -12px rgba(44,15,10,0.25);
  --shadow-lg: 0 24px 60px -20px rgba(44,15,10,0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-100: #1B120E;
    --surface-200: #241A14;
    --surface-300: #2E211A;
    --ink: #F3ECE3;
    --ink-muted: #C9B7A9;
    --border: rgba(243,236,227,0.14);
    --brand-700: #6B2013;
    --brand-600: #E2704F;
    --brand-500: #EA8A66;
    --brand-400: #F4A886;
    --on-brand: #241208;
    --success: #4FBE85;
    --warning: #E3A855;
    --danger: #ED5B4E;
    --info: #7FB0E8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-100: #1B120E;
  --surface-200: #241A14;
  --surface-300: #2E211A;
  --ink: #F3ECE3;
  --ink-muted: #C9B7A9;
  --border: rgba(243,236,227,0.14);
  --brand-700: #6B2013;
  --brand-600: #E2704F;
  --brand-500: #EA8A66;
  --brand-400: #F4A886;
  --on-brand: #241208;
  --success: #4FBE85;
  --warning: #E3A855;
  --danger: #ED5B4E;
  --info: #7FB0E8;
}

/* type scale — klasy pomocnicze (opcjonalne, można też czytać same zmienne --font-*) */
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 66px; font-weight: 600; letter-spacing: -0.5px; }
.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.3px; }
.display-md { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; }
.body-lg     { font-family: var(--font-text); font-size: 18px; line-height: 29px; font-weight: 400; }
.body        { font-family: var(--font-text); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-sm     { font-family: var(--font-text); font-size: 14px; line-height: 22px; font-weight: 400; }
.label       { font-family: var(--font-text); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; }
.caption     { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; }