/* =====================================================================
   Przychodnia Weterynaryjna „Pod Kasztanami” (DEMO) — design tokens
   Redesign 2026-09-28, concept "Pod kasztanami" (art-director + color-expert).
   Direction: design/art-direction.md. Preview: design/concept.html.
   Two colour fields — deep chestnut-leaf green and warm cream — alternating
   with a wave edge; organic blob shapes; Alegreya Sans everywhere.
   ===================================================================== */

/* ---------- Fonts (self-hosted, OFL; latin + latin-ext, one @font-face per subset) ---------- */
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-400italic-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-700-latin-ext.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-800-latin.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("../fonts/alegreya-sans-800-latin-ext.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1EFF, U+2020, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  /* ---------- Palette (art-direction.md §4; hex, contrast checked) ---------- */
  --green-900: #1F4D3A; /* main field, header, footer band */
  --green-800: #26593F; /* species band */
  --green-700: #2E6B4F; /* hover / secondary green, "brand" role */
  --moss-100:  #DCE8D2; /* light green tint: open-status card, selected states */
  --cream:     #FBF4E8; /* warm ground */
  --cream-200: #E8DFC8; /* borders, dashed lines, photo placeholder */
  --ink:       #2B2118; /* bark-brown text */
  --conker:    #7A4B2A; /* chestnut accent: captions, dates, urgent text */
  --candle:    #F5D77A; /* blossom yellow: live badge, primary CTA on green */
  --candle-ink:#8a6a1f;  /* darker candle for hover/active on white */
  --live-dot:  #7ED99A; /* live pulse dot on the green header */
  --error:      #96382B; /* warm red, kept for form validation only */
  --error-bg:   #F7E7E1;

  /* ---------- Legacy alias scales kept for components that read them ---------- */
  --brand-50: #EEF4E9;
  --brand-200: var(--moss-100);
  --brand-300: #A9CBB4;
  --brand-800: var(--green-700);
  --brand-950: var(--green-900);
  --neutral-200: var(--cream-200);

  /* ---------- Semantic roles: light (only theme; no dark mode — deep colour fields already read on OLED/AMOLED) ---------- */
  --color-background: var(--cream);
  --color-surface: #ffffff;
  --color-surface-2: var(--cream-200);
  --color-text: var(--ink);
  --color-heading: var(--ink);
  --color-text-muted: var(--conker);
  --color-border: var(--cream-200);
  --color-border-strong: #C9B98D;
  --color-primary: var(--green-900);
  --color-primary-hover: var(--green-700);
  --color-primary-active: var(--green-800);
  --color-on-primary: var(--cream);
  --color-link: var(--green-900);
  --color-link-hover: var(--green-700);
  --color-focus-ring: var(--green-700);
  --color-secondary-border: var(--ink);
  --color-secondary-hover: var(--moss-100);
  --success: var(--green-700);
  --success-text: var(--green-900);
  --success-subtle: var(--moss-100);
  --warning: var(--conker);
  --warning-text: var(--conker);
  --warning-subtle: var(--cream-200);
  --error-text: var(--error);
  --error-subtle: var(--error-bg);
  --info: var(--green-700);
  --info-text: var(--green-900);
  --info-subtle: var(--moss-100);
  --on-success: #ffffff; --on-warning: var(--ink); --on-error: #ffffff; --on-info: var(--ink);
  --color-accent: var(--candle);
  --color-on-accent: var(--ink);
  --urgent: var(--conker);
  --urgent-text: var(--conker);
  --urgent-subtle: var(--cream-200);
  --urgent-300: #C9A98A;
  --status-open: var(--green-700);
  --status-closing: var(--conker);
  --status-closed: #8B7E68;
  --color-band: var(--moss-100);
  --color-scrim: rgb(31 77 58 / 0.55);
  --shadow-color: 24deg 24% 12%;

  /* ---------- Typography — Alegreya Sans everywhere (art-direction.md §3) ---------- */
  --font-heading: "Alegreya Sans", system-ui, "Segoe UI", sans-serif;
  --font-body: "Alegreya Sans", system-ui, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-semibold: 700;  /* buttons, kicker, UI labels */
  --weight-heading: 800;   /* h1/h2/h3, all of them (concept.html) */
  /* Fluid scale, values from concept.html (360 -> 1240 px, not a Utopia curve — copied literally) */
  --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);          /* 13 -> 14, eyebrow/small */
  --step-0:  clamp(1.09375rem, 1.03rem + 0.3vw, 1.1875rem);         /* 17.5 -> 19 body (concept) */
  --step-1:  clamp(1.35rem, 1.2rem + 0.7vw, 1.8rem);                /* h3 */
  --step-2:  clamp(2.1rem, 1.4rem + 4.4vw, 4rem);                   /* h2 (concept) */
  --step-3:  clamp(2.7rem, 0.8rem + 6.4vw, 6.4rem);                 /* h1 (concept) */
  --step-4:  clamp(2.4rem, 1.6rem + 3vw, 3.2rem);
  --step-5:  clamp(2.8rem, 2rem + 3vw, 3.6rem);
  --leading-body: 1.5;     /* concept */
  --leading-ui: 1.2;
  --leading-h3: 1.15;
  --leading-h2: 1.05;
  --leading-h1: 1.02;      /* concept */
  --tracking-heading: -0.005em;
  --measure-body: 62ch;
  --measure-quiet: 58ch;
  --measure-heading: 20ch;

  /* ---------- Spacing (unchanged 4 px base — structural, not brand) ---------- */
  --space-0: 0; --space-0-5: 0.125rem; --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;
  --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --space-40: 10rem;
  --space-inline-icon: var(--space-2);
  --space-stack-label: var(--space-2);
  --space-stack-field: var(--space-6);
  --space-inset-card: var(--space-6);
  --space-inset-notice: var(--space-6);
  --space-gap-cards: var(--space-8);
  --space-gutter: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
  --space-page-x: clamp(1rem, 0.4545rem + 2.4242vw, 2.5rem);
  --space-section-compact: clamp(2rem, 1.1818rem + 3.6364vw, 4rem);
  --space-section: clamp(3.5rem, 1.7727rem + 7vw, 6.875rem);   /* concept section padding ~56->110 */
  --space-section-quiet: clamp(4rem, 2.3636rem + 7.2727vw, 8rem);
  --container-prose: 62ch; --container-form: 48rem; --container-default: 73.75rem; /* concept 1180px content */

  /* ---------- Controls, icons ---------- */
  --control-sm: 2.5rem; --control-md: 3rem; --control-lg: 3.5rem;
  --target-min: 2.75rem;
  --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; --icon-xl: 2rem;
  --icon-stroke: 1.75;
  --status-dot: 0.75rem;

  /* ---------- Shape: organic (art-direction.md §5) ---------- */
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px;
  --radius-control: 12px 16px 12px 18px;                      /* inputs, choice chips */
  --radius-btn: 14px 18px 14px 20px;                          /* buttons — concept .btn */
  --radius-container: 30px 36px 28px 40px;                    /* cards, notices, panels, photos */
  --radius-container-2: 24px 30px 22px 34px / 34px 22px 30px 24px; /* concept .note */
  --radius-badge: 40px 32px 44px 30px / 30px 40px 28px 40px;  /* live "Otwarte dziś" pill */
  --blob-a: 62% 38% 44% 56% / 56% 34% 66% 44%;
  --blob-b: 38% 62% 58% 42% / 42% 60% 40% 58%;
  --blob-c: 52% 48% 34% 66% / 64% 36% 64% 36%;
  --border-hairline: 1px; --border-strong: 2px; --border-heavy: 3px;
  --focus-ring-width: 2px; --focus-ring-offset: 2px;

  /* ---------- Depth (warm-tinted, light from top) ---------- */
  --shadow-1: 0 1px 2px hsl(var(--shadow-color) / 0.08), 0 1px 3px hsl(var(--shadow-color) / 0.12);
  --shadow-2: 0 2px 4px hsl(var(--shadow-color) / 0.08), 0 4px 10px hsl(var(--shadow-color) / 0.10);
  --shadow-3: 0 4px 10px hsl(var(--shadow-color) / 0.10), 0 10px 30px hsl(var(--shadow-color) / 0.14);
  --shadow-4: 0 10px 24px hsl(var(--shadow-color) / 0.14), 0 24px 60px hsl(var(--shadow-color) / 0.20);

  /* ---------- Opacity ---------- */
  --state-hover: 0.08; --state-focus: 0.10; --state-pressed: 0.14;
  --disabled-content: 0.38; --disabled-container: 0.12;

  /* ---------- Motion: pulse (live badge) + hover lift, nothing else (art-direction.md §5) ---------- */
  --duration-instant: 100ms; --duration-short: 150ms; --duration-medium: 250ms;
  --duration-pulse: 2.2s;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* ---------- Z-index ---------- */
  --z-base: 0; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1100;
  --z-overlay: 1200; --z-modal: 1300; --z-toast: 1500; --z-max: 9999;
}

