@import "forms-CoDMwsB.css";

@layer vendor, base, components, utilities;

@layer base {
  :root {
    /* --- DESIGN TOKENS (Primitívy) --- */
    /* Tieto hodnoty sú fixné a definujú surovú paletu farieb úradu. */

    /* Brand Colors - Identitné farby úradu */
    --clr-bureau-blue: #1a2b48;       /* Hlavná modrá - symbolizuje autoritu a stabilitu */
    --clr-bureau-blue-dark: #1c242e;  /* Tmavá modrá - používaná pre hlboké pozadia */
    --clr-paper-white: #f4f4f4;       /* Papierová biela - simuluje fyzický úradný papier */
    --clr-paper-dark: #1c2128;        /* Archívna čierna - verzia papiera pre tmavý režim */
    --clr-ink-blue: #2c3e50;          /* Atramentová modrá - farba písma z pera */
    --clr-ink-light: #ecf0f1;         /* Svetlý atrament - tlmená verzia pre tmavý režim */
    --clr-stamp-red: #a93226;         /* Pečiatková červená - farba pre dôležité označenia a akcie */
    --clr-stamp-red-muted: #8e2a1f;   /* Tlmená červená - aby v tmavom režime menej "kričala" */

    /* Neutral & UI Colors - Pomocné farby pre rozhranie */
    --clr-gray-100: #e8e8e8;          /* Veľmi svetlá šedá pre jemné plochy */
    --clr-gray-200: #d1d1d1;          /* Svetlá šedá pre čiary a okraje */
    --clr-gray-300: #b1bac4;          /* Stredná šedá pre text v dark móde */
    --clr-gray-400: #7d8590;          /* Šedá pre tlmený text v dark móde */
    --clr-gray-700: #3d444d;          /* Tmavá šedá pre okraje v dark móde */
    --clr-gray-800: #2d333b;          /* Tmavšia šedá pre plochy v dark móde */
    --clr-gray-900: #21262d;          /* Najtmavšia šedá pre raster v dark móde */

    /* --- SEMANTIC VARIABLES (Sémantika) --- */
    /* Mapovanie tokenov na konkrétny význam. Tieto premenné sa menia podľa témy. */

    /* Surface: Plochy a vrstvy */
    --color-surface: var(--clr-paper-white);          /* Primárne pozadie stránky */
    --color-surface-variant: var(--clr-gray-100);     /* Sekundárne pozadie (karty, formuláre) */
    --color-grid-dot: var(--clr-gray-200);            /* Farba bodiek rastra na pozadí */

    /* Text: Farby písma */
    --color-on-surface: #333;                         /* Hlavný čitateľný text */
    --color-on-surface-muted: #666;                   /* Pomocný alebo menej dôležitý text */

    /* Brand & Actions: Identita a interakcia */
    --color-primary: var(--clr-bureau-blue);          /* Primárna akčná farba a nadpisy */
    --color-on-primary: white;                        /* Text na primárnom pozadí */
    --color-secondary: var(--clr-stamp-red);          /* Sekundárna akčná farba (pečiatky) */
    --color-on-secondary: white;                      /* Text na sekundárnom pozadí */

    /* Border: Ohraničenia */
    --color-border: var(--clr-gray-200);              /* Čiary, ohraničenia a deliace prvky */

    /* --- TYPOGRAPHY, SPACING & OTHERS --- */
    --font-serif: "Playfair Display", serif;
    --font-sans: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --font-typewriter: "Special Elite", cursive;
    --font-handwritten: "Caveat", cursive;

    /* Tieto premenné sa používajú v starších komponentoch, budeme ich postupne nahrádzať */
    --font-family-serif: var(--font-serif);
    --font-family-sans: var(--font-sans);

    --container-max-width: 1200px;
    --section-padding: 5rem 2rem;
    --transition: all 0.3s ease;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Layout heights */
    --header-height: 82px;
    --footer-height: 400px;
    --page-min-height: calc(100svh - var(--header-height) - var(--footer-height));

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
  }

  :root {
    /* --- SPACING SYSTEM (Fluid Spacing) --- */
    --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vw, 0.625rem);
    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);

    /* --- TYPOGRAPHY SYSTEM (Fluid Type Scale - Step 0: 16px) --- */
    --size-step--2: clamp(0.6944rem, 0.6724rem + 0.1102vw, 0.7576rem);
    --size-step--1: clamp(0.8333rem, 0.7967rem + 0.183vw, 0.9383rem);
    --size-step-0: clamp(1rem, 0.9435rem + 0.2826vw, 1.1625rem);
    --size-step-1: clamp(1.2rem, 1.1167rem + 0.4163vw, 1.4391rem);
    --size-step-2: clamp(1.44rem, 1.3208rem + 0.5961vw, 1.7821rem);
    --size-step-3: clamp(1.728rem, 1.561rem + 0.8351vw, 2.2069rem);
    --size-step-4: clamp(2.0736rem, 1.8436rem + 1.1501vw, 2.7328rem);
    --size-step-5: clamp(2.4883rem, 2.176rem + 1.5617vw, 3.3839rem);
  }

  [data-theme="dark"] {
    /* Mapovanie sémantiky pre tmavý režim */
    --color-surface: var(--clr-paper-dark);
    --color-surface-variant: var(--clr-gray-800);
    --color-on-surface: var(--clr-gray-300);
    --color-on-surface-muted: var(--clr-gray-400);
    --color-primary: #5c99d6;
    --color-on-primary: var(--clr-gray-300);
    --color-secondary: var(--clr-stamp-red-muted);
    --color-border: var(--clr-gray-700);
    --color-grid-dot: var(--clr-gray-900);

    /* Tiene pre Dark Mode */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.7), 0 4px 6px -4px rgb(0 0 0 / 0.7);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.8), 0 8px 10px -6px rgb(0 0 0 / 0.8);
  }

  /* Base Styles */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    line-height: 1.6;
    /* Jemný raster papiera */
    background-image: radial-gradient(var(--color-grid-dot) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a93226' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"), auto;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  [data-theme="dark"] body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235c99d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"), auto;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-serif);
    color: var(--color-primary);
    line-height: 1.2;
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  ul {
    list-style: none;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 2rem;
  }
}

@layer utilities {
  .l-container {
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: 10px;

    @media (min-width: 640px) { /* --breakpoint-sm */
      padding-inline: 2rem;
    }
  }

  .l-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    & > * + * {
      margin-block-start: var(--space-stack, 1.5rem);
    }
  }

  /* Specific Layout for Department Page */
  .department-grid {
    display: grid;
    gap: 2rem;
    align-items: start;

    @media (min-width: 1024px) {
      grid-template-columns: 1fr 350px;
    }
  }
}