/*
 * HR Tapiso – tokeny systemu designu (kolory, typografia, odstępy, promienie, cienie).
 * Kolory marki z brand booka Tapiso 1.0 (str. 25–26): Neutral Black #19191A, Harmony Mist #E8DDC8,
 * Soft Ivory #F8F5E5, Coral Spice #E45C45, Black 80/60/40/20 #474747 #757575 #A3A3A3 #D1D1D1, White #FFFFFF.
 * Font: Inter (str. 29–36) – Light w tekście, Bold w nagłówkach i przyciskach; interlinia 105–125%.
 * Kolory stanów (sukces/ostrzeżenie/błąd/informacja) oraz ciemniejszy odcień Coral Spice dla tekstu
 * to WŁASNY dobór (brand book ich nie definiuje) – stonowane, z kontrastem WCAG AA (patrz README-DEPLOY.md).
 */
/* Inter (OFL 1.1, @fontsource-variable/inter 5.3.0) – hostowany lokalnie, bez CDN (CSP font-src 'self') */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin-wght-normal.woff2) format("woff2-variations"), url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-md: .875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.125rem;
  --fs-2xl: 1.375rem;
  --fs-3xl: 1.75rem;
  --fs-4xl: 2.5rem;
  /* brand book: Inter Light (300) domyślnie, Regular (400) dla wyróżnień w tekście, Bold (700) nagłówki i przyciski */
  --fw-light: 300;
  --fw-regular: 300;
  --fw-medium: 400;
  --fw-semibold: 700;
  --fw-bold: 700;
  /* interlinia 105–125% (brand book str. 35) */
  --lh-tight: 1.1;
  --lh-normal: 1.25;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(25, 25, 26, .05), 0 1px 3px rgba(25, 25, 26, .04);
  --shadow-md: 0 4px 12px rgba(25, 25, 26, .07), 0 2px 4px rgba(25, 25, 26, .04);
  --shadow-lg: 0 16px 40px rgba(25, 25, 26, .12);

  /* przyciski CTA (brand book str. 56–57): pigułka, S / M / L = 25 / 45 / 60 px */
  --btn-h-s: 25px;
  --btn-h-m: 45px;
  --btn-h-l: 60px;

  --sidebar-w: 264px;
  --topbar-h: 60px;
  --content-max: 1480px;
  --content-pad: 28px;

  --t-fast: 120ms;
  --t-med: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --z-dropdown: 50;
  --z-topbar: 40;
  --z-sidebar: 60;
  --z-modal: 100;
  --z-toast: 120;

  /* paleta marki */
  --brand-neutral-black: #19191A;
  --brand-harmony-mist: #E8DDC8;
  --brand-soft-ivory: #F8F5E5;
  --brand-coral-spice: #E45C45;
  --brand-black-80: #474747;
  --brand-black-60: #757575;
  --brand-black-40: #A3A3A3;
  --brand-black-20: #D1D1D1;
  --brand-white: #FFFFFF;

  --c-bg: var(--brand-soft-ivory);
  --c-surface: var(--brand-white);
  --c-surface-2: #FCFBF4;            /* pół na pół White / Soft Ivory */
  --c-surface-3: var(--brand-soft-ivory);
  --c-surface-hover: var(--brand-soft-ivory);
  --c-border: var(--brand-harmony-mist);
  --c-border-strong: var(--brand-black-20);
  --c-text: var(--brand-neutral-black);
  --c-text-2: var(--brand-black-80);
  /* Black 60 (#757575) na Soft Ivory ma tylko 4,21:1 – tekst pomocniczy w Black 80 (8,5:1), Black 60 tylko dla placeholderów i ikon */
  --c-text-muted: var(--brand-black-80);
  --c-text-faint: var(--brand-black-60);
  --c-text-inverse: var(--brand-white);

  /* Coral Spice – przyciski główne. Biały tekst na Coral ma 3,55:1 (< AA 4,5:1 dla małego tekstu),
     więc na przyciskach jest Neutral Black (4,95:1). Tekst/linki w kolorze akcentu: ciemniejszy Coral (własny odcień, 6,1:1 na białym). */
  --c-primary: var(--brand-coral-spice);
  --c-primary-hover: #D9503A;
  --c-primary-active: #C8452F;
  --c-primary-soft: #FBE3DE;
  --c-primary-soft-2: #FDF1EE;
  --c-primary-text: #A8402F;
  --c-on-primary: var(--brand-neutral-black);
  --c-focus: var(--brand-neutral-black);
  --c-focus-ring: rgba(228, 92, 69, .35);

  /* kolory stanów – WŁASNY dobór (brak w brand booku), stonowane, kontrast tekstu ≥ 5:1 na tle „soft” */
  --c-success: #2F6B4F;
  --c-success-soft: #E4EFE7;
  --c-success-text: #2F6B4F;
  --c-warning: #8A5A12;
  --c-warning-soft: #F6ECD2;
  --c-warning-text: #8A5A12;
  --c-danger: #A1302A;
  --c-danger-hover: #8A2722;
  --c-danger-soft: #F8E1DC;
  --c-danger-text: #A1302A;
  --c-info: #2D5C6E;
  --c-info-soft: #E2EDF0;
  --c-info-text: #2D5C6E;
  --c-neutral-soft: var(--brand-harmony-mist);
  --c-neutral-text: var(--brand-black-80);

  /* pasek boczny: Neutral Black + białe logo (brand book: logo białe na ciemnym tle) */
  --c-sidebar-bg: var(--brand-neutral-black);
  --c-sidebar-bg-2: #222223;
  --c-sidebar-text: var(--brand-black-20);
  --c-sidebar-muted: var(--brand-black-40);
  --c-sidebar-active-text: var(--brand-white);
  --c-sidebar-active-bg: rgba(255, 255, 255, .09);
  --c-sidebar-hover-bg: rgba(255, 255, 255, .05);
  --c-sidebar-border: rgba(255, 255, 255, .08);

  --c-overlay: rgba(25, 25, 26, .5);
  --c-skeleton: var(--brand-harmony-mist);
  --c-skeleton-2: var(--brand-soft-ivory);

  --c-today: var(--brand-coral-spice);
  --c-weekend-bg: #FCFBF4;
  --c-holiday-bg: #FBE9E5;
  --c-holiday-text: #A1302A;
  --c-company-free-bg: #F6ECD2;
  --c-company-working-bg: #E4EFE7;

  --chip-blue-bg: #dbeafe;   --chip-blue-fg: #1e40af;   --chip-blue: #2563eb;
  --chip-indigo-bg: #e0e7ff; --chip-indigo-fg: #3730a3; --chip-indigo: #4f46e5;
  --chip-purple-bg: #ede9fe; --chip-purple-fg: #5b21b6; --chip-purple: #7c3aed;
  --chip-pink-bg: #fce7f3;   --chip-pink-fg: #9d174d;   --chip-pink: #db2777;
  --chip-rose-bg: #ffe4e6;   --chip-rose-fg: #9f1239;   --chip-rose: #e11d48;
  --chip-orange-bg: #ffedd5; --chip-orange-fg: #9a3412; --chip-orange: #ea580c;
  --chip-amber-bg: #fef3c7;  --chip-amber-fg: #92400e;  --chip-amber: #d97706;
  --chip-lime-bg: #ecfccb;   --chip-lime-fg: #3f6212;   --chip-lime: #65a30d;
  --chip-green-bg: #dcfce7;  --chip-green-fg: #166534;  --chip-green: #16a34a;
  --chip-teal-bg: #ccfbf1;   --chip-teal-fg: #115e59;   --chip-teal: #0d9488;
  --chip-cyan-bg: #cffafe;   --chip-cyan-fg: #155e75;   --chip-cyan: #0891b2;
  --chip-slate-bg: #e2e8f0;  --chip-slate-fg: #334155;  --chip-slate: #64748b;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
  --c-bg: #19191A;
  --c-surface: #222223;
  --c-surface-2: #262627;
  --c-surface-3: #2E2E2F;
  --c-surface-hover: #2E2E2F;
  --c-border: #3A3A3B;
  --c-border-strong: #474747;
  --c-text: #F8F5E5;
  --c-text-2: #D1D1D1;
  --c-text-muted: #A3A3A3;
  --c-text-faint: #8C8C8C;
  --c-text-inverse: #19191A;
  --c-primary: #E45C45;
  --c-primary-hover: #EA715C;
  --c-primary-active: #D9503A;
  --c-primary-soft: rgba(228, 92, 69, .2);
  --c-primary-soft-2: rgba(228, 92, 69, .1);
  --c-primary-text: #F2A091;
  --c-on-primary: #19191A;
  --c-focus: #F8F5E5;
  --c-focus-ring: rgba(228, 92, 69, .4);
  --c-success: #4ade80;
  --c-success-soft: rgba(74, 222, 128, .14);
  --c-success-text: #86efac;
  --c-warning: #fbbf24;
  --c-warning-soft: rgba(251, 191, 36, .14);
  --c-warning-text: #fcd34d;
  --c-danger: #f87171;
  --c-danger-hover: #ef4444;
  --c-danger-soft: rgba(248, 113, 113, .14);
  --c-danger-text: #fca5a5;
  --c-info: #22d3ee;
  --c-info-soft: rgba(34, 211, 238, .14);
  --c-info-text: #67e8f9;
  --c-neutral-soft: #3A3A3B;
  --c-neutral-text: #D1D1D1;
  --c-sidebar-bg: #19191A;
  --c-sidebar-bg-2: #1F1F20;
  --c-sidebar-text: #D1D1D1;
  --c-sidebar-muted: #8C8C8C;
  --c-sidebar-border: #2E2E2F;
  --c-overlay: rgba(0, 0, 0, .7);
  --c-skeleton: #2E2E2F;
  --c-skeleton-2: #3A3A3B;
  --c-weekend-bg: #1F1F20;
  --c-holiday-bg: rgba(244, 63, 94, .12);
  --c-holiday-text: #fda4af;
  --c-company-free-bg: rgba(250, 204, 21, .1);
  --c-company-working-bg: rgba(52, 211, 153, .1);
  --chip-blue-bg: rgba(59, 130, 246, .22);   --chip-blue-fg: #93c5fd;
  --chip-indigo-bg: rgba(99, 102, 241, .22); --chip-indigo-fg: #a5b4fc;
  --chip-purple-bg: rgba(139, 92, 246, .22); --chip-purple-fg: #c4b5fd;
  --chip-pink-bg: rgba(236, 72, 153, .22);   --chip-pink-fg: #f9a8d4;
  --chip-rose-bg: rgba(244, 63, 94, .22);    --chip-rose-fg: #fda4af;
  --chip-orange-bg: rgba(249, 115, 22, .22); --chip-orange-fg: #fdba74;
  --chip-amber-bg: rgba(245, 158, 11, .22);  --chip-amber-fg: #fcd34d;
  --chip-lime-bg: rgba(132, 204, 22, .22);   --chip-lime-fg: #bef264;
  --chip-green-bg: rgba(34, 197, 94, .22);   --chip-green-fg: #86efac;
  --chip-teal-bg: rgba(20, 184, 166, .22);   --chip-teal-fg: #5eead4;
  --chip-cyan-bg: rgba(6, 182, 212, .22);    --chip-cyan-fg: #67e8f9;
  --chip-slate-bg: rgba(148, 163, 184, .22); --chip-slate-fg: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
    --c-bg: #19191A;
    --c-surface: #222223;
    --c-surface-2: #262627;
    --c-surface-3: #2E2E2F;
    --c-surface-hover: #2E2E2F;
    --c-border: #3A3A3B;
    --c-border-strong: #474747;
    --c-text: #F8F5E5;
    --c-text-2: #D1D1D1;
    --c-text-muted: #A3A3A3;
    --c-text-faint: #8C8C8C;
    --c-text-inverse: #19191A;
    --c-primary: #E45C45;
    --c-primary-hover: #EA715C;
    --c-primary-active: #D9503A;
    --c-primary-soft: rgba(228, 92, 69, .2);
    --c-primary-soft-2: rgba(228, 92, 69, .1);
    --c-primary-text: #F2A091;
    --c-on-primary: #19191A;
    --c-focus: #F8F5E5;
    --c-focus-ring: rgba(228, 92, 69, .4);
    --c-success: #4ade80;
    --c-success-soft: rgba(74, 222, 128, .14);
    --c-success-text: #86efac;
    --c-warning: #fbbf24;
    --c-warning-soft: rgba(251, 191, 36, .14);
    --c-warning-text: #fcd34d;
    --c-danger: #f87171;
    --c-danger-hover: #ef4444;
    --c-danger-soft: rgba(248, 113, 113, .14);
    --c-danger-text: #fca5a5;
    --c-info: #22d3ee;
    --c-info-soft: rgba(34, 211, 238, .14);
    --c-info-text: #67e8f9;
    --c-neutral-soft: #3A3A3B;
    --c-neutral-text: #D1D1D1;
    --c-sidebar-bg: #19191A;
    --c-sidebar-bg-2: #1F1F20;
    --c-sidebar-text: #D1D1D1;
    --c-sidebar-muted: #8C8C8C;
    --c-sidebar-border: #2E2E2F;
    --c-overlay: rgba(0, 0, 0, .7);
    --c-skeleton: #2E2E2F;
    --c-skeleton-2: #3A3A3B;
    --c-weekend-bg: #1F1F20;
    --c-holiday-bg: rgba(244, 63, 94, .12);
    --c-holiday-text: #fda4af;
    --c-company-free-bg: rgba(250, 204, 21, .1);
    --c-company-working-bg: rgba(52, 211, 153, .1);
    --chip-blue-bg: rgba(59, 130, 246, .22);   --chip-blue-fg: #93c5fd;
    --chip-indigo-bg: rgba(99, 102, 241, .22); --chip-indigo-fg: #a5b4fc;
    --chip-purple-bg: rgba(139, 92, 246, .22); --chip-purple-fg: #c4b5fd;
    --chip-pink-bg: rgba(236, 72, 153, .22);   --chip-pink-fg: #f9a8d4;
    --chip-rose-bg: rgba(244, 63, 94, .22);    --chip-rose-fg: #fda4af;
    --chip-orange-bg: rgba(249, 115, 22, .22); --chip-orange-fg: #fdba74;
    --chip-amber-bg: rgba(245, 158, 11, .22);  --chip-amber-fg: #fcd34d;
    --chip-lime-bg: rgba(132, 204, 22, .22);   --chip-lime-fg: #bef264;
    --chip-green-bg: rgba(34, 197, 94, .22);   --chip-green-fg: #86efac;
    --chip-teal-bg: rgba(20, 184, 166, .22);   --chip-teal-fg: #5eead4;
    --chip-cyan-bg: rgba(6, 182, 212, .22);    --chip-cyan-fg: #67e8f9;
    --chip-slate-bg: rgba(148, 163, 184, .22); --chip-slate-fg: #cbd5e1;
  }
}