/* ════════════════════════════════════════════════════════════════════════════ */
/* ── tokens.css — Design tokens & theme variables (Sulata Note v1.2.0) ─────── */
/* ════════════════════════════════════════════════════════════════════════════ */
/* Centralized design system. All colors, spacing, radii, shadows, typography,  */
/* z-index layering, and note-color accents live here. Light theme is the       */
/* default (:root); dark theme overrides are scoped under .night-mode. Nothing  */
/* in base/layout/components/modals should hardcode a raw color — everything     */
/* references a token so themes stay consistent and maintainable.               */
/* ════════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Brand accent (mustard family, refined) ─────────────────────────────── */
	--mustard:        #F5C842;
	--mustard-dark:   #E0B230;
	--mustard-light:  #FDF3C0;

	/* ── Note color palette (the 7 selectable note colors — unchanged values) ─ */
	--note-mustard:   #F5C842;
	--note-blush:     #F5A7A7;
	--note-sage:      #A8D5B5;
	--note-sky:       #A7C7E7;
	--note-lavender:  #C3B1E1;
	--note-peach:     #FFCBA4;
	--note-white:     #F5F5F0;

	/* ── Semantic surfaces (light theme) — calm, premium neutrals ───────────── */
	--bg:              #FBFAF6;   /* app canvas background */
	--sidebar-bg:      #F5F3EC;   /* rail + section panel */
	--surface:         #FFFFFF;   /* cards, modals, toolbars */
	--surface-elevated:#FFFFFF;   /* popovers, dropdowns, elevated menus */
	--editor-bg:       #FFFFFF;   /* editor canvas */

	/* ── Text hierarchy ─────────────────────────────────────────────────────── */
	--text-primary:    #23221E;
	--text-secondary:  #6B675E;
	--text-muted:      #9A958A;

	/* ── Borders & lines ────────────────────────────────────────────────────── */
	--border:          #EAE6DA;
	--border-strong:   #DCD6C6;

	/* ── Accent (interactive) ───────────────────────────────────────────────── */
	--accent:          #E0B230;
	--accent-hover:    #C89A1E;
	--accent-soft:     #FDF3C0;   /* soft accent background (hover/active tint) */
	--accent-contrast: #2C2C2C;   /* text/icon color that sits on accent */

	/* ── Status colors ──────────────────────────────────────────────────────── */
	--danger:          #E57373;
	--danger-dark:     #C62828;
	--danger-soft:     #FDECEA;
	--success:         #4CAF7D;
	--success-dark:    #2E7D32;
	--success-soft:    #E8F5E9;
	--warning:         #E0A030;
	--warning-soft:    #FFF4DE;

	/* ── Pro / premium ──────────────────────────────────────────────────────── */
	--pro-gold:        #B8860B;

	/* ── Overlays & effects ─────────────────────────────────────────────────── */
	--modal-backdrop:  rgba(30, 28, 22, 0.42);
	--focus-ring:      #C89A1E;
	--scrollbar-thumb: #D9D3C4;

	/* ── Radii ──────────────────────────────────────────────────────────────── */
	--radius-xs:       6px;
	--radius-sm:       9px;
	--radius-md:       14px;
	--radius-lg:       20px;
	--radius-xl:       26px;
	--radius-pill:     999px;

	/* ── Elevation / shadows (soft, premium) ────────────────────────────────── */
	--shadow-xs:  0 1px 2px rgba(30, 28, 22, 0.05);
	--shadow-sm:  0 2px 8px rgba(30, 28, 22, 0.07);
	--shadow-md:  0 8px 28px rgba(30, 28, 22, 0.12);
	--shadow-lg:  0 18px 50px rgba(30, 28, 22, 0.18);

	/* ── Transitions ────────────────────────────────────────────────────────── */
	--transition:      all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);

	/* ── Typography ─────────────────────────────────────────────────────────── */
	--font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
	        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-editor: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
	        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', 'Courier New', monospace;

	/* ── Layout dimensions ──────────────────────────────────────────────────── */
	--rail-width:          72px;
	--rail-expanded-width: 72px;
	--panel-width:         296px;
	--nav-height:          56px;

	/* ── Mobile spacing helpers ─────────────────────────────────────────────── */
	--mobile-bottom-clearance:  12px;
	--mobile-action-bar-height: 68px;

	/* ── Standardized floating UI stacking hierarchy ────────────────────────── */
	--z-panel:    80;
	--z-rail:     95;
	--z-floating: 500;
	--z-modal:    1000;
	--z-toast:    2000;
}

/* ════════════════════════════════════════════════════════════════════════════ */
/* ── Dark theme — carefully tuned, not merely inverted ─────────────────────── */
/* ════════════════════════════════════════════════════════════════════════════ */
html.night-mode,
body.night-mode {
	--bg:              #17161A;
	--sidebar-bg:      #1C1B20;
	--surface:         #222127;
	--surface-elevated:#282730;
	--editor-bg:       #1E1D22;

	--text-primary:    #ECE7DA;
	--text-secondary:  #A8A296;
	--text-muted:      #726D63;

	--border:          #33323B;
	--border-strong:   #3E3D48;

	--accent:          #F5C842;
	--accent-hover:    #FFD75E;
	--accent-soft:     #37300F;
	--accent-contrast: #1A1A1A;

	--danger:          #EF6C6C;
	--danger-dark:     #F08585;
	--danger-soft:     #3A2222;
	--success:         #6DCB8B;
	--success-dark:    #81C784;
	--success-soft:    #1F2E24;
	--warning:         #E8B44C;
	--warning-soft:    #37300F;

	--mustard-light:   #37300F;

	--modal-backdrop:  rgba(0, 0, 0, 0.62);
	--focus-ring:      #F5C842;
	--scrollbar-thumb: #3E3D48;

	--shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-sm:  0 2px 10px rgba(0, 0, 0, 0.45);
	--shadow-md:  0 8px 30px rgba(0, 0, 0, 0.55);
	--shadow-lg:  0 18px 54px rgba(0, 0, 0, 0.65);

	--note-white:      #E9E6DC;
}