/* ─────────────────────────────────────────────── espeapp — design tokens (svetla + temna tema) Svetla je privzeta. Temna se aktivira z .dark na . Vse komponente naj uporabljajo var() tokene, ne hardcoded barve. ─────────────────────────────────────────────── */ :root { /* Surfaces */ --surface-0: #fafaf9; /* page bg */ --surface-1: #f5f5f4; /* muted card / inactive pill */ --surface-2: #ffffff; /* elevated card */ --surface-3: #ffffff; /* input bg */ --border: #e7e5e4; --border-strong: #a8a29e; --border-input: #d6d3d1; /* Text */ --text-primary: #1c1917; --text-secondary: #78716c; --text-muted: #a8a29e; --text-inverse: #fafaf9; /* Accent */ --fill-accent: #1c1917; --on-accent: #ffffff; --fill-accent-hover: #292524; --ring-accent: rgba(28, 25, 23, 0.15); /* Semantic — pastel bg + saturated text/fill */ --bg-success: #dcfce7; --text-success: #166534; --fill-success: #22c55e; --bg-warning: #fef3c7; --text-warning: #92400e; --fill-warning: #f59e0b; --bg-danger: #fee2e2; --text-danger: #991b1b; --fill-danger: #ef4444; --bg-info: #dbeafe; --text-info: #1e40af; --fill-info: #3b82f6; --bg-neutral: #f5f5f4; --text-neutral: #57534e; /* Radius & shadow */ --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(0,0,0,.06); --shadow-elevated: 0 4px 16px rgba(0,0,0,.08); /* Sidebar */ --sidebar-bg: #ffffff; --sidebar-border: #e7e5e4; } html.dark { --surface-0: #0c0a09; --surface-1: #1c1917; --surface-2: #1c1917; --surface-3: #292524; --border: #292524; --border-strong: #57534e; --border-input: #44403c; --text-primary: #f5f5f4; --text-secondary: #a8a29e; --text-muted: #78716c; --text-inverse: #1c1917; --fill-accent: #f5f5f4; --on-accent: #1c1917; --fill-accent-hover: #e7e5e4; --ring-accent: rgba(245,245,244,0.18); --bg-success: #14532d; --text-success: #86efac; --fill-success: #22c55e; --bg-warning: #78350f; --text-warning: #fde68a; --fill-warning: #f59e0b; --bg-danger: #7f1d1d; --text-danger: #fecaca; --fill-danger: #ef4444; --bg-info: #1e3a5f; --text-info: #93c5fd; --fill-info: #3b82f6; --bg-neutral: #292524; --text-neutral: #a8a29e; --shadow-card: 0 1px 2px rgba(0,0,0,.35); --shadow-elevated: 0 8px 24px rgba(0,0,0,.45); --sidebar-bg: #1c1917; --sidebar-border: #292524; } /* Smooth transitions for theme switch */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* Base body uses tokens */ body { background: var(--surface-0); color: var(--text-primary); transition: background-color .2s, color .2s; } /* Focus ring uses accent */ *:focus-visible { outline: 2px solid var(--fill-accent); outline-offset: 2px; } /* Scrollbar styling (subtle) */ *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } *::-webkit-scrollbar-track { background: transparent; } /* Utility helpers that use tokens */ .card { background: var(--surface-2); border: 0.5px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); } .card-muted { background: var(--surface-1); border-radius: var(--radius); } .input { background: var(--surface-3); border: 1px solid var(--border-input); color: var(--text-primary); border-radius: var(--radius-sm); } .input::placeholder { color: var(--text-muted); } .badge-success { background: var(--bg-success); color: var(--text-success); } .badge-warning { background: var(--bg-warning); color: var(--text-warning); } .badge-danger { background: var(--bg-danger); color: var(--text-danger); } .badge-neutral { background: var(--bg-neutral); color: var(--text-neutral); }