/* GENERIRANO — ne uređuj ručno. Izvor: css/tokens.css → npm run build:css.
   Postoji zato što privacy/terms/faq/contact.html ne učitavaju bundle, a
   paleta smije živjeti na jednom mjestu. (tailwindcss 4.3.3)
 */

@layer theme {
  :root, :host {
    --spacing: 0.25rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --aspect-video: 16 / 9;
    --color-white: #fff;
    --color-black: #000;
    --color-surface-0: #f7f9fc;
    --color-surface-1: #ffffff;
    --color-surface-2: #edf1f7;
    --color-ink-0: #0e1a2b;
    --color-ink-1: #34455c;
    --color-ink-2: #5b6879;
    --color-line: #dde4ee;
    --color-line-strong: #7d8a9c;
    --color-brand-400: #6366f1;
    --color-brand-500: #4f46e5;
    --color-brand-600: #4338ca;
    --color-brand-ink: #4338ca;
    --color-on-brand: #ffffff;
    --color-on-ok: #ffffff;
    --color-on-danger: #ffffff;
    --color-shadow: #0e1a2b;
    --color-on-tint-dark: #000000;
    --color-on-tint-light: #ffffff;
    --theme-swatch-academic-bg: #f7f9fc;
    --theme-swatch-academic-acc: #4f46e5;
    --theme-swatch-chalk-bg: #1e1f1c;
    --theme-swatch-chalk-acc: #f2c14e;
    --theme-swatch-mint-bg: #0b1a1c;
    --theme-swatch-mint-acc: #4fc9ab;
    --theme-swatch-carbon-bg: #0f1115;
    --theme-swatch-carbon-acc: #818cf8;
    --color-mark: #ffd24a;
    --color-ok: #10794a;
    --color-ok-strong: #0b5e39;
    --color-warn: #8a5800;
    --color-warn-ink: #7a4d00;
    --color-danger: #c0332b;
    --color-danger-ink: #a32821;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --text-xs: 0.75rem;
    --text-xs--line-height: 1.5;
    --text-sm: 0.875rem;
    --text-sm--line-height: 1.5;
    --text-base: 1rem;
    --text-base--line-height: 1.6;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.6;
    --text-xl: 1.375rem;
    --text-xl--line-height: 1.45;
    --text-2xl: 1.75rem;
    --text-2xl--line-height: 1.3;
    --text-3xl: 2.25rem;
    --text-3xl--line-height: 1.2;
    --text-4xl: 3rem;
    --text-4xl--line-height: 1.1;
    --text-5xl: 3.75rem;
    --text-5xl--line-height: 1.05;
    --text-6xl: 4.5rem;
    --text-6xl--line-height: 1;
    --spacing-touch: 2.75rem;
    --spacing-touch-lg: 3rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;
    --radius-full: 9999px;
    --shadow-e1: 0 1px 2px rgb(14 26 43 / 0.06), 0 4px 12px -4px rgb(14 26 43 / 0.10);
    --shadow-e2: 0 2px 4px rgb(14 26 43 / 0.06), 0 12px 28px -8px rgb(14 26 43 / 0.16);
    --color-ink-red: #c81d1d;
    --color-ink-amber: #806212;
    --color-ink-green: #197453;
    --color-ink-cyan: #12707e;
    --color-ink-blue: #1b65bf;
    --color-ink-indigo: #4554e4;
    --color-ink-violet: #8a33e2;
    --color-ink-pink: #c11c72;
    --breakpoint-xs: 30rem;
  }
}

:root[data-theme="chalk"] {
  --color-surface-0: #1e1f1c;
  --color-surface-1: #292a26;
  --color-surface-2: #35362f;
  --color-line: #45463e;
  --color-line-strong: #8a8878;
  --color-ink-0: #f5f2e8;
  --color-ink-1: #dcd8c9;
  --color-ink-2: #a6a292;
  --color-brand-400: #f7d47c;
  --color-brand-500: #f2c14e;
  --color-brand-600: #d3a233;
  --color-brand-ink: #f2c14e;
  --color-on-brand: #1e1f1c;
  --color-mark: rgb(242 193 78 / 0.30);
  --color-on-ok: #14161a;
  --color-on-danger: #14161a;
  --color-shadow: #000000;
  --color-ok: #8fbf6b;
  --color-ok-strong: #6da34d;
  --color-warn: #e3a93c;
  --color-warn-ink: #edbe63;
  --color-danger: #e3705c;
  --color-danger-ink: #ee8b78;
  --color-ink-red: #f98484;
  --color-ink-amber: #fbbf24;
  --color-ink-green: #34d399;
  --color-ink-cyan: #22d3ee;
  --color-ink-blue: #67a9fa;
  --color-ink-indigo: #97a0f9;
  --color-ink-violet: #c58efc;
  --color-ink-pink: #f580bd;
  --shadow-e1: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
  --shadow-e2: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.35);
}

