/* Potcake design tokens: the ONLY place colors are defined for the web app.
   Light is the default for everyone; [data-theme="dark"] is set on <html> by the header toggle.
   The PDF reports have their own styles and never use this file. */

:root, [data-theme="light"] {
  --bg:          #FAFAF7;  /* page background (warm white) */
  --surface:     #FFFFFF;  /* cards, header */
  --soft:        #F1F1EB;  /* hover rows, chips, subtle fills */
  --ink:         #0E1116;  /* main text */
  --muted:       #5C6370;  /* secondary text, labels */
  --line:        #E4E4DE;  /* borders, dividers */
  --line-strong: #CBCBC3;  /* form fields, table header rule */
  --primary:     #2E5BFF;  /* royal blue: main buttons */
  --primary-hover: #1C43D6;  /* deeper blue, so hover reads clearly */
  --primary-ink: #FFFFFF;  /* text on primary buttons */
  --link:        #2449D8;  /* links, numbered steps */
  --hi:          #FFD23F;  /* yellow highlighter (never text or fills on white) */
  --hi-ink:      #0E1116;  /* text on yellow */
  --you:         #2E5BFF;  /* the client's own bar in charts */
  --ring:        #2E5BFF;  /* score ring, progress bars */
  --bar:         #C9CCD3;  /* competitor bars */
  --track:       #ECECE6;  /* empty part of bars and rings */
  --menu-shadow: 0 18px 40px rgba(0, 0, 0, .14);

  /* status (messages, badges) */
  --success:      #1E6B47;  --success-soft: #E3F1E9;
  --warning:      #9A4F12;  --warning-soft: #FBEEDC;
  --error:        #B3261E;  --error-soft:   #F8E4E2;

  /* client stage badges on the dashboard (Andrew's colors) */
  --stage-new:      #1E7A46;
  --stage-audited:  #1B3A8C;
  --stage-tracking: #C2410C;
  --stage-prospect: #7C3AED;
  --stage-ink:      #FFFFFF;
  --stage-closed:   #FACC15;
  --stage-closed-ink: #1F2937;

  /* a job that's running: black button, white text, deep green "live" dot */
  --running:     #0E1116;
  --running-hov: #2A2E35;
  --running-ink: #FFFFFF;
  --running-line: #0E1116;
  --live:        #15803D;
  --live-ring:   #FFFFFF;

  /* job logs */
  --log-bg:  #0E1116;
  --log-ink: #E9E7E1;

  /* previews of things that are always white on paper or in an inbox (email drafts) */
  --paper: #FFFFFF;
  --paper-ink: #0E1116;

  --logo-light: block;  /* which logo file shows */
  --logo-dark:  none;
  --logo-tile:  #FFFFFF;  /* white tile behind client logos, in both themes (logos are made for white) */
  --royal:      #2E5BFF;  /* royal blue that stays blue in dark mode (popular-plan button hover) */
}

[data-theme="dark"] {
  --bg:          #0B0B0C;
  --surface:     #141416;
  --soft:        #1E1E21;
  --ink:         #F5F5F5;
  --muted:       #A3A3A3;
  --line:        rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .22);
  --primary:     #FFD23F;  /* in dark mode, yellow is the button color */
  --primary-hover: #FFDD6B;
  --primary-ink: #0B0B0C;
  --link:        #FFD23F;
  --hi:          #FFD23F;
  --hi-ink:      #0B0B0C;
  --you:         #FFD23F;
  --ring:        #6B8CFF;
  --bar:         #4A4A50;
  --track:       #26262A;
  --menu-shadow: 0 18px 40px rgba(0, 0, 0, .5);

  --success:      #6FD3A0;  --success-soft: rgba(111, 211, 160, .14);
  --warning:      #F5B26B;  --warning-soft: rgba(245, 178, 107, .14);
  --error:        #FF8A80;  --error-soft:   rgba(255, 138, 128, .14);

  --stage-new:      #2E9E5E;
  --stage-audited:  #4F74E0;
  --stage-tracking: #E2672B;
  --stage-prospect: #9A6BF5;
  --stage-ink:      #0B0B0C;
  --stage-closed:   #FACC15;
  --stage-closed-ink: #1F2937;

  --running:     #000000;
  --running-hov: #1E1E21;
  --running-ink: #FFFFFF;
  --running-line: rgba(255, 255, 255, .28);   /* black on a near-black page needs an edge */
  --live:        #15803D;
  --live-ring:   #FFFFFF;

  --log-bg:  #000000;
  --log-ink: #E9E7E1;

  --paper: #FFFFFF;
  --paper-ink: #0E1116;

  --logo-light: none;
  --logo-dark:  block;
}

/* Older names still used inline in some templates; they point at the tokens above. */
:root {
  --navy: var(--ink); --navy-2: var(--ink); --page: var(--bg); --raised: var(--surface); --warm: var(--soft);
  --line-2: var(--line-strong); --brass: var(--link); --brass-text: var(--muted); --on-inverse-2: var(--muted);
}