/* Skórka domyślna DATeusza. Odtwarza referencję stylu v1.0 jeden do jednego.
   Motyw jasny i ciemny są dobrane osobno — ciemny nie jest odwróceniem jasnego.
   Kontrasty policzone wobec własnej powierzchni karty, nie wobec abstrakcyjnej bieli. */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..600&family=Martian+Mono:wght@300..600&display=swap");

:root {
    --font-sans: "Instrument Sans", system-ui, sans-serif;
    --font-mono: "Martian Mono", ui-monospace, monospace;

    --color-bg: #f5f7f5;
    --color-surface: #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #eef1ef;
    --color-border: #e3e7e4;
    --color-border-strong: #cbd1cd;
    --color-text: #171a19;
    --color-text-secondary: #5a625d;
    --color-text-muted: #6f7672;
    --color-accent: #0f7360;
    --color-accent-hover: #0c6153;
    --color-accent-active: #0a5147;
    --color-accent-fg: #ffffff;
    --color-accent-soft: #e2f1ee;
    --color-accent-soft-fg: #0b5548;
    --color-success: #1a7a3f;
    --color-success-soft: #e4f4e9;
    --color-warning: #8a5a00;
    --color-warning-soft: #f9efd9;
    --color-danger: #b42318;
    --color-danger-soft: #fce9e7;
    --color-danger-fg: #ffffff;
    --color-info: #1d4fd7;
    --color-info-soft: #e6ecfd;

    --cal-1: #0f7360;
    --cal-2: #1d4fd7;
    --cal-3: #7c3aed;
    --cal-4: #b42318;
    --cal-5: #b45309;
    --cal-6: #be1a6b;
    --cal-7: #8a5a00;
    --cal-8: #4b5563;
    /* Domyślna kropka kalendarza, gdy znacznik nie ustawi jej inline w markupie. */
    --dat-cal: var(--cal-8);

    --shadow-sm: 0 1px 2px rgba(16, 24, 20, .06);
    --shadow-md: 0 2px 4px rgba(16, 24, 20, .05), 0 8px 20px -6px rgba(16, 24, 20, .12);
    --shadow-lg: 0 12px 40px -8px rgba(16, 24, 20, .22);

    --focus: #0f7360;
    --focus-ring: rgba(15, 115, 96, .18);

    --text-display-size: 28px;
    --text-display-lh: 34px;
    --text-display-weight: 600;
    --text-display-tracking: -.022em;
    --text-title-size: 20px;
    --text-title-lh: 28px;
    --text-title-weight: 600;
    --text-title-tracking: -.015em;
    --text-subtitle-size: 16px;
    --text-subtitle-lh: 24px;
    --text-subtitle-weight: 550;
    --text-subtitle-tracking: -.008em;
    --text-body-size: 14px;
    --text-body-lh: 21px;
    --text-body-weight: 400;
    --text-body-tracking: 0;
    --text-small-size: 13px;
    --text-small-lh: 18px;
    --text-small-weight: 400;
    --text-small-tracking: 0;
    --text-overline-size: 11px;
    --text-overline-lh: 14px;
    --text-overline-weight: 600;
    --text-overline-tracking: .06em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;

    --sidebar-width: 228px;
    --sidebar-width-collapsed: 60px;
    --topbar-height: 52px;
    --control-height-sm: 30px;
    --control-height-md: 36px;
    --control-height-lg: 42px;
    --row-height: 44px;
    --row-height-dense: 34px;
    --tile-min-width: 260px;
    --card-padding: 14px;
    --card-radius: 12px;
    --gap-blocks: 14px;
    --touch-target: 44px;

    --cal-dot-size: 8px;
    --cal-dot-size-lg: 10px;
    --code-tracking: .18em;
    --cal-bar-width: 3px;
    --cal-bar-height: 26px;
    --cal-bar-radius: 2px;

    --nav-item-padding: 7px 8px;
    --nav-icon-size: 16px;
    --nav-badge-min-width: 20px;
    --nav-badge-height: 18px;
    --nav-collapsed-target: 36px;
    --check-size: 17px;
    --check-radius: 5px;
    --switch-width: 34px;
    --switch-height: 20px;
    --switch-knob: 16px;
    --segmented-padding: 3px;
    --segmented-item-padding: 5px 12px;
    --segmented-radius: 7px;
    --segmented-item-height: 26px;
    --btn-radius-sm: 7px;
    --btn-radius-md: 8px;
    --btn-radius-lg: 9px;
    --btn-gap: 7px;
    --focus-gap: 2px;
    --focus-width: 4px;
    --underline-offset: 3px;
    --input-padding-x: 11px;
    --input-radius: 8px;
    --ring-width: 3px;
    --textarea-min-height: 74px;
    --search-width: 240px;
    --time-column-width: 52px;
    --avatar-xs: 20px;
    --avatar-sm: 28px;
    --avatar-md: 36px;
    --avatar-lg: 48px;
    --avatar-overlap: -9px;
    --toast-max-width: 400px;
    --toast-accent-width: 3px;
    --modal-max-width: 400px;
    --modal-icon-size: 34px;
    --qr-surface: #ffffff;
    --overlay-bg: rgba(16, 24, 20, .45);
    --popover-max-width: 320px;
    --tooltip-height: 26px;
    --tooltip-radius: 7px;
    --progress-height: 6px;
    --badge-height: 22px;
    --badge-dot: 6px;

    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-spinner: 900ms;
    --duration-puls: 2000ms;
    --duration-tooltip: 300ms;
    --ease-out: cubic-bezier(.2, 0, 0, 1);

    --border-width: 1px;
    --border-width-strong: 1.5px;
    --duration-instant: 1ms;

    /* Grubość obramowań i grubość pierścienia fokusu to różne rzeczy --
       zaokrąglanie fokusu do border-width dawało 1px zamiast wymaganych 2px. */
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;

    --content-max: 1120px;
    --content-max-narrow: 560px;
    --hero-width: 420px;
    --hero-mark-size: 96px;
    --icon-size-sm: 14px;
    --icon-size-xl: 28px;
}

