/* Shared theme variables -- single source of truth for color across every
   page (dashboard, Profile Settings, onboarding, login/signup/reset).
   This file currently defines the dark palette only (values extracted
   1:1 from the pre-existing hardcoded colors, not redesigned -- every
   value here matches what was already hardcoded somewhere in the app).
   A light [data-theme="light"] variant is added in a follow-up pass. */

:root {
  /* Layout */
  --sw: 220px;

  /* Backgrounds */
  --bg-app:    #090E18;
  --bg-side:   #070C14;
  --bg-card:   #0F1928;
  --bg-card2:  #0F1624;
  --bg-card3:  #0B1A2B;
  --bg-hover:  #2A3F58;
  --bg-page:   #0C1420;
  --bg-table:  #182436;

  /* Borders */
  --border:         #1A2840;
  --border-2:       #2A3F58;
  --border-3:       #3A5070;
  --border-card:    #1C2D42;
  --border-muted:   #2A3A50;
  --border-strong:  #213D5C;
  --border-success: #2A5040;
  --border-blue-light: #6DB3FF;

  /* Text */
  --text-1:            #E8E0D0;
  --text-2:            #5A7090;
  --text-3:            #3A5070;
  --text-3-alt:        #3A5060;
  --text-4:            #A0B8A8;
  --text-muted-cream:  #C8BFA8;
  --text-on-color:     #FFFFFF;
  --text-danger:       #C47070;
  --text-danger-alt:   #C97A6E;
  --text-success:      #4A8A5A;
  --text-success-bright: #4ADE80;
  --text-success-muted:  #6AAB8A;

  /* Accent (brand burgundy) */
  --accent:        #7B2D3E;
  --accent-bg:     #2A0F14;
  --accent-bdr:    #4A1820;
  --accent-hover:  #6A2535;
  --accent-active: #5C1F2E;
  --accent-light:  #9B3D4E;
  --accent-cyan:   #5FE6FF;

  /* Semantic status colors */
  --green:      #3A6B4A;
  --green-bg:   #0F1F14;
  --green-bdr:  #2A4A32;

  --red:      #8B3A2A;
  --red-bg:   #1F0F0A;
  --red-bdr:  #4A2018;

  --blue:      #4D9FFF;
  --blue-bg:   rgba(var(--blue-rgb), .09);
  --blue-bdr:  rgba(var(--blue-rgb), .25);

  --yellow:      #C9A96E;
  --yellow-bg:   #1C1500;
  --yellow-bdr:  #4A3800;

  --info-blue: #5A9BD5;

  /* RGB triplets for rgba() composition -- one base color, any alpha,
     without duplicating a variable per opacity level. */
  --black-rgb:      0,0,0;
  --white-rgb:      255,255,255;
  --accent-rgb:     123,45,62;
  --red-rgb:        139,58,42;
  --green-rgb:      58,107,74;
  --green-dark-rgb: 30,60,40;
  --blue-rgb:       77,159,255;
  --blue-gray-rgb:  77,112,153;
  --yellow-rgb:     201,169,110;
  --info-blue-rgb:  90,155,213;
  --danger-rgb:     196,112,112;
  --bg-app-rgb:     9,14,24;
  --bg-overlay-rgb: 13,19,33;
  --border-rgb:     26,47,71;

  /* Chart-specific (Chart.js config + hand-drawn SVG charts) */
  --chart-grid:          #1A2F47;
  --chart-line-border:   #1E2D45;
  --chart-axis-label:    #4D7099;
  --chart-tooltip-title: #7A8A9A;
  --chart-color-1: #378ADD;
  --chart-color-3: #1D9E75;
  --chart-color-5: #7B5EA7;

  /* One-off button/control states */
  --btn-accent-text-dark: #000000;
  --btn-accent-text-2:    #0A0E1A;
  --btn-disabled-bg:      #2A1C22;
  --btn-disabled-text:    #5A4050;
  --btn-send-hover:       #3A8FEF;
  --tooltip-hover:        #6A8FB5;
}

