/* ==========================================================================\n   NUTRIMAX — dizajnerski sustav\n   ========================================================================== */
:root {
  color-scheme: light;

  --font-body: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: Manrope, Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.25rem, 1.4vw, 1.5rem);
  --fs-xl: clamp(1.55rem, 2.4vw, 2.15rem);
  --fs-2xl: clamp(2rem, 4vw, 3.35rem);
  --fs-hero: clamp(2.7rem, 6vw, 5.7rem);
  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;
  --weight-medium: 500;
  --weight-semibold: 650;
  --weight-bold: 760;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --space-5xl: 7.5rem;

  --container-sm: 42rem;
  --container-md: 58rem;
  --container-lg: 72rem;
  --container-xl: 80rem;
  --reading-width: 46rem;

  --radius-xs: 0.45rem;
  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  --duration-fast: 160ms;
  --duration-normal: 240ms;
  --duration-slow: 520ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(.2, .8, .2, 1);

  --brand-900: #103f31;
  --brand-800: #14513d;
  --brand-700: #176548;
  --brand-600: #1c7955;
  --brand-500: #258f62;
  --brand-400: #42a978;
  --brand-300: #73c69a;
  --brand-200: #b9e5ca;
  --brand-100: #dff5e7;
  --brand-50: #f1fbf5;

  --bg-page: #f7faf8;
  --bg-surface: #ffffff;
  --bg-surface-soft: #eff6f2;
  --bg-surface-raised: #ffffff;
  --text-strong: #14261f;
  --text-main: #283b34;
  --text-muted: #5c6c66;
  --text-inverse: #ffffff;
  --border-soft: #dce8e0;
  --border-strong: #bfd2c6;
  --header-bg: rgba(247, 250, 248, .88);
  --overlay: rgba(7, 31, 23, .62);

  --link: #126047;
  --link-hover: #0d4936;
  --focus-ring: rgba(37, 143, 98, .36);

  --status-available-text: #14513d;
  --status-available-bg: #e3f6ea;
  --status-available-border: #86cda4;
  --status-estimated-text: #704600;
  --status-estimated-bg: #fff4d6;
  --status-estimated-border: #d69a28;
  --status-missing-text: #4f5b61;
  --status-missing-bg: #eef1f2;
  --status-missing-border: #aeb8bd;
  --status-user-text: #16568f;
  --status-user-bg: #e8f2ff;
  --status-user-border: #80b4e3;
  --danger-text: #8a2630;
  --danger-bg: #fff0f1;
  --danger-border: #df9298;

  --shadow-sm: 0 8px 24px rgba(16, 63, 49, .07);
  --shadow-md: 0 18px 45px rgba(16, 63, 49, .11);
  --shadow-lg: 0 28px 80px rgba(16, 63, 49, .16);

  --z-header: 100;
  --z-dropdown: 200;
  --z-dialog: 300;
  --z-toast: 400;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-page: #0e1714;
    --bg-surface: #15211d;
    --bg-surface-soft: #1b2924;
    --bg-surface-raised: #1b2924;
    --text-strong: #eef8f1;
    --text-main: #d5e2da;
    --text-muted: #a3b3aa;
    --border-soft: #2b3b34;
    --border-strong: #40564b;
    --header-bg: rgba(14, 23, 20, .9);
    --overlay: rgba(2, 11, 8, .72);
    --link: #8dd4aa;
    --link-hover: #b1e8c6;
    --focus-ring: rgba(115, 198, 154, .42);
    --status-available-text: #b9ebcb;
    --status-available-bg: #173428;
    --status-available-border: #397455;
    --status-estimated-text: #f6d891;
    --status-estimated-bg: #392c13;
    --status-estimated-border: #85631b;
    --status-missing-text: #d0d8dc;
    --status-missing-bg: #273036;
    --status-missing-border: #59666d;
    --status-user-text: #b9d9fb;
    --status-user-bg: #172d44;
    --status-user-border: #3d6f9e;
    --danger-text: #ffc5ca;
    --danger-bg: #3a1d20;
    --danger-border: #884950;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, .3);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, .38);
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #0e1714;
  --bg-surface: #15211d;
  --bg-surface-soft: #1b2924;
  --bg-surface-raised: #1b2924;
  --text-strong: #eef8f1;
  --text-main: #d5e2da;
  --text-muted: #a3b3aa;
  --border-soft: #2b3b34;
  --border-strong: #40564b;
  --header-bg: rgba(14, 23, 20, .9);
  --overlay: rgba(2, 11, 8, .72);
  --link: #8dd4aa;
  --link-hover: #b1e8c6;
  --focus-ring: rgba(115, 198, 154, .42);
  --status-available-text: #b9ebcb;
  --status-available-bg: #173428;
  --status-available-border: #397455;
  --status-estimated-text: #f6d891;
  --status-estimated-bg: #392c13;
  --status-estimated-border: #85631b;
  --status-missing-text: #d0d8dc;
  --status-missing-bg: #273036;
  --status-missing-border: #59666d;
  --status-user-text: #b9d9fb;
  --status-user-bg: #172d44;
  --status-user-border: #3d6f9e;
  --danger-text: #ffc5ca;
  --danger-bg: #3a1d20;
  --danger-border: #884950;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, .22);
  --shadow-md: 0 18px 45px rgba(0, 0, 0, .3);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .38);
}

html[data-theme="light"] { color-scheme: light; }

/* Službena NutriMax paleta preuzeta iz logotipa i aplikacije */
:root {
  --app-green: #3b9f49;
  --app-green-dark: #2f873e;
  --app-green-soft: #e8f5e9;
  --app-blue: #4695cf;
  --app-blue-dark: #2378b7;
  --app-blue-soft: #e8f3fb;
  --app-orange: #f47a12;
  --app-orange-dark: #ca5900;
  --app-orange-soft: #fff0e3;
  --app-ink: #292d3e;

  --brand-900: #194f2a;
  --brand-800: #266f35;
  --brand-700: #2f873e;
  --brand-600: #3b9f49;
  --brand-500: #49ad56;
  --brand-400: #68bd72;
  --brand-300: #91d199;
  --brand-200: #c6e8ca;
  --brand-100: #e8f5e9;
  --brand-50: #f4fbf5;

  --bg-page: #f4f7fb;
  --bg-surface-soft: #eef3f8;
  --text-strong: #292d3e;
  --text-main: #3e4656;
  --text-muted: #6e7685;
  --link: #2f873e;
  --link-hover: #246d32;
  --focus-ring: rgba(70, 149, 207, .38);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --app-green-soft: #1c3822;
    --app-blue-soft: #172f43;
    --app-orange-soft: #3b2818;
    --text-strong: #f1f3f7;
    --text-main: #d4dae4;
    --text-muted: #a5adbb;
  }
}

html[data-theme="dark"] {
  --app-green-soft: #1c3822;
  --app-blue-soft: #172f43;
  --app-orange-soft: #3b2818;
  --text-strong: #f1f3f7;
  --text-main: #d4dae4;
  --text-muted: #a5adbb;
}