:root[data-theme="academic"] {
  --color-surface-0: #f7f9fc;
  --color-surface-1: #ffffff;
  --color-surface-2: #edf1f7;
  --color-line: #dde4ee;
  --color-line-strong: #7d8a9c;
  --color-ink-0: #0e1a2b;
  --color-ink-1: #34455c;
  --color-ink-2: #5b6879;
  --color-brand-400: #6366f1;
  --color-brand-500: #4f46e5;
  --color-brand-600: #4338ca;
  --color-brand-ink: #4338ca;
  --color-on-brand: #ffffff;
  --color-mark: #ffd24a;
  --color-on-ok: #ffffff;
  --color-on-danger: #ffffff;
  --color-shadow: #0e1a2b;
  --color-ok: #10794a;
  --color-ok-strong: #0b5e39;
  --color-warn: #8a5800;
  --color-warn-ink: #7a4d00;
  --color-danger: #c0332b;
  --color-danger-ink: #a32821;
  --color-ink-red: #c81d1d;
  --color-ink-amber: #806212;
  --color-ink-green: #197453;
  --color-ink-cyan: #12707e;
  --color-ink-blue: #1b65bf;
  --color-ink-indigo: #4554e4;
  --color-ink-violet: #8a33e2;
  --color-ink-pink: #c11c72;
  --shadow-e1: 0 1px 2px rgb(14 26 43 / 0.06), 0 4px 12px -4px rgb(14 26 43 / 0.10);
  --shadow-e2: 0 2px 4px rgb(14 26 43 / 0.06), 0 12px 28px -8px rgb(14 26 43 / 0.16);
}

:root[data-theme="mint"] {
  --color-surface-0: #0b1a1c;
  --color-surface-1: #112629;
  --color-surface-2: #193539;
  --color-line: #1f4247;
  --color-line-strong: #5c8e94;
  --color-ink-0: #e9f3f2;
  --color-ink-1: #c5d8d7;
  --color-ink-2: #88a7a6;
  --color-brand-400: #7adcc4;
  --color-brand-500: #4fc9ab;
  --color-brand-600: #2fa88c;
  --color-brand-ink: #7adcc4;
  --color-on-brand: #0b1a1c;
  --color-mark: rgb(79 201 171 / 0.30);
  --color-on-ok: #14161a;
  --color-on-danger: #14161a;
  --color-shadow: #030c0d;
  --color-ok: #6bcb77;
  --color-ok-strong: #46b36a;
  --color-warn: #e2b53f;
  --color-warn-ink: #efc762;
  --color-danger: #e2725f;
  --color-danger-ink: #e8836f;
  --color-ink-red: #f87b7b;
  --color-ink-amber: #fbbf24;
  --color-ink-green: #34d399;
  --color-ink-cyan: #22d3ee;
  --color-ink-blue: #60a5fa;
  --color-ink-indigo: #8f99f9;
  --color-ink-violet: #c186fc;
  --color-ink-pink: #f474b7;
  --shadow-e1: 0 4px 6px -1px rgb(3 12 13 / 0.45), 0 2px 4px -2px rgb(3 12 13 / 0.35);
  --shadow-e2: 0 10px 15px -3px rgb(3 12 13 / 0.5), 0 4px 6px -4px rgb(3 12 13 / 0.4);
}

:root[data-theme="carbon"] {
  --color-surface-0: #0f1115;
  --color-surface-1: #171a21;
  --color-surface-2: #1f232c;
  --color-line: #262b36;
  --color-line-strong: #6b7280;
  --color-ink-0: #e6e8ee;
  --color-ink-1: #c3c8d4;
  --color-ink-2: #9aa1b1;
  --color-brand-400: #a5b4fc;
  --color-brand-500: #818cf8;
  --color-brand-600: #7075f4;
  --color-brand-ink: #a5b4fc;
  --color-on-brand: #0f1115;
  --color-mark: rgb(99 102 241 / 0.30);
  --color-on-ok: #14161a;
  --color-on-danger: #14161a;
  --color-shadow: #000000;
  --color-ok: #6bcb77;
  --color-ok-strong: #46b36a;
  --color-warn: #e2b53f;
  --color-warn-ink: #efc762;
  --color-danger: #e2725f;
  --color-danger-ink: #e8836f;
  --color-ink-red: #f87b7b;
  --color-ink-amber: #fbbf24;
  --color-ink-green: #34d399;
  --color-ink-cyan: #22d3ee;
  --color-ink-blue: #60a5fa;
  --color-ink-indigo: #8f99f9;
  --color-ink-violet: #c186fc;
  --color-ink-pink: #f474b7;
  --shadow-e1: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --shadow-e2: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.45);
}

:root {
  --primary: var(--color-brand-500);
  --border-color: var(--color-line);
  --transition: all 0.3s ease;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --touch-target: 44px;
  --touch-target-large: 48px;
  --nav-h: 72px;
}

:root {
  --topbar-h: 64px;
  --pathbar-h: 44px;
  --chrome-h: calc(var(--topbar-h) + var(--pathbar-h) + var(--safe-top));
  --bottom-inset: 0px;
  --bottom-furniture-h: 0px;
}

:root[data-bez~="zamucenja"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:root[data-bez~="sjena"] * {
  box-shadow: none !important;
}

:root[data-bez~="prijelaza"] *, :root[data-bez~="prijelaza"] *::before, :root[data-bez~="prijelaza"] *::after {
  transition: none !important;
  animation: none !important;
}

:root[data-bez~="pozadine"] .landing-page.active {
  background-image: none !important;
}