/* 01-tokens.css — Tétlabor Szalon
 * CSS variables: paleta, tipografia, spacing, radius, motion.
 * NIE shadow (poza focus-ring). NIE gradient. NIE dark-mode.
 */

:root {
  /* Paper / surfaces — warmer parchment shift */
  --c-bone:        #F2EBDC;
  --c-bone-alt:    #E5D9BD;
  --c-paper:       #FAF7EE;

  /* Ink — slightly warmer black */
  --c-ink:         #1A1410;
  --c-ink-muted:   #6B5E4C;
  --c-stone:       #B5A78F;

  /* Oxblood → deeper burgundy/wine (less brick, more salon-19c) */
  --c-ox:          #8B2E1F;
  --c-ox-deep:     #5E1A10;
  --c-ox-wash:     #ECD4CA;

  /* Sage — secondary (was teal, now more muted-green) */
  --c-teal:        #2D5C46;
  --c-teal-deep:   #1F4030;
  --c-teal-wash:   #D9E4DB;

  /* Bronze — tertiary (was mustard, now deeper) */
  --c-mustard:     #A87A1E;
  --c-mustard-wash:#EFDFB5;

  /* Amber — footnotes */
  --c-amber:       #7B5018;

  /* Ink section block (rare) */
  --c-ink-bg:        #1A1410;
  --c-ink-bg-text:   #F2EBDC;
  --c-ink-bg-muted:  #9E9282;
  --c-ink-line:      #2E2418;

  /* Lines */
  --c-line:        #D4C8B0;
  --c-line-ink:    #2E2418;

  /* Functional */
  --c-error:       #8B2D1F;
  --c-success:     #2D5C46;

  /* Focus ring — JEDYNY dozwolony shadow */
  --shadow-focus:  0 0 0 3px rgba(139, 46, 31, 0.22);

  /* Fonts */
  --f-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono:    'IBM Plex Mono', 'Menlo', Consolas, monospace;

  /* Type scale */
  --f-display-hero: clamp(2.5rem, 5.6vw, 4.25rem);
  --f-display-xl:   clamp(2.125rem, 4.2vw, 3.125rem);
  --f-display-l:    clamp(1.625rem, 3vw, 2.125rem);
  --f-display-m:    1.375rem;

  --f-body-l:       1.125rem;
  --f-body:         1rem;
  --f-body-s:       0.9375rem;
  --f-caption:      0.8125rem;
  --f-label:        0.75rem;
  --f-mono:         0.875rem;
  --f-mono-s:       0.6875rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-prose:  1.7;
  --lh-mono:   1.5;

  /* Grid / spacing */
  --container:       1100px;
  --container-wide:  1240px;
  --prose:           640px;
  --gutter:          32px;
  --gutter-m:        20px;

  --space-section:    120px;
  --space-section-m:  80px;
  --space-section-s:  56px;
  --space-block:      56px;
  --space-item:       32px;

  /* Radius */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;

  /* Motion */
  --t-fast: 120ms;
  --t-mid:  240ms;
  --t-slow: 380ms;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1024px) {
  :root { --space-section: var(--space-section-m); --gutter: var(--gutter-m); }
}
@media (max-width: 640px) {
  :root { --space-section: var(--space-section-s); }
}