/* ---------- Farewell page [3.10]: quieter surfaces, no action-colour pressure ---------- */
.page--quiet {
  --color-band: var(--color-background);
  --space-section: var(--space-section-quiet);
  --measure-body: var(--measure-quiet);
  --color-primary: var(--color-link);
  --color-primary-hover: var(--color-link-hover);
  --color-primary-active: var(--color-link-hover);
}

/* ---------- Field contexts: swap the whole role set, buttons/links follow automatically ---------- */
.pw-field-green {
  --color-background: var(--green-900);
  --color-surface: var(--green-800);
  --color-surface-2: var(--green-800);
  --color-text: var(--cream);
  --color-heading: #ffffff;
  --color-text-muted: rgb(251 244 232 / 0.8);
  --color-border: rgb(251 244 232 / 0.18);
  --color-border-strong: rgb(251 244 232 / 0.4);
  --color-primary: var(--candle);
  --color-primary-hover: #f0c957;
  --color-primary-active: #e6bd42;
  --color-on-primary: var(--ink);
  --color-link: var(--cream);
  --color-link-hover: #ffffff;
  --color-focus-ring: var(--candle);
  --color-secondary-border: var(--cream);
  --color-secondary-hover: rgb(251 244 232 / 0.12);
  background: var(--color-background);
  color: var(--color-text);
}
.pw-field-green--800 { --color-background: var(--green-800); background: var(--color-background); }

/* ---------- Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --duration-instant: 0ms; --duration-short: 0ms; --duration-medium: 0ms; --duration-pulse: 0ms; }
}
@media (prefers-contrast: more) {
  :root { --color-text-muted: var(--ink); --color-border: var(--color-border-strong); }
}