/* ==========================================================================
   Optimus Nine — shared app theme
   Every module (Sales Console, pg-planner, Atom Ads, Glean) loads this file,
   then its own pgf-skin.css, which maps the module's own CSS variables and
   components onto these tokens. Change a token here and all four apps follow.

   Themes: html[data-theme] = "dark" (default) | "light" | "grey", chosen in
   Optimus Nine → Settings and stored in localStorage "pgf-theme" (per browser).
   Every rule below reads tokens only, so all three themes come for free.

   Rules
   - One accent for anything you click or select (dark: mint, light: blue,
     grey: graphite) — always var(--pgf-accent), never a literal.
   - Each module keeps an identity colour (--pgf-mod) for its mark, active nav
     item and section eyebrows only — never for buttons or data.
   - Status colours are shared: good = mint, warn = amber, bad = red, info = blue.
   - Archivo for words, JetBrains Mono for numbers, codes and small caps labels.
   ========================================================================== */

html.pgf {
  /* ground and surfaces (darkest → lightest) */
  --pgf-bg:        #08090B;   /* app canvas */
  --pgf-bg2:       #0B0D10;   /* side bars, top bars */
  --pgf-panel:     #0F1114;   /* cards, tables */
  --pgf-panel2:    #12151A;   /* raised: table heads, hover, totals */
  --pgf-input:     #0C0E11;   /* fields */
  --pgf-overlay:   rgba(5,6,7,.72);

  /* lines */
  --pgf-line:      #22262D;   /* card and field borders */
  --pgf-line2:     #1A1E24;   /* section dividers */
  --pgf-line3:     #171B20;   /* table row dividers */
  --pgf-line-hi:   #3A414C;   /* hover border */

  /* text */
  --pgf-text:      #ECEFF3;
  --pgf-soft:      #C7CED6;
  --pgf-sub:       #9AA6B2;   /* secondary */
  --pgf-faint:     #6E7683;   /* captions, placeholders (large text only) */
  --pgf-dim:       #5A626D;

  /* the one interaction accent */
  --pgf-accent:      #00E5A0;
  --pgf-accent-hi:   #5CF2C0;
  --pgf-accent-ink:  #04110B;  /* text on accent fills */
  --pgf-accent-bg:   #10241B;
  --pgf-accent-line: #1F3A2E;
  --pgf-accent-txt:  #7CE8C4;

  /* status */
  --pgf-good: #00E5A0; --pgf-good-bg: #0D1C16; --pgf-good-line: #1F3A2E; --pgf-good-txt: #7CE8C4;
  --pgf-warn: #FFB224; --pgf-warn-bg: #1E1809; --pgf-warn-line: #3A2F16; --pgf-warn-txt: #FFCF73;
  --pgf-bad:  #FF6B6B; --pgf-bad-bg:  #1A0F13; --pgf-bad-line:  #4A2530; --pgf-bad-txt:  #FFB3B3;
  --pgf-info: #4D9FFF; --pgf-info-bg: #0D1626; --pgf-info-line: #1E3252; --pgf-info-txt: #A9CCFF;

  /* module identity (overridden per app below) */
  --pgf-mod: #00E5A0;
  --pgf-mod-bg: #10241B;          /* tinted tile behind the module icon */

  /* module identity colours, so any app (and the shell) can name all four */
  --pgf-c-console: #00E5A0; --pgf-c-console-bg: #10241B;
  --pgf-c-mrp:     #4D9FFF; --pgf-c-mrp-bg:     #12203A;
  --pgf-c-atom:    #FFB224; --pgf-c-atom-bg:    #241D0E;
  --pgf-c-glean:   #A78BFA; --pgf-c-glean-bg:   #1E1735;

  /* depth, avatars, charts */
  --pgf-shadow: none;              /* cards are flat in the dark theme */
  --pgf-shadow-pop: 0 18px 50px rgba(0,0,0,.55);   /* menus, dialogs */
  --pgf-backdrop: rgba(0,0,0,.55);
  --pgf-avatar-bg: #1C2740; --pgf-avatar-txt: #9DBBFF;
  --pgf-chart-grid: #171B20;
  --pgf-sel: rgba(0,229,160,.28);

  /* data series — channels and categories, in this order */
  --pgf-s1: #00E5A0; --pgf-s2: #4D9FFF; --pgf-s3: #FFB224; --pgf-s4: #A78BFA;
  --pgf-s5: #FF6B6B; --pgf-s6: #5CF2C0; --pgf-s7: #F472B6; --pgf-s8: #8B95A3;

  /* type */
  --pgf-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pgf-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* shape */
  --pgf-r-sm: 6px;    /* chips, badges */
  --pgf-r-md: 10px;   /* buttons, fields */
  --pgf-r-lg: 14px;   /* cards */
  --pgf-r-xl: 16px;   /* large panels */

  color-scheme: dark;
}

