/**
 * theme.css – Custom branding overrides for the LAPS Self-Service Portal.
 *
 * Loaded after the default styles in index.html, so every variable
 * defined here overrides the built-in defaults.
 *
 * Brand palette source: client-provided swatches (Sep 2026)
 *   Primary:    #FFFFFF / #000000
 *   Neutral:    #F0EEED #A1A7AE #4D5056 #1A1B1C
 *   Secondary:  #B0A7FF #3366FF #49D7FF #2C8F92 #F7675E
 *
 * NOTE: Hover/active states and light-tint backgrounds below were
 * mathematically derived from #3366FF (not supplied directly) —
 * replace with exact brand values if your style guide specifies them.
 */

:root {
  /* ── Brand colors ─────────────────────────────────────────────────────── */
  --color-primary:        #3366FF;   /* Main action color (buttons, links)  */
  --color-primary-hover:  #2952CC;   /* Derived: ~20% darker                */
  --color-primary-active: #1F3F99;   /* Derived: ~35% darker                */
  --color-primary-light:  #E9E6FF;   /* Derived: light tint for backgrounds */
  --color-primary-text:   #FFFFFF;   /* Text on primary-colored surfaces    */

  /* ── Semantic colors ──────────────────────────────────────────────────── */
  --color-success:    #2C8F92;   /* Brand teal */
  --color-success-bg: #DFF3F3;   /* Derived tint */
  --color-warning:    #7A6C00;   /* Not in brand palette — placeholder, swap if you have one */
  --color-warning-bg: #FFF4CE;
  --color-danger:     #F7675E;   /* Brand coral */
  --color-danger-bg:  #FDE8E7;   /* Derived tint */

  /* ── Neutral palette ─────────────────────────────────────────────────── */
  --color-bg:         #F0EEED;   /* Page background                        */
  --color-surface:    #FFFFFF;   /* Card / panel background                */
  --color-border:     rgba(161, 167, 174, 0.35);  /* A1A7AE, softened      */
  --color-text:       #1A1B1C;   /* Primary body text                      */
  --color-text-muted: #4D5056;   /* Secondary / hint text                  */
  --color-overlay:    rgba(26, 27, 28, 0.45);   /* Modal backdrop          */

  /* ── Typography (kept default) ──────────────────────────────────────── */
  --font:          'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:     'Cascadia Code', 'Consolas', monospace;
  --font-size:     16px;
  --font-size-sm:  14px;
  --font-size-xs:  12px;
  --font-size-lg:  20px;
  --font-size-xl:  28px;

  /* ── Shape & shadow ──────────────────────────────────────────────────── */
  --radius:    8px;
  --radius-lg: 12px;
  --shadow:    0 2px 8px rgba(26, 27, 28, .10);
  --shadow-lg: 0 8px 32px rgba(26, 27, 28, .16);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --topbar-h:  56px;
  --content-w: 800px;

  /* ── Logo (light mode) ──────────────────────────────────────────────── */
  --logo-url:    url('https://upload.wikimedia.org/wikipedia/commons/b/b1/Cc.logo.white.svg');
  --logo-width:  140px;
  --logo-height: 36px;
}

/* ── Dark mode ─────────────────────────────────────────────────────────
   html[data-theme="dark"] has higher specificity than the :root block
   above, so these values win once the user toggles dark mode — including
   swapping in the white logo automatically.
*/
html[data-theme="dark"] {
  --color-bg:             #1A1B1C;
  --color-surface:        #26272A;   /* Derived: subtle step up from bg */
  --color-border:         rgba(161, 167, 174, 0.25);
  --color-text:           #F0EEED;
  --color-text-muted:     #A1A7AE;
  --color-overlay:        rgba(0, 0, 0, 0.65);

  --color-primary-light:  rgba(51, 102, 255, 0.18);
  --color-success-bg:     rgba(44, 143, 146, 0.18);
  --color-danger-bg:      rgba(247, 103, 94, 0.18);
  --color-warning-bg:     rgba(122, 108, 0, 0.18);

  --shadow:    0 2px 8px rgba(0, 0, 0, .30);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .40);

  /* Logo (dark mode) */
  --logo-url: url('https://sawpcontent.blob.core.windows.net/public/Swo-Logo-White.svg');
}