/* Na Zmianę design tokens. Core values come from the approved concept; ramps and semantic colours are derived from the plum seed. */
:root {
  /* Brand: night plum (seed #4A2A5E) */
  --plum: #4A2A5E;        /* ground between panels, primary button, headings on white */
  --plum-d: #35193F;      /* hero gradient, pressed button, deep ground */
  --plum-t: #EDE6F1;      /* selected filter, label header, hover sweep */
  --plum-m: #7A5A8C;      /* stitching, input border, icons on white; never text on plum */
  --paper: #FFFFFF;       /* panels */
  --ink: #241A2B;         /* body text */
  --ink-2: #5A4D63;       /* secondary text, field labels */
  --line: #DDD3E3;        /* decorative hairlines only (1.45:1 on white) */

  /* Plum ramp (OKLCH-derived; the seed is step 900) */
  --plum-50: #F8F6FA;
  --plum-100: #F0EAF4;
  --plum-200: #E3DAEB;
  --plum-300: #D2C2DE;
  --plum-400: #BCA2CF;
  --plum-500: #A383B9;
  --plum-600: #85639B;
  --plum-700: #735489;
  --plum-800: #5D436E;
  --plum-900: #4A2A5E;
  --plum-950: #2F2437;

  /* Semantic (always paired with an icon and a word, never hue alone) */
  --ok: #1D5522;   --ok-bg: #E6F2E7;
  --warn: #604200; --warn-bg: #F6EBD3;
  --err: #742E29;  --err-bg: #F7E4E2;
  --info: #124A7B; --info-bg: #E1EDF8;

  /* Roles */
  --color-ground: var(--plum);
  --color-surface: var(--paper);
  --color-surface-tint: var(--plum-t);
  --color-text: var(--ink);
  --color-text-muted: var(--ink-2);
  --color-heading: var(--plum);
  --color-on-ground: #FFFFFF;
  --color-action: var(--plum);
  --color-action-hover-fill: var(--plum-t);
  --color-action-pressed: var(--plum-d);
  --color-control-border: var(--plum-m);
  --color-focus-on-paper: var(--plum);
  --color-focus-on-ground: #FFFFFF;
  --color-disabled-text: var(--ink-2);

  /* Typefaces: one variable family, weights 400-800 */
  --font: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --weight-body: 400;
  --weight-strong: 700;
  --weight-display: 800;

  /* Type scale (ratio 1.25 for text, fluid for display) */
  --text-xs: 0.875rem;    /* 14 px, field labels (uppercase) */
  --text-sm: 1rem;        /* 16 px, meta */
  --text-md: 1.0625rem;   /* 17 px, controls */
  --text-base: 1.1875rem; /* 19 px, body */
  --text-lg: 1.375rem;    /* 22 px, lead */
  --text-xl: 1.5rem;      /* 24 px, list headings */
  --text-2xl: 2.125rem;   /* 34 px, price on label */
  --text-fact: clamp(2.75rem, 5vw, 5.25rem);   /* 44-84 px, big facts */
  --text-h2: clamp(2.125rem, 3.6vw, 3.75rem);  /* 34-60 px */
  --text-h1: clamp(2.5rem, 4.2vw, 4.5rem);     /* 40-72 px */
  --leading-body: 1.55;
  --leading-tight: 1.08;
  --tracking-caps: 0.06em;
  --measure: 72ch;

  /* Spacing (4 px base) */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --gutter: clamp(12px, 1.5vw, 36px);
  --panel-pad-y: 56px;
  --panel-pad-x: clamp(20px, 4vw, 72px);
  --panel-overlap: 48px;
  --band: clamp(48px, 6vw, 104px);  /* full-width plum band between two white panels */
  --container: none;

  /* Control sizes */
  --control-h: 48px;
  --control-h-sm: 40px;
  --touch-min: 44px;

  /* Radii: soft personality */
  --radius-sm: 8px;      /* label header, tooltip */
  --radius-md: 12px;     /* chips, selects, small button */
  --radius-btn: 14px;    /* button */
  --radius-lg: 16px;     /* care label */
  --radius-img: 18px;    /* photos */
  --radius-panel: 24px;  /* folded panel */
  --radius-pill: 999px;  /* language switch, tags */

  /* Borders */
  --border-1: 1px;
  --border-2: 2px;       /* controls, selection */
  --border-focus: 3px;
  --focus-offset: 2px;
  --focus-halo: 3px;

  /* Shadows: plum-tinted, one light direction (from above) */
  --shadow-0: none;
  --shadow-1: 0 2px 0 var(--line);
  --shadow-2: 0 14px 30px rgba(36, 26, 43, 0.25);
  --shadow-panel: 0 -6px 0 rgba(255, 255, 255, 0.08), var(--shadow-2);
  --shadow-lift: 0 14px 24px rgba(74, 42, 94, 0.22);
  --crease-dark: rgba(36, 26, 43, 0.07);
  --crease-light: rgba(255, 255, 255, 0.9);

  /* Opacity scale */
  --opacity-hover: 0.08;
  --opacity-pressed: 0.12;
  --opacity-disabled: 0.38;
  --opacity-disabled-container: 0.12;
  --opacity-scrim: 0.6;
  --stitch-on-ground: rgba(255, 255, 255, 0.5);

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 250ms;
  --dur-base: 350ms;
  --dur-sweep: 450ms;
  --dur-unfold: 800ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-sweep: 0.01ms; --dur-unfold: 0.01ms; }
}