/* ---- theme: Light (clean white cards on a cool grey canvas, blue accent) ---- */
html.pgf[data-theme="light"] {
  --pgf-bg: #F4F5F8; --pgf-bg2: #FFFFFF; --pgf-panel: #FFFFFF; --pgf-panel2: #F7F8FA; --pgf-input: #FFFFFF;
  --pgf-overlay: rgba(244,245,248,.8);
  --pgf-line: #E4E6EB; --pgf-line2: #ECEDF1; --pgf-line3: #F0F1F4; --pgf-line-hi: #C9CED8;
  --pgf-text: #111827; --pgf-soft: #374151; --pgf-sub: #5B6472; --pgf-faint: #8A93A1; --pgf-dim: #A3AAB5;
  --pgf-accent: #2D5EFB; --pgf-accent-hi: #1F4BDB; --pgf-accent-ink: #FFFFFF;
  --pgf-accent-bg: #EAF0FF; --pgf-accent-line: #C9D6FE; --pgf-accent-txt: #1F46C8;
  --pgf-good: #0E9F6E; --pgf-good-bg: #E8F7F0; --pgf-good-line: #BFE8D4; --pgf-good-txt: #047857;
  --pgf-warn: #D97706; --pgf-warn-bg: #FEF4E4; --pgf-warn-line: #F6D9A6; --pgf-warn-txt: #92400E;
  --pgf-bad:  #DC2626; --pgf-bad-bg:  #FDEDED; --pgf-bad-line:  #F5C7C7; --pgf-bad-txt:  #B91C1C;
  --pgf-info: #2D5EFB; --pgf-info-bg: #EAF0FF; --pgf-info-line: #C9D6FE; --pgf-info-txt: #1F46C8;
  --pgf-s1: #2D5EFB; --pgf-s2: #0E9F6E; --pgf-s3: #F59E0B; --pgf-s4: #7C5CE0;
  --pgf-s5: #EF4444; --pgf-s6: #14B8A6; --pgf-s7: #EC4899; --pgf-s8: #94A3B8;
  --pgf-c-console: #0E9F6E; --pgf-c-console-bg: #E8F7F0;
  --pgf-c-mrp:     #2D5EFB; --pgf-c-mrp-bg:     #EAF0FF;
  --pgf-c-atom:    #D97706; --pgf-c-atom-bg:    #FEF4E4;
  --pgf-c-glean:   #7C5CE0; --pgf-c-glean-bg:   #F1ECFE;
  --pgf-r-lg: 16px; --pgf-r-xl: 20px;
  --pgf-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.03);
  --pgf-shadow-pop: 0 16px 40px rgba(16,24,40,.14);
  --pgf-backdrop: rgba(17,24,39,.35);
  --pgf-avatar-bg: #EAF0FF; --pgf-avatar-txt: #1F46C8;
  --pgf-chart-grid: #EEF0F3;
  --pgf-sel: rgba(45,94,251,.18);
  color-scheme: light;
}

