/* ==========================================================================
   Priče sa čeke — Design Tokens
   Three-layer architecture:  Primitive  →  Semantic  →  Component
   Source: PLAN.md §1.3 (skill: design-system), §2 (palette, WCAG-verified)

   RULE: components must never use a raw hex value. Always var(--…).
   ========================================================================== */

/* ==========================================================================
   LAYER 1 — PRIMITIVE TOKENS
   Raw values. No meaning attached. Changed rarely.
   ========================================================================== */

:root {
  /* ---- Brand: forest (primary) ------------------------------------------ */
  --forest-900: #1c2118;
  --forest-800: #24402e;
  --forest-700: #2f4a34;
  --forest-600: #3a5a40;
  --forest-500: #4d7355;
  --forest-300: #8fbf9f;
  --forest-100: #dfeadf;
  --forest-50: #eef4ee;

  --forest-900-rgb: 28 33 24;
  --forest-800-rgb: 36 64 46;
  --forest-700-rgb: 47 74 52;
  --forest-300-rgb: 143 191 159;

  /* ---- Brand: brass (accent) -------------------------------------------- */
  --brass-800: #8a4008;
  --brass-700: #b45309;
  --brass-500: #d97706;
  --brass-300: #e8b33d;
  --brass-100: #f7ead2;

  --brass-700-rgb: 180 83 9;
  --brass-300-rgb: 232 179 61;

  /* ---- Brand: bark (seasonal / tags) ------------------------------------ */
  --bark-700: #7a2e2e;
  --bark-100: #f6e7e5;

  /* ---- Neutrals (warm "paper" editorial scale) -------------------------- */
  --ink-900: #1a1a17;
  --ink-800: #2b2b26;
  --ink-700: #3f3f3a;
  --ink-500: #5c5c54;
  --ink-400: #6b6b62;
  --ink-300: #9a9a90;
  --line-300: #d5d1c9;
  --line-200: #e4e1db;
  --line-100: #efece6;
  --paper-100: #faf9f7;
  --paper-50: #fdfcfa;
  --white: #ffffff;

  --ink-900-rgb: 26 26 23;
  --paper-100-rgb: 250 249 247;
  --white-rgb: 255 255 255;

  /* ---- Status ------------------------------------------------------------ */
  --green-700: #2d6a4f;
  --green-50: #e8f3ed;
  --amber-800: #8a5a00;
  --amber-50: #fbf1dc;
  --red-700: #b3261e;
  --red-50: #fbeae9;
  --blue-700: #1f5673;
  --blue-50: #e6eff4;

  /* ---- Spacing — 4px base ----------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  /* ---- Typography: families --------------------------------------------- */
  --font-display: "Libre Bodoni", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Typography: fluid size scale ------------------------------------- */
  --text-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --text-h1: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --text-h3: clamp(1.185rem, 1.05rem + 0.6vw, 1.5rem);
  --text-h4: 1.125rem;
  --text-lead: 1.1875rem;
  --text-article: 1.1875rem;
  --text-base: 1.0625rem;
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;
  --text-eyebrow: 0.75rem;

  /* ---- Typography: leading (apple-design §15 — inverse of size) --------- */
  --leading-display: 1.04;
  --leading-h1: 1.08;
  --leading-h2: 1.15;
  --leading-h3: 1.25;
  --leading-body: 1.7;
  --leading-article: 1.75;
  --leading-tight: 1.4;

  /* ---- Typography: tracking (apple-design §15 — size-specific) ---------- */
  --tracking-display: -0.022em;
  --tracking-h1: -0.018em;
  --tracking-h2: -0.012em;
  --tracking-h3: -0.006em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.08em;

  /* ---- Typography: weights ---------------------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Radius ------------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Shadow (warm, never pure black) ---------------------------------- */
  --shadow-xs: 0 1px 2px rgb(var(--forest-900-rgb) / 0.06);
  --shadow-sm: 0 1px 3px rgb(var(--forest-900-rgb) / 0.08),
    0 1px 2px rgb(var(--forest-900-rgb) / 0.04);
  --shadow-md: 0 4px 12px rgb(var(--forest-900-rgb) / 0.09),
    0 2px 4px rgb(var(--forest-900-rgb) / 0.05);
  --shadow-lg: 0 12px 32px rgb(var(--forest-900-rgb) / 0.12),
    0 4px 8px rgb(var(--forest-900-rgb) / 0.06);

  /* ---- Motion — durations (emil-design-eng: all UI under 300ms) --------- */
  --dur-press: 120ms;
  --dur-hover: 160ms;
  --dur-exit: 160ms;
  --dur-dropdown: 200ms;
  --dur-enter: 240ms;
  --dur-drawer: 280ms;

  /* ---- Motion — easings (custom curves; built-ins are too weak) --------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  /* NOTE: there is deliberately no --ease-in. ease-in is never used on UI. */

  /* ---- Layout ------------------------------------------------------------ */
  --container-max: 1240px;
  --container-narrow: 720px;
  --z-header: 1030;
  --z-drawer: 1045;
  --z-toast: 1090;
}

