/* Rezble — design tokens (safe tema) */

:root {
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-display: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  --bg: #F6F1E9;
  --bg-elev: #FFFFFF;
  --bg-sunken: #EDE5D6;
  --ink: #1F2A26;
  --ink-soft: #3C4A44;
  --ink-mute: #7A8580;
  --line: #E3D9C6;
  --line-strong: #C8BCA3;
  --canvas-grid: #E3D9C6;
  --canvas-hair: #EFE7D5;

  --accent: #C4704B;
  --accent-soft: #F5E3D7;
  --accent-ink: #FFFFFF;
  --secondary: #1B4332;
  --info: #4A6FA5;
  --warning: #D4A94B;
  --success: #4A7C59;
  --danger: #B8452E;

  --sidebar-bg: #1B4332;
  --sidebar-ink: #F1EDE2;
  --sidebar-mute: #8FA79B;
  --sidebar-line: rgba(241,237,226,.12);
  --sidebar-hover: rgba(241,237,226,.06);
  --sidebar-active-bg: rgba(196,112,75,.18);
  --sidebar-active-ink: #F5E3D7;

  --res-past: #8B938E;
  --res-now: #C4704B;
  --res-next: #1B4332;
  --res-pending: #D4A94B;

  --card-radius: 14px;
  --shadow-card: 0 1px 2px rgba(30,40,30,.04), 0 4px 16px -6px rgba(30,40,30,.08);
  --shadow-pop: 0 8px 30px -8px rgba(30,40,30,.22);

  --sidebar-width: 252px;
  --sidebar-width-collapsed: 68px;

  /* Legacy mappings: stari main.css žetoni mapirajo na nove, da obstoječ CSS
     ne crkne takoj, dokler strani migrirajo. */
  --color-bg: var(--bg);
  --color-surface: var(--bg-elev);
  --color-sidebar: var(--sidebar-bg);
  --color-sidebar-2: #143327;
  --color-accent: var(--accent);
  --color-accent-hover: #A35D3F;
  --color-accent-light: var(--accent-soft);
  --color-text: var(--ink);
  --color-text-2: var(--ink-soft);
  --color-muted: var(--ink-mute);
  --color-border: var(--line);
  --color-success: var(--success);
  --color-danger: var(--danger);
  --color-past: #F6ECE5;
  --color-past-text: var(--res-past);
  --font: var(--font-sans);
  --radius: 10px;
  --radius-lg: var(--card-radius);
  --shadow: var(--shadow-card);
  --shadow-md: var(--shadow-card);
  --shadow-lg: var(--shadow-pop);
  --transition: .18s var(--ease);
  --header-h: 58px;
  --banner-h: 44px;
}

.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
button { font: inherit; border: 0; background: transparent; cursor: pointer; color: inherit; padding: 0; }
a { color: inherit; }
input, textarea, select { font: inherit; }

@keyframes rz-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rz-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rz-slideRight { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes rz-pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(184,69,46,.55); }
  70% { box-shadow: 0 0 0 8px rgba(184,69,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,69,46,0); }
}