/* ============================================================
   Ikeja Electric: Design Tokens
   Drop this into any app (JSF/PrimeFaces, plain web, etc.) and
   style everything against these CSS variables. Never hard-code
   hex values in a screen: reference a token so light/dark and
   the brand/module themes keep working.

   Theme switches (set on <html> or <body>):
     data-theme="light" | "dark"      (default: light)
     data-brand="amber" | "red" | "dual"   (default: amber)
   Module accents (--ca, --soe) are always available.
   ============================================================ */

:root,
[data-theme="light"] {
  --canvas:#F6F5F2; --surface:#FFFFFF; --surface-2:#FBFAF8; --surface-3:#F1EFEB;
  --border:#E7E3DD; --border-strong:#D6D1C8;
  --text:#1B1A17; --text-2:#57534C; --text-3:#8B857B;
  --primary:#E58E0A; --primary-hover:#C8790A; --primary-press:#A66608; --primary-soft:#FDF0D8; --on-primary:#231800;
  --accent:#F1A20B; --accent-soft:#FDF1DC;
  --ca:#5F8A46; --ca-hover:#4E7439; --ca-soft:#EAF1E3; --on-ca:#FFFFFF;
  --soe:#48598B; --soe-soft:#E7EAF4;
  --success:#128A5B; --success-soft:#E2F3EB;
  --warning:#B7791F; --warning-soft:#F8EED6;
  --danger:#DB362C;  --danger-soft:#FCE9E7;
  --info:#2C68D9;    --info-soft:#E7EEFC;
  --ring:rgba(229,142,10,.30);
  /* Ink for text/glyphs sitting ON a solid accent fill (--success, --danger, a stage
     colour...). In light themes those fills are dark, so white reads; in dark themes
     they are light pastels, where white does not. Anything that hard-codes #fff on a
     token-coloured chip will fail the dark theme - use this instead.
     --on-primary/--on-ca already do this job for those two specific fills. */
  --on-solid:#FFFFFF;
  /* Amber and gold are LIGHT even in the light theme, so --on-solid's white gives only
     2.56:1 on --accent - a real failure, not a dark-mode one. These fills take a dark
     ink in both themes. (#231800 is the same ink --on-primary uses when the amber brand
     is the primary, so the two agree.) */
  --on-accent:#231800;
  --shadow-xs:0 1px 2px rgba(28,26,23,.06);
  --shadow-sm:0 1px 3px rgba(28,26,23,.07),0 1px 2px rgba(28,26,23,.04);
  --shadow-md:0 6px 16px rgba(28,26,23,.08),0 2px 5px rgba(28,26,23,.05);
  --shadow-lg:0 16px 36px rgba(28,26,23,.12),0 5px 12px rgba(28,26,23,.06);
  --shadow-xl:0 28px 60px rgba(28,26,23,.16);

  /* Sidebar: an near-black charcoal that stays constant in both themes, so the
     navigation reads as a fixed frame around a canvas that can switch. */
  --sidebar:#1A1512; --sidebar-fg:#FFFFFF; --sidebar-muted:rgba(255,255,255,.50);
  --sidebar-item:rgba(255,255,255,.72); --sidebar-line:rgba(255,255,255,.08);

  /* Scale */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-2xl:28px; --radius-full:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --font-sans:'Geist',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

[data-theme="dark"] {
  --canvas:#131210; --surface:#1D1B18; --surface-2:#24211D; --surface-3:#2C2822;
  --border:#332F29; --border-strong:#45403A;
  --text:#F5F3EF; --text-2:#B7B1A7; --text-3:#847E74;
  --primary:#F6B42E; --primary-hover:#F8C24E; --primary-press:#E09E1C; --primary-soft:#3A2C10; --on-primary:#1A1200;
  --accent:#F6B42E; --accent-soft:#3A2C10;
  --ca:#7BB05F; --ca-hover:#8FC072; --ca-soft:#1E2C16; --on-ca:#0E1609;
  --soe:#8090CC; --soe-soft:#1C2236;
  --success:#3BC98B; --success-soft:#163024;
  --warning:#E0A83C; --warning-soft:#332810;
  --danger:#F2685E;  --danger-soft:#3A1E1A;
  --info:#5B8DEF;    --info-soft:#1A2436;
  --ring:rgba(246,180,46,.38);
  --on-solid:#14110F;
  --on-accent:#14110F;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 16px rgba(0,0,0,.5),0 2px 5px rgba(0,0,0,.35);
  --shadow-lg:0 16px 36px rgba(0,0,0,.55),0 5px 12px rgba(0,0,0,.4);
  --shadow-xl:0 28px 60px rgba(0,0,0,.6);
}

/* Brand themes: Amber (commercial, default) · Red (technical) · Dual (internal/general) */
/* Red is the brand every page actually renders under - template.xhtml and each
   standalone page set data-brand="red" - so these values, not the amber :root
   defaults above, are what the UI shows.

   --primary-hover/-press aligned 2026-07-31 to the redesign mock ("DT Connect.html"):
   its hover/press sit a touch warmer and lighter than the originals
   (#B41F16/#951910). Every other token in that mock already matched this block
   exactly, so these two were the whole colour delta. */
[data-brand="red"] {
  --primary:#D22A20; --primary-hover:#B02219; --primary-press:#8E1A13; --primary-soft:#FDECEA; --on-primary:#FFFFFF;
  --accent:#E58E0A; --accent-soft:#FDF0D8; --ring:rgba(210,42,32,.28);
}
[data-theme="dark"][data-brand="red"] {
  --primary:#F2564C; --primary-hover:#F47069; --primary-press:#D83B31; --primary-soft:#3A1E1A; --on-primary:#1B0E0C;
  --accent:#F6B42E; --accent-soft:#3A2C10; --ring:rgba(242,86,76,.36);
}
[data-brand="dual"] { --accent:#D22A20; --accent-soft:#FDECEA; }
[data-theme="dark"][data-brand="dual"] { --accent:#F2564C; --accent-soft:#3A1E1A; }