/* ==========================================================================
   LAYER 2 — SEMANTIC TOKENS
   Purpose-based aliases. This is the only layer a theme switch touches.
   ========================================================================== */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --color-background: var(--paper-100);
  --color-background-alt: var(--paper-50);
  --color-surface: var(--white);
  --color-surface-sunken: var(--line-100);
  --color-surface-inverse: var(--forest-900);

  /* ---- Text -------------------------------------------------------------- */
  --color-foreground: var(--ink-900);
  --color-foreground-strong: var(--ink-900);
  --color-muted-foreground: var(--ink-500);
  --color-subtle-foreground: var(--ink-400);
  --color-on-inverse: var(--paper-50);
  --color-on-primary: var(--white);
  --color-on-accent: var(--white);

  /* ---- Primary ----------------------------------------------------------- */
  --color-primary: var(--forest-700);
  --color-primary-hover: var(--forest-800);
  --color-primary-active: var(--forest-900);
  --color-primary-subtle: var(--forest-50);
  --color-primary-rgb: var(--forest-700-rgb);

  /* ---- Accent ------------------------------------------------------------ */
  --color-accent: var(--brass-700);
  --color-accent-hover: var(--brass-800);
  --color-accent-subtle: var(--brass-100);
  --color-accent-rgb: var(--brass-700-rgb);
  /* Decorative only — 3.03:1, never carries text */
  --color-accent-decorative: var(--brass-500);

  /* ---- Lines & focus ----------------------------------------------------- */
  --color-border: var(--line-200);
  --color-border-strong: var(--line-300);
  --color-ring: var(--forest-700);

  /* ---- Status ------------------------------------------------------------ */
  --color-success: var(--green-700);
  --color-success-bg: var(--green-50);
  --color-warning: var(--amber-800);
  --color-warning-bg: var(--amber-50);
  --color-danger: var(--red-700);
  --color-danger-bg: var(--red-50);
  --color-info: var(--blue-700);
  --color-info-bg: var(--blue-50);

  /* ---- Translucent chrome (apple-design §12) ----------------------------- */
  --material-chrome: rgb(var(--paper-100-rgb) / 0.72);
  --material-blur: blur(20px) saturate(180%);
  --material-edge: rgb(var(--white-rgb) / 0.5);

  /* ---- Spacing roles ----------------------------------------------------- */
  --space-component: var(--space-4);
  --space-card: var(--space-5);
  --space-block: var(--space-8);
  --space-section: var(--space-16);
  --space-section-lg: var(--space-24);
  --space-gutter: var(--space-4);
}

/* ==========================================================================
   DARK THEME — semantic layer only. Primitives untouched.
   Applies on [data-theme="dark"] and on system preference (unless opted out).
   ========================================================================== */

