/* ============================================================
   FamiPro — Design Tokens (refreshed)
   Klinika Famivel Bezručova
   ------------------------------------------------------------
   Sources of truth pre farby, typo, spacing, shadows, motion.
   Komponenty + layouty NIKDY nepoužívajú hardcoded hodnoty —
   všetko cez var(--token-name).
   ============================================================ */

:root {
    /* ============================================================
       RAW BRAND COLORS (immutable, z brand manuálu)
       ============================================================ */
    --color-blue:               #72E6EF;
    --color-blue-tint-1:        #A8EEF4;
    --color-blue-tint-2:        #CAF7F9;
    --color-blue-shade-1:       #5FD4E0;
    --color-blue-shade-2:       #45BBCE;

    --color-aqua-white:         #E6F8F8;
    --color-aqua-tint-1:        #F0FCFC;
    --color-aqua-shade-1:       #D5EFEE;
    --color-aqua-shade-2:       #C0E1E2;

    --color-dark-teal:          #003B41;
    --color-dark-teal-tint-1:   #145A60;
    --color-dark-teal-tint-2:   #2D7D81;
    --color-dark-teal-shade-1:  #002628;
    --color-dark-teal-shade-2:  #001919;

    --color-apricot:            #FFD0B0;
    --color-apricot-tint-1:     #FFDEC7;
    --color-apricot-shade-1:    #EFA878;

    /* ============================================================
       BACKGROUNDS — light & airy, white-leaning
       ============================================================ */
    --bg-app:                   #F8FCFC;
    --bg-surface:               #FFFFFF;
    --bg-elevated:              #FAFEFE;
    --bg-subtle:                #F0F8F8;
    --bg-input:                 #FFFFFF;

    --bg-sidebar:               var(--color-dark-teal);
    --bg-sidebar-hover:         var(--color-dark-teal-tint-1);
    --bg-sidebar-active:        var(--color-dark-teal-tint-2);

    /* ============================================================
       TEXT — viac kontrastu, less colorful
       ============================================================ */
    --text-primary:             #0A2628;
    --text-secondary:           #5A7375;
    --text-muted:               #8FA3A5;
    --text-on-dark:             #E6F8F8;
    --text-on-accent:           #003B41;
    /* Faza 40a/S1: link/hover text na svetlom pozadí. Predtým sa všade
       používal --color-blue-shade-2 (#45BBCE — svetlá tyrkysová) ako farba
       textu — krikľavé, slabo čitateľné. Dark teal #003B41 = silný kontrast,
       konzistentný s nadpismi. Cyan ostáva LEN ako accent (background, border,
       ikony na tmavom sidebare), nikdy ako text na svetlom. */
    --text-link:                var(--color-dark-teal);
    /* Faza 41/S1: hover variant. Predtým niekde používal --accent-hover
       (#5FD4E0 svetlá tyrkysová!) — bug ktorý dominil hover linkov v dashboard
       widget table. Tmavá teal tint-1 (#145A60) = jemne svetlejšia ako základný
       --text-link, aby hover bol viditeľný ale stále čitateľný. */
    --text-link-hover:          var(--color-dark-teal-tint-1);

    /* ============================================================
       BORDERS — jemné, takmer neviditeľné
       ============================================================ */
    --border-subtle:            #EBF1F1;
    --border-default:           #DCE7E7;
    --border-strong:            #B8CECF;
    --border-focus:             var(--color-blue);

    /* ============================================================
       ACCENT / INTERACTIVE
       ============================================================ */
    --accent:                   var(--color-blue);
    --accent-hover:             var(--color-blue-shade-1);
    --warning:                  var(--color-apricot-shade-1);

    /* ============================================================
       STATUS TONALS — Notion-style soft pairs (bg + text)
       ============================================================ */
    --status-planning-bg:       #F0F4F5;
    --status-planning-text:     #4A6062;
    --status-active-bg:         #E6F8F8;
    --status-active-text:       #145A60;
    --status-in-progress-bg:    #E3F6F7;
    --status-in-progress-text:  #00565E;
    --status-paused-bg:         #FFEADC;
    --status-paused-text:       #8B4513;
    --status-done-bg:           #E0F4E8;
    --status-done-text:         #1F5F3F;
    --status-blocked-bg:        #FFE0E0;
    --status-blocked-text:      #8B1F1F;

    /* Faza 60p: DEDIKOVANÁ status-pill mapa pre project/milestone status badges.
       Stlmené glass tóny + čitateľný tmavší text rovnakého odtieňa. Oddelené od
       zdieľaných --status-* (tie nesú warning/success sémantiku v priority/sync/
       toast/attention), aby zmena farieb statusov tie prvky neovplyvnila. */
    /* Faza 60t: decentnejšie — len jemný nádych farby (fainter bg), text ostáva
       tmavší/čitateľný. Priradenie farieb sa nemení. */
    --badge-planning-bg:    #FBF6E4;  --badge-planning-text:    #7A5E12;  /* žltá/apricot */
    --badge-in-progress-bg: #EAF1FC;  --badge-in-progress-text: #234887;  /* modrá */
    --badge-waiting-bg:     #F4EEFB;  --badge-waiting-text:     #5B3E8E;  /* fialová */
    --badge-done-bg:        #E9F5EE;  --badge-done-text:        #1E6B42;  /* zelená */
    --status-cancelled-bg:      #F0F0F0;
    --status-cancelled-text:    #666666;

    /* ============================================================
       PRIORITY (one color per level, used in dots/pills)
       ============================================================ */
    --priority-low-color:       #8FA3A5;
    --priority-medium-color:    #5DD5DE;
    --priority-high-color:      #EFA878;
    --priority-urgent-color:    #C44545;

    /* ============================================================
       DEADLINE STATE TONALS
       ============================================================ */
    --deadline-overdue-bg:      #FFE0E0;
    --deadline-overdue-text:    #8B1F1F;
    --deadline-urgent-bg:       #FFEADC;
    --deadline-urgent-text:     #8B4513;
    --deadline-upcoming-bg:     #E6F8F8;
    --deadline-upcoming-text:   #145A60;
    --deadline-normal-text:     var(--text-secondary);

    /* ============================================================
       TYPE SCALE — faza 40a/S2: bumped +1-2px naprieč pre pohodlnejšie čítanie.
       Dominik povedal "decentné zväčšenie, nie pre slabozrakých" — base 16→17,
       proporcionálne ostatné. (Ratio 1.414 trochu porušené, ale UX > matematika.)
       ============================================================ */
    --text-xs:                  13px;
    --text-sm:                  15px;
    --text-base:                17px;
    --text-lg:                  22px;
    --text-xl:                  30px;
    --text-2xl:                 42px;
    --text-3xl:                 60px;

    /* ============================================================
       RADIUS
       ============================================================ */
    --radius-sm:                6px;
    --radius-md:                12px;
    --radius-lg:                20px;
    --radius-full:              9999px;

    /* ============================================================
       SPACING (4px base)
       ============================================================ */
    --space-1:                  4px;
    --space-2:                  8px;
    --space-3:                  12px;
    --space-4:                  16px;
    --space-5:                  20px;
    --space-6:                  24px;
    --space-7:                  32px;
    --space-8:                  40px;
    --space-9:                  48px;
    --space-10:                 56px;
    --space-11:                 64px;
    --space-12:                 72px;
    --space-13:                 80px;
    --space-14:                 96px;
    --space-15:                 112px;
    --space-16:                 128px;

    /* ============================================================
       SHADOWS — refined, modern, soft
       ============================================================ */
    --shadow-card:              0 1px 2px rgba(0, 59, 65, 0.03), 0 1px 1px rgba(0, 59, 65, 0.04);
    --shadow-card-hover:        0 4px 8px rgba(0, 59, 65, 0.06), 0 1px 2px rgba(0, 59, 65, 0.06);
    --shadow-dropdown:          0 8px 24px rgba(0, 59, 65, 0.10);
    --shadow-modal:             0 20px 48px rgba(0, 59, 65, 0.15);
    --shadow-focus-ring:        0 0 0 3px rgba(114, 230, 239, 0.35);

    /* ============================================================
       MOTION
       ============================================================ */
    --transition-fast:          150ms ease;
    --transition-base:          250ms ease;
    --transition-slow:           400ms ease;

    /* ============================================================
       Z-INDEX
       ============================================================ */
    --z-base:                   1;
    --z-dropdown:               100;
    --z-sticky:                 200;
    --z-modal-backdrop:         900;
    --z-modal:                  1000;
    --z-toast:                  2000;

    /* ============================================================
       LAYOUT MAX-WIDTHS
       ============================================================ */
    --maxw-sm:                  640px;
    --maxw-md:                  960px;
    --maxw-lg:                  1280px;
    --maxw-content:             1100px;

    /* ============================================================
       FONT
       ============================================================ */
    --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   BASE RESET
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Faza 60f: okno VŽDY rezervuje miesto pre vertikálny scrollbar. Krátke
   podstránky (Mítingy, Notifikácie, Nastavenia) tak nezmenia šírku obsahu
   oproti dlhým (Dnes, Projekty, Dashboard) → pri prepínaní žiadny skok do strany. */
html {
    scrollbar-gutter: stable;
}
/* Fallback pre prehliadače bez scrollbar-gutter (staršie Safari <18.2):
   vynúť vždy prítomný scrollbar. */
@supports not (scrollbar-gutter: stable) {
    html { overflow-y: scroll; }
}

body {
    background: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Faza 41/S1: predtým --accent (#72E6EF cyan) a --accent-hover (#5FD4E0
   svetlá tyrkysová) — nečitateľné na svetlom. Teraz dark-teal hierarchy. */
a {
    color: var(--text-link);
    text-decoration: none;
}
a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ============================================================
   #18 — Design tokens upgrade (layered — staré tokeny zachované,
   nové pridané, vybrané hodnoty prepísané na Notion/Mercury scale).
   ============================================================ */
:root {
    --bg-surface-hover: #F7FBFB;
    --surface-inverse: #003B41;   /* prvky čo ostávajú dark aj v dark mode */
    --text-inverse: #FFFFFF;
    --text-disabled: #9DB1B5;

    /* Semantic status (popri existujúcich --status-planning/... + --deadline-*) */
    --status-success-bg: #E8F5E9; --status-success-text: #2D7D54; --status-success-border: #81C784;
    --status-warning-bg: #FFF8E1; --status-warning-text: #8A5A00; --status-warning-border: #FFD54F;
    --status-danger-bg:  #FDEBEB; --status-danger-text:  #B54D4D; --status-danger-border:  #EF9A9A;
    --status-info-bg:    #E0F4F4; --status-info-text:    #00666E; --status-info-border:    #4DD0E1;

    /* Shadows (Mercury-like) — popri existujúcich --shadow-card/... */
    --shadow-xs: 0 1px 2px rgba(0,59,65,0.04);
    --shadow-sm: 0 1px 3px rgba(0,59,65,0.06), 0 1px 2px rgba(0,59,65,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,59,65,0.06), 0 2px 4px -2px rgba(0,59,65,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,59,65,0.08), 0 4px 6px -4px rgba(0,59,65,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,59,65,0.10), 0 8px 10px -6px rgba(0,59,65,0.04);

    /* Radius */
    --radius-xs: 4px;
    --radius-lg: 12px;   /* override z 20px */
    --radius-xl: 16px;

    /* Typography — Notion scale */
    --font-mono: 'Monaco','Menlo','Courier New',monospace;
    --text-base: 14px;   /* override z 16px */
    --text-md: 15px;
    --text-2xl: 22px;    /* override z 40px */
    --text-3xl: 28px;    /* override z 56px */
    --text-4xl: 36px;
    --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.55; --leading-relaxed: 1.7;
    --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700;

    /* Transitions — cubic-bezier (override) */
    --transition-fast: 100ms cubic-bezier(0.4,0,0.2,1);
    --transition-base: 150ms cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 250ms cubic-bezier(0.4,0,0.2,1);

    --z-toast: 1100;
}

/* ============================================================
   DARK MODE — prelad semantických + brand-literal tokenov
   ============================================================ */
[data-theme="dark"] {
    --bg-app: #0F1A1C;
    --bg-surface: #162528;
    --bg-surface-hover: #1B2D31;
    --bg-elevated: #1F343A;
    --bg-subtle: #1B2D31;
    --bg-input: #162528;
    --bg-sidebar: #0A1416;

    --text-primary: #E6F8F8;
    --text-secondary: #A0CFCF;
    --text-muted: #6B8B91;
    --text-disabled: #4A6266;
    --text-on-dark: #E6F8F8;

    --border-subtle: #1F343A;
    --border-default: #2A464C;
    --border-strong: #3D6168;
    --border-focus: #72E6EF;

    /* brand-literal tokeny používané ako text/bg v starších komponentoch */
    --color-dark-teal: #E6F8F8;            /* používané hlavne ako text → svetlé */
    --color-dark-teal-tint-1: #A0CFCF;
    --color-dark-teal-tint-2: #84B0B6;
    --color-aqua-white: #162528;
    --color-aqua-tint-1: #1B2D31;
    --color-aqua-shade-1: #2A464C;
    --color-aqua-shade-2: #3D6168;

    /* status tonals (existujúce) → dark */
    --status-planning-bg:#1B2D31;  --status-planning-text:#A0CFCF;
    --status-active-bg:#102E32;    --status-active-text:#4DD0E1;
    --status-in-progress-bg:#0E3A40; --status-in-progress-text:#72E6EF;
    --status-paused-bg:#3A2E0E;    --status-paused-text:#FFD54F;
    --status-done-bg:#1A3528;      --status-done-text:#81C784;
    --status-blocked-bg:#3A1F1F;   --status-blocked-text:#EF9A9A;
    --status-cancelled-bg:#242424; --status-cancelled-text:#9A9A9A;

    /* Faza 60p: status-pill mapa → dark (stlmené glass tóny, svetlejší text). */
    /* Faza 60t: decentnejšie — jemnejšie (menej sýte) pozadia, svetlý čitateľný text. */
    --badge-planning-bg:#2B2712;    --badge-planning-text:#E3CB73;   /* žltá */
    --badge-in-progress-bg:#1A2C44; --badge-in-progress-text:#AFD0FB; /* modrá */
    --badge-waiting-bg:#262037;     --badge-waiting-text:#C8AFEE;     /* fialová */
    --badge-done-bg:#172A20;        --badge-done-text:#84CE9F;        /* zelená */
    --deadline-overdue-bg:#3A1F1F; --deadline-overdue-text:#EF9A9A;
    --deadline-urgent-bg:#3A2E0E;  --deadline-urgent-text:#FFD54F;
    --deadline-upcoming-bg:#102E32; --deadline-upcoming-text:#4DD0E1;

    --status-success-bg:#1A3528; --status-success-text:#81C784; --status-success-border:#2D7D54;
    --status-warning-bg:#3A2E0E; --status-warning-text:#FFD54F; --status-warning-border:#8A5A00;
    --status-danger-bg:#3A1F1F;  --status-danger-text:#EF9A9A;  --status-danger-border:#B54D4D;
    --status-info-bg:#102E32;    --status-info-text:#4DD0E1;    --status-info-border:#00666E;

    --shadow-card: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-card-hover: 0 4px 8px rgba(0,0,0,0.45);
    --shadow-dropdown: 0 8px 24px rgba(0,0,0,0.55);
    --shadow-modal: 0 20px 48px rgba(0,0,0,0.6);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.3);
}