/* ---- theme: Light grey (soft grey canvas, graphite accent) ---------------- */
html.pgf[data-theme="grey"] {
  --pgf-bg: #E9EAED; --pgf-bg2: #F3F4F6; --pgf-panel: #F8F8F9; --pgf-panel2: #EEEFF1; --pgf-input: #FFFFFF;
  --pgf-overlay: rgba(233,234,237,.8);
  --pgf-line: #D9DBE0; --pgf-line2: #E0E2E6; --pgf-line3: #E6E7EA; --pgf-line-hi: #B9BDC5;
  --pgf-text: #15171B; --pgf-soft: #353A42; --pgf-sub: #585E68; --pgf-faint: #878D96; --pgf-dim: #A0A5AD;
  --pgf-accent: #1B1E24; --pgf-accent-hi: #33373F; --pgf-accent-ink: #FFFFFF;
  --pgf-accent-bg: #DEE0E4; --pgf-accent-line: #C4C8CF; --pgf-accent-txt: #15171B;
  --pgf-good: #16A34A; --pgf-good-bg: #E2F3E7; --pgf-good-line: #B9E2C5; --pgf-good-txt: #166534;
  --pgf-warn: #D97706; --pgf-warn-bg: #FBEEDB; --pgf-warn-line: #F0D2A2; --pgf-warn-txt: #8A3E0B;
  --pgf-bad:  #DC2626; --pgf-bad-bg:  #F9E4E4; --pgf-bad-line:  #EEC3C3; --pgf-bad-txt:  #A51C1C;
  --pgf-info: #3B6FF5; --pgf-info-bg: #E3EAFB; --pgf-info-line: #C3D2F5; --pgf-info-txt: #2447B8;
  --pgf-s1: #1B1E24; --pgf-s2: #3B6FF5; --pgf-s3: #84B51A; --pgf-s4: #F59E0B;
  --pgf-s5: #EF4444; --pgf-s6: #14B8A6; --pgf-s7: #A78BFA; --pgf-s8: #A0A5AD;
  --pgf-c-console: #16A34A; --pgf-c-console-bg: #DCEFE2;
  --pgf-c-mrp:     #3B6FF5; --pgf-c-mrp-bg:     #DDE5F8;
  --pgf-c-atom:    #C2660A; --pgf-c-atom-bg:    #F6E6CF;
  --pgf-c-glean:   #7C5CE0; --pgf-c-glean-bg:   #E7E1F8;
  --pgf-r-lg: 16px; --pgf-r-xl: 20px;
  --pgf-shadow: 0 1px 2px rgba(20,22,26,.05);
  --pgf-shadow-pop: 0 16px 40px rgba(20,22,26,.16);
  --pgf-backdrop: rgba(20,22,26,.32);
  --pgf-avatar-bg: #1B1E24; --pgf-avatar-txt: #FFFFFF;
  --pgf-chart-grid: #E3E4E8;
  --pgf-sel: rgba(27,30,36,.14);
  color-scheme: light;
}

/* module identity follows the theme */
html.pgf-console { --pgf-mod: var(--pgf-c-console); --pgf-mod-bg: var(--pgf-c-console-bg); }
html.pgf-mrp     { --pgf-mod: var(--pgf-c-mrp);     --pgf-mod-bg: var(--pgf-c-mrp-bg); }
html.pgf-atom    { --pgf-mod: var(--pgf-c-atom);    --pgf-mod-bg: var(--pgf-c-atom-bg); }
html.pgf-glean   { --pgf-mod: var(--pgf-c-glean);   --pgf-mod-bg: var(--pgf-c-glean-bg); }

/* ---- base ---------------------------------------------------------------- */
html.pgf body {
  background: var(--pgf-bg);
  color: var(--pgf-text);
  font-family: var(--pgf-font);
  -webkit-font-smoothing: antialiased;
}
html.pgf ::selection { background: var(--pgf-sel); color: var(--pgf-text); }
html.pgf :focus-visible { outline: 2px solid var(--pgf-accent); outline-offset: 2px; }

html.pgf ::-webkit-scrollbar { width: 10px; height: 10px; }
html.pgf ::-webkit-scrollbar-track { background: transparent; }
html.pgf ::-webkit-scrollbar-thumb { background: var(--pgf-line); border-radius: 8px; border: 2px solid var(--pgf-bg); }
html.pgf ::-webkit-scrollbar-thumb:hover { background: var(--pgf-line-hi); }
html.pgf * { scrollbar-color: var(--pgf-line) transparent; }

/* numbers line up everywhere */
html.pgf .pgf-num { font-family: var(--pgf-mono); font-variant-numeric: tabular-nums; }

/* things that only make sense when the app runs on its own site */
html.pgf-embedded .pgf-standalone-only { display: none !important; }