/* Light theme -- activated via <html data-theme="light">. Not a mechanical
   inversion: text/status colors are individually darkened for real
   contrast on light backgrounds (checked against WCAG AA, not just eyeballed),
   while decorative/background tones keep the same warm "ledger paper" +
   burgundy identity as dark mode. RGB triplets are re-picked per role, not
   just inverted -- e.g. --white-rgb is a hover-darken tint everywhere it's
   used, so on a light background it has to resolve to a dark triplet to
   still read as "hover," even though the variable name says white. */
:root[data-theme="light"] {
  /* Backgrounds */
  --bg-app:    #FAF7F1;
  --bg-side:   #F3EEE3;
  --bg-card:   #FFFFFF;
  --bg-card2:  #FDFBF7;
  --bg-card3:  #F6F2E9;
  --bg-hover:  #EDE6D8;
  --bg-page:   #F5F1E8;
  --bg-table:  #F2EDE1;

  /* Borders (cool blue-gray, matching dark mode's border hue family) */
  --border:         #E5E9EF;
  --border-2:       #D5DBE3;
  --border-3:       #B0BAC7;
  --border-card:    #E8E2D3;
  --border-muted:   #DFD8C6;
  --border-strong:  #B0BAC7;
  --border-success: #BFE0CC;
  --border-blue-light: #4A90E2;

  /* Text */
  --text-1:            #211B12;
  --text-2:            #5C6B78;
  --text-3:            #6B7483;
  --text-3-alt:        #647281;
  --text-4:            #587164;
  --text-muted-cream:  #6B5A3E;
  --text-on-color:     #FFFFFF;
  --text-danger:       #B23B3B;
  --text-danger-alt:   #A6432E;
  --text-success:      #2F6B41;
  --text-success-bright: #197A42;
  --text-success-muted:  #49775F;

  /* Accent (brand burgundy -- unchanged, already has strong contrast on light bg) */
  --accent:        #7B2D3E;
  --accent-bg:     #F7E8EA;
  --accent-bdr:    #E3C3C8;
  --accent-hover:  #6A2535;
  --accent-active: #5C1F2E;
  --accent-light:  #8B3548;
  --accent-cyan:   #0B7A8C;

  /* Semantic status colors */
  --green:      #2F5A3D;
  --green-bg:   #E9F5EC;
  --green-bdr:  #BEE0C9;

  --red:      #7A3020;
  --red-bg:   #FBEAE6;
  --red-bdr:  #E8C7BE;

  --blue:      #1B68BF;
  --blue-bg:   rgba(var(--blue-rgb), .09);
  --blue-bdr:  rgba(var(--blue-rgb), .25);

  --yellow:      #7F6331;
  --yellow-bg:   #FBF3DF;
  --yellow-bdr:  #E8D6A8;

  --info-blue: #336C9E;

  /* RGB triplets -- re-picked per role, see file header note */
  --black-rgb:      0,0,0;
  --white-rgb:      0,0,0;
  --accent-rgb:     123,45,62;
  --red-rgb:        122,48,32;
  --green-rgb:      47,90,61;
  --green-dark-rgb: 210,235,218;
  --blue-rgb:       27,104,191;
  --blue-gray-rgb:  92,107,120;
  --yellow-rgb:     127,99,49;
  --info-blue-rgb:  51,108,158;
  --danger-rgb:     178,59,59;
  --bg-app-rgb:     250,247,241;
  --bg-overlay-rgb: 255,255,255;
  --border-rgb:     180,190,202;

  /* Chart-specific */
  --chart-grid:          #E0DACB;
  --chart-line-border:   #D8D2C5;
  --chart-axis-label:    #4A6B8C;
  --chart-tooltip-title: #646F7D;
  --chart-color-1: #2E7ECC;
  --chart-color-3: #178F68;
  --chart-color-5: #6B4F91;

  /* One-off button/control states */
  --btn-accent-text-dark: #000000;
  --btn-accent-text-2:    #0A0E1A;
  --btn-disabled-bg:      #ECE3E5;
  --btn-disabled-text:    #AC9AA0;
  --btn-send-hover:       #2E7DDA;
  --tooltip-hover:        #5C86AC;
}