/* Smooth prepnutie dark mode */
* {
    transition: background-color 200ms ease, border-color 200ms ease;
}

/* ============================================================
   #19 — Calm Aqua: glass + ambient + sidebar gradient tokeny
   (dark-teal tokeny sú v dark mode remapnuté na svetlé, preto
   chrome gradient/glass riešime cez samostatné tokeny.)
   ============================================================ */
:root {
    --ambient-blue:     rgba(114, 230, 239, 0.16);
    --ambient-apricot:  rgba(255, 208, 176, 0.12);
    --glass-surface:    rgba(255, 255, 255, 0.60);
    --glass-border:     rgba(184, 206, 207, 0.28);
    --sidebar-gradient: linear-gradient(180deg, #00474E 0%, #003B41 55%, #002628 100%);
}
[data-theme="dark"] {
    --ambient-blue:     rgba(114, 230, 239, 0.10);
    --ambient-apricot:  rgba(255, 208, 176, 0.06);
    --glass-surface:    rgba(22, 37, 40, 0.62);
    --glass-border:     rgba(61, 97, 104, 0.40);
    --sidebar-gradient: linear-gradient(180deg, #102A2E 0%, #0A1416 100%);
}

/* ============================================================
   #26 — Faza 23 / Prompt #21: rozšírený glass token systém
   ============================================================ */
:root {
    --glass-bg-light:   rgba(255, 255, 255, 0.65);
    --glass-bg-strong:  rgba(255, 255, 255, 0.85);
    --glass-bg-tinted:  rgba(230, 248, 248, 0.70);
    --glass-bg-dark:    rgba(0, 59, 65, 0.85);
    --glass-blur:       16px;
    --glass-saturate:   180%;
}
[data-theme="dark"] {
    --glass-bg-light:   rgba(31, 52, 58, 0.65);
    --glass-bg-strong:  rgba(22, 37, 40, 0.85);
    --glass-bg-tinted:  rgba(0, 59, 65, 0.70);
    --glass-bg-dark:    rgba(10, 20, 22, 0.90);
}