/* =====================================================
   ZoroMisr Theme Tokens
   Single source of truth for every --zoro-* and --bs-* palette
   value. Any page that wants to participate in theming
   (react to the "ZoroTheme" cookie / data-theme attribute)
   links this file, then site.css (or its own component CSS)
   on top — component rules should only ever reference these
   custom properties, never a raw hex value.

   Consumers: Site.Master (all pages under the app shell, including
   Agent/ChatBot.aspx and Agent/Contracts.aspx now that both live
   inside the shared shell).

   Adding a fifth theme: copy one of the [data-theme="..."]
   blocks below, override every token it overrides, and add
   the matching entry to CookieHelper.Themes. No other file
   needs to change — every consumer already reads these tokens.
   ===================================================== */

/* ----- Tokens (default theme = Navy & Gold, data-theme unset/"default") ----- */
:root {
  --zoro-navy:         #0D2137;
  --zoro-deep:         #071018;
  --zoro-surface:      #1a2535;
  --zoro-surface-rgb:  26, 37, 53;   /* used via rgba(var(--zoro-surface-rgb), alpha) for translucent glass panels */
  --zoro-surface-grad: #16202e;  /* .zoro-card / .tab-content gradient endpoint */
  --zoro-navy-grad:    #141f2d;  /* .zwz-stepper-wrap gradient start */
  --zoro-border:       #253347;
  --zoro-gold:         #C9A84C;
  --zoro-gold-rgb:     201, 168, 76;  /* used via rgba(var(--zoro-gold-rgb), alpha) for glows/rings */
  --zoro-gold-hover:   #dbb84e;
  --zoro-gold-dim:     rgba(var(--zoro-gold-rgb), 0.12);
  --zoro-gold-line:    rgba(var(--zoro-gold-rgb), 0.2);
  --zoro-cream:        #F5F0E8;  /* heading/emphasis text on dark surfaces — NOT the login card bg, see --zoro-login-card-bg */
  --zoro-text:         #e8e0d0;
  --zoro-muted:        #8a9bb0;
  --zoro-muted-rgb:    138, 155, 176;  /* used via rgba(var(--zoro-muted-rgb), alpha) for neutral/secondary badge tints */

  /* Subtle white-tint overlays (hover/stripe states on dark surfaces) */
  --zoro-overlay-sm:   rgba(255, 255, 255, 0.015);
  --zoro-overlay-md:   rgba(255, 255, 255, 0.02);
  --zoro-overlay-lg:   rgba(255, 255, 255, 0.04);

  /* Status colors. --zoro-success/-hover is the only status token painted as a
     large, solid, undiluted fill (.btn-success — the "+ Add X" buttons); it's
     a muted jade/emerald in the same tonal family as -soft, deliberately picked
     to sit naturally beside --zoro-gold/--zoro-navy rather than read as a
     disconnected, generic Bootstrap green. */
  --zoro-success:       #3D8A64;
  --zoro-success-rgb:   61, 138, 100;
  --zoro-success-hover: #4CA378;
  --zoro-success-soft:  #75b798;
  --zoro-danger:        #dc3545;
  --zoro-danger-rgb:    220, 53, 69;
  --zoro-danger-soft:   #ea868f;
  --zoro-warning:       #ffc107;
  --zoro-info-rgb:      13, 202, 240;
  --zoro-info-soft:     #6edff6;

  /* Fixed brand elements — the Login page's floating card is a deliberate light
     island regardless of theme (see Site.Master.cs IsPublicPage/HideTopbar notes).
     Do NOT theme any of these five; none may ever appear in a :root[data-theme]
     override block. Before these existed, several .zoro-login-* rules referenced
     the themeable --zoro-navy/-gold/-muted tokens directly — under the Light theme
     --zoro-navy resolves to a near-white value, which made the Sign In email/password
     input text invisible against the card's light background. These constants close
     that leak; always add new login-card rules against these, never the themeable set. */
  --zoro-login-card-bg:    #F5F0E8;
  --zoro-login-ink:        #0D2137;
  --zoro-login-accent:     #C9A84C;
  --zoro-login-accent-rgb: 201, 168, 76;
  --zoro-login-muted:      #6a7a8a;

  --zoro-radius-sm:   4px;
  --zoro-radius-md:   8px;
  --zoro-radius-lg:   12px;
  --zoro-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.35);

  /* Bootstrap override hooks */
  --bs-primary:       #C9A84C;
  --bs-primary-rgb:   201, 168, 76;
  --bs-body-bg:       #071018;
  --bs-body-color:    #e8e0d0;
  --bs-border-color:  #253347;
}

