/* ==========================================================================
   base.css — reset, design tokens, typography
   ========================================================================== */

:root {
  /* Type: body ≥ 16 px, UI ≥ 12 px */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-stat: 1.25rem;
  --text-label: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --font-display: 'General Sans', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
  --font-ui: var(--font-body);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --duration-fast: 120ms;
  --duration-ui: 160ms;
  --ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-interactive: var(--duration-ui) var(--ease-ui);

  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-focus) 28%, transparent);

  --control-height: 2.5rem;
  --control-height-sm: 2rem;

  /*
   * Topbar foundation tokens (pilotaż UI — wyłącznie pasek konta/narzędzi).
   * Aliasują istniejącą skalę; nie zastępują globalnych --space/--radius.
   * Kompakt: mniejszy pad/gap; touch target 44px bez zmian.
   */
  --topbar-pad-y: var(--space-1);
  --topbar-pad-x: var(--space-4);
  --topbar-gap: var(--space-1);
  --topbar-gap-row: var(--space-1);
  --topbar-cluster-gap: var(--space-2);
  --topbar-radius: var(--radius-md);
  --topbar-control-height: 2.75rem; /* 44px touch target */
  --topbar-control-height-sm: var(--control-height-sm);
  /* Prefixed — do not introduce global --icon-size-* outside the topbar pilot. */
  --topbar-icon-size-sm: 1rem;
  --topbar-icon-size-md: 1.125rem;
  --topbar-focus-ring: var(--focus-ring);
  --topbar-focus-outline: var(--focus-ring-width) solid var(--color-focus);
  --topbar-focus-offset: var(--focus-ring-offset);
}

