/* ============================================================
   LUIS — Design Tokens
   lui.css v0.1.0
   https://github.com/your-org/luis
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer lui.base, lui.forms, lui.components, project, lui.utilities;


/* ────────────────────────────────────────────────────────────
   HOW TO USE
   1. Import this file once, before any component styles:
      <link rel="stylesheet" href="lui.css">
   2. Override any token on :root or a scoped selector:
      :root { --lui-color-accent: #0055ff; }
      [data-theme="brand"] { --lui-color-accent: #e63946; }
   ──────────────────────────────────────────────────────────── */

:root {
   color-scheme: light dark;

   /* ──────────────────────────────────────────────────────────
     1. COLOR
     Každá paleta je definovaná cez OKLCH primitívy (L, C, H).
     Škála sa generuje pomocou calc() na lightness.
     Zmeň L/C/H a celá škála sa prispôsobí automaticky.

     Primitívy (--lui-_*) nie sú určené na priame použitie
     v komponentoch — slúžia len ako základ sémantických tokenov.
  ────────────────────────────────────────────────────────── */

   --color-white: oklch(1 0 none);
   --color-black: oklch(0 0 none);

   --color-_base: oklch(0.55 0.045 252);
   /* Initial base color */

   /* lighter shades (from darkest to lightest) */
   --color-_base-l1: oklch(from var(--color-_base) calc(l + 0.07) c h);
   --color-_base-l2: oklch(from var(--color-_base) calc(l + 0.14) c h);
   --color-_base-l3: oklch(from var(--color-_base) calc(l + 0.21) c h);
   --color-_base-l4: oklch(from var(--color-_base) calc(l + 0.28) c h);
   --color-_base-l5: oklch(from var(--color-_base) calc(l + 0.35) calc(c - 0.0144) h);
   --color-_base-l6: oklch(from var(--color-_base) calc(l + 0.42) calc(c - 0.0288) h);
   --color-_base-l7: oklch(from var(--color-_base) calc(l + 0.435) calc(c - 0.0369) h);

   /* darker shades (from lightest to darkest) */
   --color-_base-d1: oklch(from var(--color-_base) calc(l - 0.07) c h);
   --color-_base-d2: oklch(from var(--color-_base) calc(l - 0.14) c h);
   --color-_base-d3: oklch(from var(--color-_base) calc(l - 0.21) c h);
   --color-_base-d4: oklch(from var(--color-_base) calc(l - 0.28) c h);
   --color-_base-d5: oklch(from var(--color-_base) calc(l - 0.32) c h);
   --color-_base-d6: oklch(from var(--color-_base) calc(l - 0.36) c h);
   --color-_base-d7: oklch(from var(--color-_base) calc(l - 0.42) c h);

   --color-_accent: oklch(0.55 0.24 344);
   /* Initial accent color */

   /* lighter shades (from darkest to lightest) */
   --color-_accent-l1: oklch(from var(--color-_accent) calc(l + 0.0683) c h);
   --color-_accent-l2: oklch(from var(--color-_accent) calc(l + 0.1367) c h);
   /*--color-_accent-l3: oklch(from var(--color-_accent) calc(l + 0.205) calc(c - 0.0222) h);*/
   --color-_accent-l4: oklch(from var(--color-_accent) calc(l + 0.2733) calc(c - 0.0722) h);
   /*--color-_accent-l5: oklch(from var(--color-_accent) calc(l + 0.3417) calc(c - 0.1433) h);*/
   --color-_accent-l6: oklch(from var(--color-_accent) calc(l + 0.41) calc(c - 0.2063) h);

   /* darker shades (from lightest to darkest) */
   --color-_accent-d1: oklch(from var(--color-_accent) calc(l - 0.0683) calc(c - 0.0106) h);
   --color-_accent-d2: oklch(from var(--color-_accent) calc(l - 0.1367) calc(c - 0.0431) h);
   /*--color-_accent-d3: oklch(from var(--color-_accent) calc(l - 0.205) calc(c - 0.0757) h);*/
   /*--color-_accent-d4: oklch(from var(--color-_accent) calc(l - 0.2733) calc(c - 0.1082) h);*/
   /*--color-_accent-d5: oklch(from var(--color-_accent) calc(l - 0.3417) calc(c - 0.1407) h);*/
   /*--color-_accent-d6: oklch(from var(--color-_accent) calc(l - 0.41) calc(c - 0.1731) h);*/

   /* --- Valid / Warning / Invalid škály (3 kroky) --- */
   --color-_valid: oklch(0.69 0.23 143);
   --color-_valid-l1: oklch(from var(--color-_valid) calc(l + 0.07) c h);
   --color-_valid-d1: oklch(from var(--color-_valid) calc(l - 0.07) c h);

   --color-_warning: oklch(0.81 0.19 82);
   --color-_warning-l1: oklch(from var(--color-_warning) calc(l + 0.06) c h);
   --color-_warning-d1: oklch(from var(--color-_warning) calc(l - 0.06) c h);

   --color-_invalid: oklch(0.6 0.24 29);
   --color-_invalid-l1: oklch(from var(--color-_invalid) calc(l + 0.07) c h);
   --color-_invalid-d1: oklch(from var(--color-_invalid) calc(l - 0.07) c h);

   /* --- Semantic: base --- */
   --lui-color-base: var(--color-_base);
   --lui-color-base-hover: var(--color-_base-d1);
   --lui-color-base-outline: light-dark(var(--color-_base), var(--color-_base-l2));
   --lui-color-base-hover-outline: light-dark(var(--color-_base-d2), var(--color-_base-l4));
   --lui-color-base-hover-ghost: light-dark(
         oklch(from var(--color-_base-d1) l calc(c + 0.1) h / 12%),
         oklch(from var(--color-_base-l2) l calc(c + 0.1) h / 15%));
   --lui-color-base-active: var(--color-_base-d2);
   --lui-color-base-subtle: light-dark(var(--color-_base-l6), var(--color-_base-d5));
   --lui-color-base-muted: light-dark(var(--color-_base-l5), var(--color-_base-d4));
   --lui-color-base-border: light-dark(var(--color-_base-l3), var(--color-_base-d3));
   --lui-color-base-text: var(--color-_base-d6);
   --lui-color-base-trans: oklch(from var(--color-_base) l c h / 0);

   /* --- Semantic: accent --- */
   --lui-color-accent: var(--color-_accent);
   --lui-color-accent-hover: var(--color-_accent-d1);
   --lui-color-accent-active: var(--color-_accent-d2);
   --lui-color-accent-subtle: var(--color-_accent-l6);
   --lui-color-accent-muted: var(--color-_accent-l4);
   --lui-color-accent-border: var(--color-_accent-l2);
   --lui-color-accent-text: var(--color-_accent);

   /* --- Semantic: background --- */
   --lui-color-bg: light-dark(var(--color-_base-l7), var(--color-_base-d7));
   --lui-color-bg-subtle: light-dark(var(--color-_base-l6), var(--color-_base-d4));
   --lui-color-bg-muted: light-dark(var(--color-_base-l5), var(--color-_base-d3));
   --lui-color-bg-inset: light-dark(var(--color-_base-l4), var(--color-_base-d1));
   --lui-color-bg-overlay: light-dark(
         color-mix(in oklch, var(--color-_base-d5) 50%, transparent),
         color-mix(in oklch, var(--color-_base-d7) 75%, transparent));
   --lui-color-shadow: light-dark(
         color-mix(in oklch, var(--color-_base-d3) 5%, transparent),
         var(--color-black));
   --lui-color-bg-trans: light-dark(
         oklch(from var(--color-_base) l calc(c + 0.15) h / 6%),
         oklch(from var(--color-_base-d7) l c h / 25%));


   /* --- Semantic: surface elevation --- */
   --lui-color-surface: light-dark(var(--color-white), var(--color-_base-d6));
   --lui-color-surface-raised: light-dark(var(--color-white), var(--color-_base-d4));

   /* --- Semantic: text --- */
   --lui-color-text: light-dark(var(--color-_base-d3), var(--color-_base-l7));
   --lui-color-text-href: light-dark(var(--color-_accent), var(--color-_accent-l1));
   --lui-color-text-href-hover: light-dark(var(--color-_accent-d1), var(--color-_accent-l2));
   --lui-color-text-href-deco: light-dark(var(--color-_base-l4), var(--color-_base-d1));
   --lui-color-text-secondary: light-dark(var(--color-_base), var(--color-_base-l2));
   --lui-color-text-tertiary: light-dark(var(--color-_base-l2), var(--color-_base-l1));
   --lui-color-text-disabled: light-dark(var(--color-_base-l3), var(--color-_base));
   --lui-color-text-inverse: light-dark(var(--color-white), var(--color-_base-d5));


   /* --- Semantic: border --- */
   --lui-color-border: light-dark(var(--color-_base-l5), var(--color-_base-d3));
   --lui-color-border-strong: light-dark(var(--color-_base-l3), var(--color-_base-l1));
   --lui-color-border-focus: light-dark(var(--color-_base), var(--color-_base-l4));

   /* --- Semantic: status --- */
   --lui-color-valid: var(--color-_valid);
   --lui-color-valid-subtle: var(--color-_valid-l1);
   --lui-color-valid-text: var(--color-white);
   --lui-color-valid-hover: var(--color-_valid-d1);

   --lui-color-warning: var(--color-_warning);
   --lui-color-warning-subtle: var(--color-_warning-l1);
   --lui-color-warning-text: var(--color-_base-d6);
   --lui-color-warning-hover: var(--color-_warning-d1);

   --lui-color-invalid: var(--color-_invalid);
   --lui-color-invalid-subtle: var(--color-_invalid-l1);
   --lui-color-invalid-text: var(--color-white);
   --lui-color-invalid-hover: var(--color-_invalid-d1);

   /* ──────────────────────────────────────────────────────────
     2. TYPOGRAPHY
  ────────────────────────────────────────────────────────── */

   --lui-font: ui-sans-serif, system-ui, sans-serif;
   --lui-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

   --lui-text-xs: 0.75rem;
   --lui-text-sm: 0.875rem;
   --lui-text-md: 1rem;
   --lui-text-lg: 1.125rem;
   --lui-text-xl: 1.25rem;
   --lui-text-2xl: 1.5rem;
   --lui-text-3xl: 1.875rem;
   --lui-text-4xl: 2.25rem;
   --lui-text-5xl: 3rem;

   --lui-font-regular: 400;
   --lui-font-medium: 500;
   --lui-font-semibold: 600;
   --lui-font-bold: 700;

   /*
   --lui-font: "Inter", ui-sans-serif, system-ui, sans-serif;
   400 → body text
500 → mierne zvýraznenie
600 → silnejší emphasis
700 → bold*/

   /* ──────────────────────────────────────────────────────────
     3. SPACING
  ────────────────────────────────────────────────────────── */
   --lui-unit: 0.25rem;
   --lui-unit-2: calc(var(--lui-unit) * 2);
   --lui-unit-3: calc(var(--lui-unit) * 3);
   --lui-unit-4: calc(var(--lui-unit) * 4);
   --lui-unit-5: calc(var(--lui-unit) * 5);
   --lui-unit-6: calc(var(--lui-unit) * 6);
   --lui-unit-8: calc(var(--lui-unit) * 8);

   /*
  --lui-space-0:   0;
  --lui-space-0-5: 0.125rem;
  --lui-space-1:   0.25rem;
  --lui-space-1-5: 0.375rem;
  --lui-space-2:   0.5rem;
  --lui-space-2-5: 0.625rem;
  --lui-space-3:   0.75rem;
  --lui-space-3-5: 0.875rem;
  --lui-space-4:   1rem;
  --lui-space-5:   1.25rem;
  --lui-space-6:   1.5rem;
  --lui-space-7:   1.75rem;
  --lui-space-8:   2rem;
  --lui-space-10:  2.5rem;
  --lui-space-12:  3rem;
  --lui-space-16:  4rem;
  --lui-space-20:  5rem;
  --lui-space-24:  6rem;
  --lui-space-32:  8rem;

  --lui-space-component-xs: var(--lui-space-1) var(--lui-space-2);
  --lui-space-component-sm: var(--lui-space-1-5) var(--lui-space-3);
  --lui-space-component-md: var(--lui-space-2) var(--lui-space-4);
  --lui-space-component-lg: var(--lui-space-2-5) var(--lui-space-5);
  --lui-space-component-xl: var(--lui-space-3) var(--lui-space-6);

  --lui-size-1:  0.25rem;
  --lui-size-2:  0.5rem;
  --lui-size-3:  0.75rem;
  --lui-size-4:  1rem;
  --lui-size-5:  1.25rem;
  --lui-size-6:  1.5rem;
  --lui-size-8:  2rem;
  --lui-size-10: 2.5rem;
  --lui-size-12: 3rem;
  --lui-size-16: 4rem;*/

   /* ──────────────────────────────────────────────────────────
     4. BORDER RADIUS
  ────────────────────────────────────────────────────────── */

   --lui-radius: 0.5rem;

   /* ──────────────────────────────────────────────────────────
     5. TRANSITIONS
  ────────────────────────────────────────────────────────── */

   --lui-duration-instant: 50ms;
   --lui-duration-fast: 100ms;
   --lui-duration-normal: 200ms;
   --lui-duration-slow: 300ms;
   --lui-duration-slower: 400ms;

   --lui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
   --lui-ease-in: cubic-bezier(0.4, 0, 1, 1);
   --lui-ease-out: cubic-bezier(0, 0, 0.2, 1);
   --lui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

   --lui-transition: var(--lui-duration-normal) var(--lui-ease-default);

   /* ──────────────────────────────────────────────────────────
     6. Z-INDEX
  ────────────────────────────────────────────────────────── */

   --lui-z-base: 0;
   --lui-z-raised: 10;
   --lui-z-dropdown: 100;
   --lui-z-sticky: 200;
   --lui-z-navbar: 200;
   --lui-z-overlay: 300;
   --lui-z-modal: 400;
   --lui-z-toast: 500;
   --lui-z-tooltip: 600;

   /* ──────────────────────────────────────────────────────────
     7. FOCUS RING
  ────────────────────────────────────────────────────────── */

   --lui-focus-ring-width: 3px;
   --lui-focus-ring-offset: 2px;
   --lui-focus-ring-color: light-dark(var(--color-_base-l5), var(--color-_base-l4));
   --lui-focus-ring: 0 0 0 var(--lui-focus-ring-width) var(--lui-focus-ring-color);
}