:root[data-theme="dark"] {
  --color-background: #14180f;
  --color-background-alt: #191e14;
  --color-surface: var(--forest-900);
  --color-surface-sunken: #10140d;
  --color-surface-inverse: var(--paper-50);

  --color-foreground: #f2f0ea;
  --color-foreground-strong: #ffffff;
  --color-muted-foreground: #b4b3a8;
  --color-subtle-foreground: #97968c;
  --color-on-inverse: var(--ink-900);
  --color-on-primary: #0f1310;
  --color-on-accent: #1a1205;

  --color-primary: var(--forest-300);
  --color-primary-hover: #a6cfb3;
  --color-primary-active: #bcdcc6;
  --color-primary-subtle: #202b21;
  --color-primary-rgb: var(--forest-300-rgb);

  --color-accent: var(--brass-300);
  --color-accent-hover: #f0c260;
  --color-accent-subtle: #2c2412;
  --color-accent-rgb: var(--brass-300-rgb);
  --color-accent-decorative: var(--brass-500);

  --color-border: #2f382b;
  --color-border-strong: #3d4838;
  --color-ring: var(--forest-300);

  --color-success: #7fc9a4;
  --color-success-bg: #16281f;
  --color-warning: #e0b45c;
  --color-warning-bg: #2b2311;
  --color-danger: #ef9a94;
  --color-danger-bg: #2e1817;
  --color-info: #8ec4de;
  --color-info-bg: #14242c;

  --material-chrome: rgb(20 24 15 / 0.72);
  --material-edge: rgb(255 255 255 / 0.08);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.35);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #14180f;
    --color-background-alt: #191e14;
    --color-surface: var(--forest-900);
    --color-surface-sunken: #10140d;
    --color-surface-inverse: var(--paper-50);

    --color-foreground: #f2f0ea;
    --color-foreground-strong: #ffffff;
    --color-muted-foreground: #b4b3a8;
    --color-subtle-foreground: #97968c;
    --color-on-inverse: var(--ink-900);
    --color-on-primary: #0f1310;
    --color-on-accent: #1a1205;

    --color-primary: var(--forest-300);
    --color-primary-hover: #a6cfb3;
    --color-primary-active: #bcdcc6;
    --color-primary-subtle: #202b21;
    --color-primary-rgb: var(--forest-300-rgb);

    --color-accent: var(--brass-300);
    --color-accent-hover: #f0c260;
    --color-accent-subtle: #2c2412;
    --color-accent-rgb: var(--brass-300-rgb);

    --color-border: #2f382b;
    --color-border-strong: #3d4838;
    --color-ring: var(--forest-300);

    --color-success: #7fc9a4;
    --color-success-bg: #16281f;
    --color-warning: #e0b45c;
    --color-warning-bg: #2b2311;
    --color-danger: #ef9a94;
    --color-danger-bg: #2e1817;
    --color-info: #8ec4de;
    --color-info-bg: #14242c;

    --material-chrome: rgb(20 24 15 / 0.72);
    --material-edge: rgb(255 255 255 / 0.08);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55), 0 4px 8px rgb(0 0 0 / 0.35);

    color-scheme: dark;
  }
}

/* ==========================================================================
   LAYER 3 — COMPONENT TOKENS
   Per-component knobs. Always resolve to semantic tokens.
   ========================================================================== */