/* ---- Color system: spokojny system operacyjny (ciepłe tła, atrament, morski akcent) ---- */
:root,
[data-theme='light'] {
  --color-bg: #f3f1ec;
  --color-surface: #fbfaf7;
  --color-surface-2: #f6f4ef;
  --color-surface-offset: #ece9e2;
  --color-divider: color-mix(in srgb, #3d392f 12%, transparent);
  --color-border: color-mix(in srgb, #3d392f 16%, transparent);

  --color-text: #1c1914;
  --color-text-muted: #5a554c;
  --color-text-faint: #6f6a62;
  --color-text-inverse: #fbfaf7;

  --color-primary: #134e5c;
  --color-primary-hover: #0f3f4a;
  --color-primary-active: #0c3440;
  --color-primary-highlight: #dcecef;
  --color-on-primary: #fbfaf7;

  --color-success: #2d6a45;
  --color-success-highlight: #dceee3;

  --color-warning: #8a6414;
  --color-warning-highlight: #f3e6c8;

  --color-error: #9e3b35;
  --color-error-highlight: #f3ddd9;
  --color-danger: #9e3b35;
  --color-danger-highlight: #f3ddd9;

  --color-blue: var(--color-primary);
  --color-blue-highlight: var(--color-primary-highlight);

  --color-focus: #134e5c;
  --color-grid-line: #ddd8ce;
  --color-panel: var(--color-bg);
  --color-input: var(--color-surface);
  --color-overlay: color-mix(in srgb, #1c1914 42%, transparent);
  color-scheme: light;

  --shadow-sm: none;
  --shadow-md: 0 8px 24px color-mix(in srgb, #1c1914 10%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, #1c1914 16%, transparent);
}

[data-theme='dark'] {
  --color-bg: #141311;
  --color-panel: #1b1a17;
  --color-surface: #22201c;
  --color-surface-2: #2a2722;
  --color-input: #2c2924;
  --color-surface-offset: #332f29;
  --color-divider: color-mix(in srgb, #ece8e1 12%, transparent);
  --color-border: color-mix(in srgb, #ece8e1 16%, transparent);

  --color-text: #ece8e1;
  --color-text-muted: #a39c92;
  --color-text-faint: #8a8378;
  --color-text-inverse: #141311;

  --color-primary: #6ba8b4;
  --color-primary-hover: #82b8c2;
  --color-primary-active: #98c6ce;
  --color-primary-highlight: #1a3338;
  --color-on-primary: #0e1c20;

  --color-success: #6aaf84;
  --color-success-highlight: #1d3326;

  --color-warning: #d2b36a;
  --color-warning-highlight: #3a301c;

  --color-error: #d08078;
  --color-error-highlight: #3a2325;
  --color-danger: #d08078;
  --color-danger-highlight: #3a2325;

  --color-blue: var(--color-primary);
  --color-blue-highlight: var(--color-primary-highlight);

  --color-focus: #6ba8b4;
  --color-grid-line: #4a453d;
  --color-overlay: color-mix(in srgb, #050504 62%, transparent);
  color-scheme: dark;

  --shadow-sm: none;
  --shadow-md: 0 8px 24px color-mix(in srgb, #000 45%, transparent);
  --shadow-lg: 0 16px 40px color-mix(in srgb, #000 55%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #141311;
    --color-panel: #1b1a17;
    --color-surface: #22201c;
    --color-surface-2: #2a2722;
    --color-input: #2c2924;
    --color-surface-offset: #332f29;
    --color-divider: color-mix(in srgb, #ece8e1 12%, transparent);
    --color-border: color-mix(in srgb, #ece8e1 16%, transparent);
    --color-text: #ece8e1;
    --color-text-muted: #a39c92;
    --color-text-faint: #8a8378;
    --color-text-inverse: #141311;
    --color-primary: #6ba8b4;
    --color-primary-hover: #82b8c2;
    --color-primary-active: #98c6ce;
    --color-primary-highlight: #1a3338;
    --color-on-primary: #0e1c20;
    --color-success: #6aaf84;
    --color-success-highlight: #1d3326;
    --color-warning: #d2b36a;
    --color-warning-highlight: #3a301c;
    --color-error: #d08078;
    --color-error-highlight: #3a2325;
    --color-danger: #d08078;
    --color-danger-highlight: #3a2325;
    --color-blue: var(--color-primary);
    --color-blue-highlight: var(--color-primary-highlight);
    --color-focus: #6ba8b4;
    --color-grid-line: #4a453d;
    --color-overlay: color-mix(in srgb, #050504 62%, transparent);
    color-scheme: dark;
    --shadow-sm: none;
    --shadow-md: 0 8px 24px color-mix(in srgb, #000 45%, transparent);
    --shadow-lg: 0 16px 40px color-mix(in srgb, #000 55%, transparent);
  }
}

/* ---- Editorial B (kompozycja + warstwy; light/dark via data-theme) ---- */
html[data-appearance='editorial'] {
  --editorial-accent: #7a1f2b;
  --editorial-accent-hover: #641922;
  --editorial-accent-active: #50141b;
  --editorial-on-accent: #fbf7f6;
  --editorial-void: #0e0c0c;
  --editorial-rail: #161314;
  --editorial-card: #1c1819;
  --editorial-card-edge: color-mix(in srgb, #f2e6e8 14%, transparent);
  --editorial-hero-min: 4.75rem;
  --editorial-hero-max: 6.5rem;
  --radius-sm: 0.125rem;
  --radius-md: 0.1875rem;
  --radius-lg: 0.25rem;
  --radius-xl: 0.3125rem;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

html[data-appearance='editorial'][data-theme='light'],
html[data-appearance='editorial']:not([data-theme='dark']) {
  --editorial-void: #f3ece6;
  --editorial-rail: #ebe2da;
  --editorial-card: #fffaf6;
  --editorial-card-edge: color-mix(in srgb, #3a2a28 16%, transparent);
  --color-bg: var(--editorial-void);
  --color-surface: var(--editorial-card);
  --color-surface-2: #f3ebe4;
  --color-surface-offset: #ebe2da;
  --color-divider: color-mix(in srgb, #3a2a28 12%, transparent);
  --color-border: var(--editorial-card-edge);
  --color-text: #1f1614;
  --color-text-muted: #5c4a46;
  --color-text-faint: #746560;
  --color-text-inverse: #fffaf6;
  --color-primary: var(--editorial-accent);
  --color-primary-hover: var(--editorial-accent-hover);
  --color-primary-active: var(--editorial-accent-active);
  --color-primary-highlight: #f0e2e4;
  --color-on-primary: var(--editorial-on-accent);
  --color-focus: var(--editorial-accent);
  --color-blue: var(--editorial-accent);
  --color-blue-highlight: var(--color-primary-highlight);
  --color-panel: var(--editorial-rail);
  --color-input: #fffaf6;
  --color-grid-line: #e2d6ce;
  color-scheme: light;
}

html[data-appearance='editorial'][data-theme='dark'] {
  --editorial-accent: #9e2436;
  --editorial-accent-hover: #b3263a;
  --editorial-accent-active: #861a2b;
  --editorial-void: #0c0a0a;
  --editorial-rail: #121012;
  --editorial-card: #1a1617;
  --editorial-card-edge: color-mix(in srgb, #f2e6e8 14%, transparent);
  --color-bg: var(--editorial-void);
  --color-panel: var(--editorial-rail);
  --color-surface: var(--editorial-card);
  --color-surface-2: #241e1f;
  --color-input: #2a2224;
  --color-surface-offset: #2e2628;
  --color-divider: color-mix(in srgb, #f0e6e2 12%, transparent);
  --color-border: var(--editorial-card-edge);
  --color-text: #f3e9eb;
  --color-text-muted: #c4a8ae;
  --color-text-faint: #9a7a82;
  --color-text-inverse: #0c0a0a;
  --color-primary: var(--editorial-accent);
  --color-primary-hover: var(--editorial-accent-hover);
  --color-primary-active: var(--editorial-accent-active);
  --color-primary-highlight: #3a1a20;
  --color-on-primary: var(--editorial-on-accent);
  --color-focus: #e45a6c;
  --color-blue: var(--editorial-accent);
  --color-blue-highlight: var(--color-primary-highlight);
  --color-grid-line: #3a282c;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  html[data-appearance='editorial']:not([data-theme]) {
    --editorial-accent: #9e2436;
    --editorial-accent-hover: #b3263a;
    --editorial-accent-active: #861a2b;
    --editorial-void: #0c0a0a;
    --editorial-rail: #121012;
    --editorial-card: #1a1617;
    --editorial-card-edge: color-mix(in srgb, #f2e6e8 14%, transparent);
    --color-bg: var(--editorial-void);
    --color-panel: var(--editorial-rail);
    --color-surface: var(--editorial-card);
    --color-surface-2: #241e1f;
    --color-input: #2a2224;
    --color-surface-offset: #2e2628;
    --color-divider: color-mix(in srgb, #f0e6e2 12%, transparent);
    --color-border: var(--editorial-card-edge);
    --color-text: #f3e9eb;
    --color-text-muted: #c4a8ae;
    --color-text-faint: #9a7a82;
    --color-text-inverse: #0c0a0a;
    --color-primary: var(--editorial-accent);
    --color-primary-hover: var(--editorial-accent-hover);
    --color-primary-active: var(--editorial-accent-active);
    --color-primary-highlight: #3a1a20;
    --color-on-primary: var(--editorial-on-accent);
    --color-focus: #e45a6c;
    --color-blue: var(--editorial-accent);
    --color-blue-highlight: var(--color-primary-highlight);
    --color-grid-line: #3a282c;
    color-scheme: dark;
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100dvh;
  line-height: 1.5;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
ul[role='list'], ol[role='list'] { list-style: none; }
ul { list-style: none; }

input, button, textarea, select { font: inherit; color: inherit; }
input, textarea, select {
  color: var(--color-text);
  background-color: var(--color-input);
}
input[type='number'],
.tabular-nums {
  font-variant-numeric: tabular-nums;
}
::placeholder {
  color: var(--color-text-faint);
  opacity: 1;
}
input:disabled, textarea:disabled, select:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

h1, h2, h3, h4 { text-wrap: balance; line-height: 1.25; font-family: var(--font-display); }
p, li { text-wrap: pretty; }

::selection { background: color-mix(in oklab, var(--color-primary) 22%, transparent); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

a, button, [role='button'], input, textarea, select {
  transition: color var(--transition-interactive), background var(--transition-interactive),
    border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

/* Skip-link: reveal on :focus and :focus-visible (must clear clip). */
.sr-only:focus,
.sr-only:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  border-width: 0;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--focus-ring);
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  z-index: 100;
}