/* @name Dark (Default) */
/*
   Dark theme — original CashJars palette. Loaded by index.php after main.css
   so these variables override any defaults. New themes drop in this folder
   alongside this file and appear in the Settings → Theme dropdown automatically.

   Every primary color used by main.css is defined here. To build a new theme,
   copy this file and recolor the values — main.css won't need any changes.
   Each var has an inline comment so you know what it controls before tweaking.
*/

:root {

	/* === Primary palette ===
	   Backgrounds (darkest to lightest), borders (soft → medium),
	   text (high → low contrast), and accent hues. */
	--bg-app:       #0a0c10;     /* Page body — the darkest layer behind everything */
	--bg-panel:     #181b21;     /* Slideout panels — one step up from body */
	--bg-panel-2:   #1a1e25;     /* Main content panels (Budget / Categories / Jars) */
	--bg-input:     #1e222a;     /* Input fields, dropdowns, progress-bar track */
	--bg-row-hover: #2a3038;     /* Row :hover, button :hover, header-btn :hover bg */

	--border-soft:   #232831;    /* Faint dividers between sections within a panel */
	--border-medium: #2c333e;    /* Standard borders on inputs, cards, and buttons */

	--text-primary:    #e8ebf0;  /* Main body text — highest contrast */
	--text-secondary:  #9ba3b1;  /* Muted labels, secondary info, header-btn icons */
	--text-tertiary:   #6c7280;  /* Even more muted — captions, hints, spinner */
	--text-quaternary: #4a5160;  /* Disabled text and "barely visible" placeholders */
	--text-faint:      rgba(255, 255, 255, 0.25); /* ::placeholder text on dark inputs */
	--text-on-accent:  #ffffff;  /* Text drawn on top of accent-coloured buttons / pills */

	--accent-blue:   #4f8cff;    /* Primary brand accent — buttons, focus rings, links */
	--accent-green:  #4ade80;    /* Success / positive amounts / income */
	--accent-red:    #f87171;    /* Error / negative amounts / delete */
	--accent-amber:  #fbbf24;    /* Warning / caution highlights */
	--accent-purple: #c084fc;    /* Tag / split-row dot accent */
	--accent-teal:   #2dd4bf;    /* Receipt / attachment dot accent */

	/* === Backwards-compat aliases ===
	   Existing CSS still references the old names — these forward to the
	   new palette so we don't have to rewrite hundreds of color references. */
	--bg-body:   var(--bg-app);     /* Alias of --bg-app (legacy name still in CSS) */
	--bg-main:   var(--bg-panel-2); /* Alias of --bg-panel-2 — slideout panel surface */
	--bg-darker: var(--bg-panel);   /* Alias of --bg-panel — slideout-header / sticky bars */
	--bg-hover:  var(--bg-row-hover); /* Alias of --bg-row-hover — generic hover bg */

	--border:       var(--border-medium); /* Default border colour */
	--border-hover: var(--border-medium); /* Border on hover (same here, themes can split) */
	--border-focus: var(--accent-blue);   /* Border when input/button is focused or selected */

	--text-muted: var(--text-secondary); /* Alias — muted body text */
	--text-dark:  var(--text-tertiary);  /* Alias — even more muted, near-disabled */

	--accent-blue-hover: #3a6fd6; /* Darker blue used on :hover of accent-blue buttons */

	/* Primary action button — decoupled from --accent-blue so the button
	   colour can be tuned without dragging focus rings / links / hover
	   highlights along. */
	--btn-primary:       #2f2fff;
	--btn-primary-hover: #4848ff;

	/* === Status colors ===
	   Each status has: solid colour, hover variant, text variant (used on
	   neutral backgrounds), and translucent backgrounds at two strengths. */
	--success:           var(--accent-green);          /* Solid success colour (border, fill) */
	--success-hover:     var(--accent-green);          /* Success :hover (themes can darken) */
	--success-text:      var(--accent-green);          /* Text-on-neutral version of success */
	--success-bg:        rgba(74, 222, 128, 0.07);     /* Faint green tint — info-box-success bg */
	--success-bg-strong: rgba(74, 222, 128, 0.20);     /* Stronger green tint — borders, hover */

	--danger:            var(--accent-red);            /* Solid danger colour */
	--danger-hover:      var(--accent-red);            /* Danger :hover */
	--danger-text:       var(--accent-red);            /* Text-on-neutral version of danger */
	--danger-bg:         rgba(248, 113, 113, 0.10);    /* Faint red tint — info-box-error bg */
	--danger-bg-strong:  rgba(248, 113, 113, 0.20);    /* Stronger red tint — duplicate badge */

	--warning:           var(--accent-amber);          /* Solid warning colour */
	--warning-hover:     var(--accent-amber);          /* Warning :hover */
	--warning-text:      var(--accent-amber);          /* Text-on-neutral version of warning */
	--warning-bg:        rgba(251, 191, 36, 0.12);     /* Faint amber tint */

	--info-bg:   rgba(79, 140, 255, 0.12);             /* Faint blue tint — info-box bg */
	--info-text: var(--accent-blue);                   /* Text-on-neutral version of info */

	--selected-bg: rgba(79, 140, 255, 0.15);           /* Selected-row / selected-card bg */

	/* === Shadows / overlays === */
	--shadow:       rgba(0, 0, 0, 0.5);     /* Drop shadow on slideouts, action bar, dialog */
	--focus-shadow: rgba(79, 140, 255, 0.18); /* Glow ring around merge-chip selected state */
	--overlay-bg:   rgba(0, 0, 0, 0.75);    /* Full-viewport overlay behind slideouts */
	--loading-bg:   rgba(45, 45, 45, 0.95); /* Spinner overlay over a panel during AJAX */

	/* === Surface tints (translucent overlays for cards / pills / inputs) ===
	   Subtle white-on-dark layers that read as elevation without using a
	   solid background. In light themes these flip to black-on-light. */
	--surface-tint-1:    rgba(255, 255, 255, 0.025); /* Lightest tint — jar-card bg, search-field bg */
	--surface-tint-2:    rgba(255, 255, 255, 0.05);  /* Slightly stronger — jar-card :hover bg */
	--surface-edge:      rgba(255, 255, 255, 0.06);  /* Faint border on tinted surfaces */
	--surface-edge-soft: rgba(255, 255, 255, 0.04);  /* Even fainter border (jar-card border) */

	/* === Toggle switch === */
	--toggle-thumb:           #ffffff;     /* The little circle (sliding knob) */
	--toggle-track-off:       #ccc;        /* Track colour when toggle is OFF */
	--toggle-track-disabled:  #e9ecef;     /* Track colour when toggle is disabled */

	/* === Info-box strong-text accents ===
	   <strong> inside an info-box uses a slightly brighter / lighter shade
	   than the box's body text so emphasis reads. */
	--info-strong:    #d0e8f7;             /* <strong> inside .info-box */
	--success-strong: #d0f7e6;             /* <strong> inside .info-box-success */
	--danger-strong:  #ffd0d0;             /* <strong> inside .info-box-error */

	/* === Recurring-template warning banner (yellow) ===
	   Standalone palette so the warning banner can be adjusted independently
	   of the global --warning- tokens. */
	--warning-banner-bg:     #4a3a1a;      /* Dark-yellow box background */
	--warning-banner-edge:   #f7c948;      /* Bright yellow left border */
	--warning-banner-text:   #f7e3a3;      /* Body text colour */
	--warning-banner-strong: #fff3cf;      /* <strong> + "break template" link colour */

	/* === Toasts ===
	   Each status has a card bg + accent stripe colour + icon-bubble bg.
	   Toast text stays high-contrast on the dark card. */
	--toast-text:            #ffffff;                  /* Toast body text */
	--toast-close:           rgba(255, 255, 255, 0.3); /* X close button (resting) */
	--toast-close-hover:     rgba(255, 255, 255, 0.7); /* X close button (:hover) */
	--toast-bg-success:      #1e3a28;                  /* Success toast card bg */
	--toast-bg-error:        #3a1e1e;                  /* Error toast card bg */
	--toast-bg-warning:      #3a3018;                  /* Warning toast card bg */
	--toast-bg-info:         #1e2e3a;                  /* Info toast card bg */
	--toast-success:         #4caf50;                  /* Success stripe + progress bar */
	--toast-error:           #f44336;                  /* Error stripe + progress bar */
	--toast-warning:         #ff9800;                  /* Warning stripe + progress bar */
	--toast-info:            #2196f3;                  /* Info stripe + progress bar */
	--toast-icon-bg-success: rgba(76, 175, 80, 0.2);   /* Icon bubble bg (success) */
	--toast-icon-bg-error:   rgba(244, 67, 54, 0.2);   /* Icon bubble bg (error) */
	--toast-icon-bg-warning: rgba(255, 152, 0, 0.2);   /* Icon bubble bg (warning) */
	--toast-icon-bg-info:    rgba(33, 150, 243, 0.2);  /* Icon bubble bg (info) */

	/* === Dialog (Yes/No confirm modal) ===
	   Standalone palette — dialogs have a consistent appearance regardless
	   of which page invoked them, so they don't reuse the panel tokens. */
	--dialog-bg:              #1e2530;                  /* Dialog card bg */
	--dialog-text:            #ffffff;                  /* Dialog title text */
	--dialog-overlay:         rgba(0, 0, 0, 0.6);       /* Page-dimming backdrop */
	--dialog-border:          rgba(255, 255, 255, 0.08); /* Header underline divider */
	--dialog-body-text:       rgba(255, 255, 255, 0.85); /* Body / message text */
	--dialog-close:           rgba(255, 255, 255, 0.4); /* X close button (resting) */
	--dialog-close-hover:     rgba(255, 255, 255, 0.85); /* X close button (:hover) */
	--dialog-footer-bg:       rgba(0, 0, 0, 0.2);       /* Footer strip behind buttons */
	--dialog-btn-no-bg:       rgba(255, 255, 255, 0.08); /* Cancel/No button bg */
	--dialog-btn-no-bg-hover: rgba(255, 255, 255, 0.15); /* Cancel/No button :hover */
	--dialog-btn-no-text:     rgba(255, 255, 255, 0.85); /* Cancel/No button text */

	/* === Sidebar (desktop nav rail) ===
	   Each theme owns its sidebar palette. Adjust these to recolour the rail
	   without touching any structural CSS in main.css. */
	--sidebar-bg:                    var(--bg-panel);              /* Sidebar surface — one step up from body */
	--sidebar-border:                var(--border-soft);           /* Right-edge separator */
	--sidebar-label:                 var(--text-tertiary);         /* Group labels + resting icons */
	--sidebar-item:                  var(--text-secondary);        /* Default nav-item text */
	--sidebar-item-hover-bg:         var(--bg-row-hover);          /* Hover background */
	--sidebar-item-hover-text:       var(--text-primary);          /* Hover text + icon */
	--sidebar-item-active-bg:        rgba(79, 140, 255, 0.12);     /* Active blue tint */
	--sidebar-item-active-text:      var(--text-primary);          /* Active text */
	--sidebar-item-active-icon:      var(--accent-blue);           /* Active icon picks up the blue */
	--sidebar-brand-gradient-from:   var(--accent-blue);           /* Brand mark top-left */
	--sidebar-brand-gradient-to:     var(--accent-purple);         /* Brand mark bottom-right */
}