:root {
  /* ---- Header ------------------------------------------------------------ */
  --header-h: 60px;
  --header-h-lg: 76px;
  --header-bg: var(--material-chrome);
  --header-fg: var(--color-foreground);
  --header-border: var(--color-border);
  --header-logo-h: 38px;
  --header-logo-h-lg: 46px;

  /* ---- Button ------------------------------------------------------------ */
  --btn-radius: var(--radius-sm);
  --btn-pad-y: 0.6875rem;
  --btn-pad-x: var(--space-5);
  --btn-font: var(--font-body);
  --btn-weight: var(--weight-semibold);
  --btn-size: var(--text-sm);
  --btn-min-h: 44px; /* UX rule: touch target */

  --btn-primary-bg: var(--color-primary);
  --btn-primary-fg: var(--color-on-primary);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-bg-active: var(--color-primary-active);

  --btn-accent-bg: var(--color-accent);
  --btn-accent-fg: var(--color-on-accent);
  --btn-accent-bg-hover: var(--color-accent-hover);

  --btn-ghost-fg: var(--color-primary);
  --btn-ghost-bg-hover: var(--color-primary-subtle);

  --btn-disabled-bg: var(--color-surface-sunken);
  --btn-disabled-fg: var(--color-subtle-foreground);

  /* ---- Card -------------------------------------------------------------- */
  --card-bg: var(--color-surface);
  --card-fg: var(--color-foreground);
  --card-border: var(--color-border);
  --card-radius: var(--radius-md);
  --card-pad: var(--space-card);
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-md);
  --card-lift: -3px;
  --card-media-ratio: 16 / 10;

  /* ---- Article ----------------------------------------------------------- */
  --article-measure: 68ch;
  --article-size: var(--text-article);
  --article-leading: var(--leading-article);
  --article-para-gap: var(--space-6);

  /* ---- Form -------------------------------------------------------------- */
  --field-bg: var(--color-surface);
  --field-fg: var(--color-foreground);
  --field-border: var(--color-border-strong);
  --field-border-focus: var(--color-ring);
  --field-radius: var(--radius-sm);
  --field-pad-y: 0.6875rem;
  --field-pad-x: var(--space-4);
  --field-min-h: 44px;
  --field-placeholder: var(--color-subtle-foreground);
  --field-invalid: var(--color-danger);

  /* ---- Focus ring -------------------------------------------------------- */
  --focus-ring-w: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: rgb(var(--color-primary-rgb) / 0.45);

  /* ---- Badge / tag ------------------------------------------------------- */
  --badge-radius: var(--radius-pill);
  --badge-pad-y: 0.25rem;
  --badge-pad-x: 0.625rem;
  --badge-size: var(--text-eyebrow);

  /* ---- Sidebar ----------------------------------------------------------- */
  --sidebar-w: 340px;
  --sidebar-gap: var(--space-8);

  /* ---- Footer ------------------------------------------------------------ */
  --footer-bg: var(--forest-900);
  --footer-fg: #d8d5cc;
  --footer-fg-strong: #f2f0ea;
  --footer-border: rgb(255 255 255 / 0.1);

  /* ---- Fixed chrome ------------------------------------------------------
     Surfaces that stay dark in both themes (the admin topbar sits on brand
     green; the lightbox sits on its own scrim), so they carry their own
     foreground scale rather than following the semantic layer. */
  --chrome-bg: var(--forest-900);
  --chrome-fg: #e9e7e0;
  --chrome-fg-strong: #ffffff;
  --chrome-fg-muted: #cfccc3;
  --chrome-border: rgb(255 255 255 / 0.14);
  --chrome-hover: rgb(255 255 255 / 0.1);

  --overlay-scrim: rgb(0 0 0 / 0.9);
  --overlay-fg: #ffffff;
  --overlay-fg-muted: rgb(255 255 255 / 0.85);
  --overlay-control: rgb(255 255 255 / 0.12);
  --overlay-control-hover: rgb(255 255 255 / 0.24);

  /* ---- Print (literal ink on paper; themes do not apply) ----------------- */
  --print-bg: #ffffff;
  --print-fg: #000000;

  /* ---- Admin (same system, higher density) ------------------------------- */
  --admin-sidebar-w: 248px;
  --admin-topbar-h: 58px;
  --admin-pad: var(--space-4);
  --admin-row-h: 48px;
  --admin-font-size: var(--text-sm);
  --admin-radius: var(--radius-sm);
}

/* ==========================================================================
   BOOTSTRAP 5 BRIDGE
   Bootstrap is overridden THROUGH tokens — never by hardcoding hex in
   component CSS. Everything below just re-points a --bs-* var at ours.
   ========================================================================== */

:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: var(--text-base);
  --bs-body-line-height: var(--leading-body);
  --bs-body-color: var(--color-foreground);
  --bs-body-bg: var(--color-background);
  --bs-emphasis-color: var(--color-foreground-strong);
  --bs-secondary-color: var(--color-muted-foreground);
  --bs-tertiary-color: var(--color-subtle-foreground);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-sm: var(--radius-xs);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-xl: var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: var(--color-primary-rgb);
  --bs-link-hover-color: var(--color-primary-hover);

  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-info: var(--color-info);

  --bs-heading-color: var(--color-foreground-strong);
  --bs-font-sans-serif: var(--font-body);
  --bs-font-monospace: var(--font-mono);

  --bs-focus-ring-width: var(--focus-ring-w);
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: var(--focus-ring-color);

  --bs-gutter-x: var(--space-gutter);
}

/* ==========================================================================
   ACCESSIBILITY PREFERENCE OVERRIDES
   apple-design §14 — reduced motion is gentler feedback, not none.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 1ms;
    --dur-hover: 1ms;
    --dur-exit: 1ms;
    --dur-dropdown: 1ms;
    --dur-enter: 1ms;
    --dur-drawer: 1ms;
    --card-lift: 0px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --material-chrome: var(--color-background);
    --material-blur: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: var(--ink-400);
    --color-border-strong: var(--ink-700);
    --color-muted-foreground: var(--ink-700);
    --color-subtle-foreground: var(--ink-700);
    --material-chrome: var(--color-background);
    --material-blur: none;
    --focus-ring-w: 4px;
  }
}