/* W motywie ciemnym kolory są jaśniejsze i mniej nasycone, a tła semantyczne
   to osobne, głębokie odcienie — nie przezroczystość na tle. Uniesienie niesie
   własną powierzchnię plus jaśniejsze obramowanie, bo sam cień na czerni nie widać. */
[data-theme="dark"] {
    --color-bg: #0e100f;
    --color-surface: #16191a;
    --color-surface-raised: #1d2121;
    --color-surface-sunken: #121514;
    --color-border: #272b2a;
    --color-border-strong: #3a403e;
    --color-text: #e9ecea;
    --color-text-secondary: #a2a9a5;
    --color-text-muted: #7c847f;
    --color-accent: #3cbfa0;
    --color-accent-hover: #54cdb0;
    --color-accent-active: #2aa085;
    --color-accent-fg: #07211c;
    --color-accent-soft: #12302a;
    --color-accent-soft-fg: #6fd6bb;
    --color-success: #46c46f;
    --color-success-soft: #14301d;
    --color-warning: #e2a616;
    --color-warning-soft: #33260a;
    --color-danger: #f8746a;
    --color-danger-soft: #351816;
    --color-danger-fg: #1a0d0c;
    --color-info: #7aa5ff;
    --color-info-soft: #17224a;

    --cal-1: #3cbfa0;
    --cal-2: #7aa5ff;
    --cal-3: #b193fb;
    --cal-4: #f8746a;
    --cal-5: #f0a83c;
    --cal-6: #f472b6;
    --cal-7: #e2a616;
    --cal-8: #9aa3ad;
    --dat-cal: var(--cal-8);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px -6px rgba(0, 0, 0, .6);
    --qr-surface: #ffffff;
    --overlay-bg: rgba(0, 0, 0, .68);
    --shadow-lg: 0 12px 40px -8px rgba(0, 0, 0, .7);

    --focus: #3cbfa0;
    --focus-ring: rgba(60, 191, 160, .22);
}