[data-theme="dark"] {
   --lui-color-base-outline: var(--color-_base-l2);
   --lui-color-base-hover-outline: var(--color-_base-l4);
   --lui-color-base-hover-ghost: oklch(from var(--color-_base-l2) l calc(c + 0.1) h / 15%);
   --lui-color-base-subtle: var(--color-_base-d5);
   --lui-color-base-muted: var(--color-_base-d4);
   --lui-color-base-border: var(--color-_base-d3);

   --lui-color-bg: var(--color-_base-d7);
   --lui-color-bg-subtle: var(--color-_base-d4);
   --lui-color-bg-muted: var(--color-_base-d3);
   --lui-color-bg-inset: var(--color-_base-d2);
   --lui-color-bg-overlay: color-mix(in oklch, var(--color-_base-d7) 75%, transparent);
   --lui-color-shadow: var(--color-black);
   --lui-color-bg-trans: oklch(from var(--color-_base-d7) l c h / 25%);
   --lui-color-surface: var(--color-_base-d6);
   --lui-color-surface-raised: var(--color-_base-d4);
   --lui-color-text: var(--color-_base-l5);
   --lui-color-text-href: var(--color-_accent-l1);
   --lui-color-text-href-hover: var(--color-_accent-l2);
   --lui-color-text-href-deco: var(--color-_base-d1);
   --lui-color-text-secondary: var(--color-_base-l2);
   --lui-color-text-tertiary: var(--color-_base-l1);
   --lui-color-text-disabled: var(--color-_base);
   --lui-color-text-inverse: var(--color-_base-d5);
   --lui-color-border: var(--color-_base-d3);
   --lui-color-border-strong: var(--color-_base-l1);
   --lui-color-border-focus: var(--color-_base-l4);

   --lui-color-valid: var(--color-_valid);
   --lui-color-valid-subtle: var(--color-_valid-l1);
   --lui-color-valid-text: var(--color-white);
   --lui-color-valid-hover: var(--color-_valid-d1);

   --lui-color-warning: var(--color-_warning);
   --lui-color-warning-subtle: var(--color-_warning-l1);
   --lui-color-warning-text: var(--color-_base-d6);
   --lui-color-warning-hover: var(--color-_warning-d1);

   --lui-color-invalid: var(--color-_invalid);
   --lui-color-invalid-subtle: var(--color-_invalid-l1);
   --lui-color-invalid-text: var(--color-white);
   --lui-color-invalid-hover: var(--color-_invalid-d1);
   --lui-focus-ring-color: var(--color-_base-l4);
}