/* ----- Theme: Light (Ivory & Bronze) ----- */
:root[data-theme="light"] {
  --zoro-navy:         #FBF8F1;
  --zoro-deep:         #EFEAE0;
  --zoro-surface:      #FFFFFF;
  --zoro-surface-rgb:  255, 255, 255;
  --zoro-surface-grad: #F3EEE4;
  --zoro-navy-grad:    #F7F2E8;
  --zoro-border:       #D8D0C0;
  --zoro-gold:         #A07D2C;
  --zoro-gold-rgb:     160, 125, 44;
  --zoro-gold-hover:   #8A6A22;
  --zoro-cream:        #14273A;  /* headings need a dark color on light surfaces */
  --zoro-text:         #22303f;
  --zoro-muted:        #6a7a8a;
  --zoro-muted-rgb:    106, 122, 138;

  --zoro-overlay-sm:   rgba(0, 0, 0, 0.02);
  --zoro-overlay-md:   rgba(0, 0, 0, 0.03);
  --zoro-overlay-lg:   rgba(0, 0, 0, 0.05);

  /* Status colors — darker/more saturated than the default theme so they stay
     legible as solid button/badge fills on a light surface (the default theme's
     status colors are tuned for dark surfaces and don't need this adjustment). */
  --zoro-success:       #5C7A3F;
  --zoro-success-rgb:   92, 122, 63;
  --zoro-success-hover: #6F9350;
  --zoro-success-soft:  #157347;
  --zoro-danger:        #B02A37;
  --zoro-danger-rgb:    176, 42, 55;
  --zoro-danger-soft:   #b02a37;
  --zoro-info-rgb:      10, 138, 163;
  --zoro-info-soft:     #0a8aa3;

  --bs-primary:        #A07D2C;
  --bs-primary-rgb:    160, 125, 44;
  --bs-body-bg:        #EFEAE0;
  --bs-body-color:     #22303f;
  --bs-border-color:   #D8D0C0;
}
/* Google Places widget host: light surface needs the light color-scheme hint too */
:root[data-theme="light"] .zoro-places-autocomplete { color-scheme: light; }

/* ----- Theme: Emerald & Gold ----- */
:root[data-theme="emerald"] {
  --zoro-navy:         #0B241C;
  --zoro-deep:         #06120E;
  --zoro-surface:      #123028;
  --zoro-surface-rgb:  18, 48, 40;
  --zoro-surface-grad: #0E2820;
  --zoro-navy-grad:    #091E17;
  --zoro-border:       #1E4438;
  --zoro-gold:         #C9A84C;
  --zoro-gold-rgb:     201, 168, 76;
  --zoro-gold-hover:   #dbb84e;
  --zoro-cream:        #dfe8e2;
  --zoro-text:         #dfe8e2;
  --zoro-muted:        #7fa394;
  --zoro-muted-rgb:    127, 163, 148;

  /* Status colors — a brighter green and warmer red than the default theme so
     both stand out clearly against this theme's own dark-green surface. */
  --zoro-success:       #2FA66C;
  --zoro-success-rgb:   47, 166, 108;
  --zoro-success-hover: #3DBD80;
  --zoro-success-soft:  #7FE0AC;
  --zoro-danger:        #FF6B6B;
  --zoro-danger-rgb:    255, 107, 107;
  --zoro-danger-soft:   #FFA8A8;
  --zoro-info-rgb:      60, 196, 196;
  --zoro-info-soft:     #7FDCDC;

  --bs-primary:        #C9A84C;
  --bs-primary-rgb:    201, 168, 76;
  --bs-body-bg:        #06120E;
  --bs-body-color:     #dfe8e2;
  --bs-border-color:   #1E4438;
}

/* ----- Theme: Burgundy & Rose ----- */
:root[data-theme="burgundy"] {
  --zoro-navy:         #2A0E12;
  --zoro-deep:         #140708;
  --zoro-surface:      #351319;
  --zoro-surface-rgb:  53, 19, 25;
  --zoro-surface-grad: #2E1015;
  --zoro-navy-grad:    #260C10;
  --zoro-border:       #4A2027;
  --zoro-gold:         #D9A64C;
  --zoro-gold-rgb:     217, 166, 76;
  --zoro-gold-hover:   #E8B85E;
  --zoro-cream:        #ecdcdc;
  --zoro-text:         #ecdcdc;
  --zoro-muted:        #b08a90;
  --zoro-muted-rgb:    176, 138, 144;

  /* Status colors — a muted sage green (so it doesn't fight the theme's own
     reds) and an intensified rose-red danger that echoes the theme's mood. */
  --zoro-success:       #6B9B72;
  --zoro-success-rgb:   107, 155, 114;
  --zoro-success-hover: #7EB086;
  --zoro-success-soft:  #A8CC9E;
  --zoro-danger:        #E2495F;
  --zoro-danger-rgb:    226, 73, 95;
  --zoro-danger-soft:   #F0919F;
  --zoro-info-rgb:      143, 168, 217;
  --zoro-info-soft:     #B8CBEC;

  --bs-primary:        #D9A64C;
  --bs-primary-rgb:    217, 166, 76;
  --bs-body-bg:        #140708;
  --bs-body-color:     #ecdcdc;
  --bs-border-color:   #4A2027;
}