/* ============================================================
   AIS CANONICAL THEME TOKENS
   Archana Info Solutions Pvt Ltd
   File   : /css/ais_theme.css
   Loaded : by every {PFX}_Master.master, BEFORE its inline <style>
   ------------------------------------------------------------
   TWO THEMES ONLY. Nothing else is sanctioned.

     data-ais-theme="lux"  (default)  Luxury Light 2026
                                      Business / admin / customer products.
                                      Paper #FAFBFD, indigo #5B4EE5, gold #C9A84C.

     data-ais-theme="ar"              AR Amber
                                      Products under ArProjects\ only.
                                      Amber #F59E0B is used because indigo does
                                      not stay legible composited over a live
                                      camera feed. Indigo is kept as the accent
                                      so the AR suite still reads as AIS.

   WHY THE --th- PREFIX
     The estate already had 255 colour variable names, including an --ais-*
     set in css/ais_front.css that collides on grad-primary, grad-accent,
     glass-blur, shadow-sm and shadow-lg. --th- was verified unused across
     every .master and .css file, so canonical tokens can never be shadowed
     by a legacy declaration. If you see --th-, it is canonical. Anything
     else is legacy and should resolve to a --th- token.

   RULES
     1. Never declare a palette value in a master page or product stylesheet.
        Point the existing variable names at these tokens instead:
            :root{ --bg: var(--th-bg); --brand: var(--th-primary); }
     2. Semantic colour (success / warning / error) is NOT the accent.
        Use --th-success / --th-warning / --th-error.
     3. Layout variables (--sidebar-width, --radius-*, --topbar-height)
        stay in the product. They are not part of the theme.
     4. Dark is OPT-IN via data-ais-mode="dark". It is deliberately not wired
        to prefers-color-scheme, so no existing light page can flip on its own.
     5. data-ais-theme MUST sit on the root <html> element, never on a wrapper
        div. The legacy aliases below are declared on :root as --bg: var(--th-bg),
        so they are substituted once at :root and the computed value inherits.
        Redefining a --th- token further down the tree therefore does NOT
        retroactively change --bg for that subtree. This was confirmed by test.
        If you ever need two themes on one page, the components in the scoped
        subtree must reference --th- tokens directly, not the legacy aliases.

   Adding a colour here changes the company standard. Discuss first.
   ============================================================ */

:root,
:root[data-ais-theme="lux"]{
  /* --- grounds --- */
  --th-bg:            #FAFBFD;
  --th-surface:       #FFFFFF;
  --th-surface-2:     #F3F5FB;
  --th-surface-hover: #EDEFF7;

  /* --- text --- */
  --th-ink:           #141520;
  --th-ink-2:         #3C4055;
  --th-muted:         #6E7288;
  --th-faint:         #9498AC;
  --th-on-primary:    #FFFFFF;

  /* --- rules --- */
  --th-line:          #E3E5F0;
  --th-line-2:        #EDEFF7;

  /* --- primary : indigo --- */
  --th-primary:       #5B4EE5;
  --th-primary-600:   #4A3ED1;
  --th-primary-700:   #3F35B8;
  --th-primary-soft:  #EEEBFE;

  /* --- accent : gold --- */
  --th-accent:        #C9A84C;
  --th-accent-600:    #B8902E;
  --th-accent-soft:   #FBF4DF;

  /* --- semantic : never the accent --- */
  --th-success:       #0E8F63;
  --th-success-soft:  #E4F4EE;
  --th-warning:       #B5730A;
  --th-warning-soft:  #FBF0DC;
  --th-error:         #C0392F;
  --th-error-soft:    #FAE7EA;
  --th-info:          #2563EB;
  --th-info-soft:     #E6EDFD;

  /* --- glass --- */
  --th-glass:         rgba(255,255,255,.86);
  --th-glass-2:       rgba(255,255,255,.70);
  --th-glass-bd:      rgba(30,27,75,.12);
  --th-blur:          blur(20px);

  /* --- elevation --- */
  --th-shadow-1:      0 1px 2px rgba(30,27,75,.06);
  --th-shadow-2:      0 4px 24px rgba(30,27,75,.10);
  --th-shadow-3:      0 18px 44px -18px rgba(30,27,75,.22);

  /* --- gradients --- */
  --th-grad-1:        linear-gradient(135deg,#5B4EE5,#7C6FF0);
  --th-grad-2:        linear-gradient(135deg,#C9A84C,#E7C66B);
}

:root[data-ais-theme="ar"]{
  --th-bg:            #F7FAFF;
  --th-surface:       #FFFFFF;
  --th-surface-2:     #EFF4FB;
  --th-surface-hover: #E6EDF7;

  --th-ink:           #0F172A;
  --th-ink-2:         #33405C;
  --th-muted:         #5B6480;
  --th-faint:         #8B93A8;
  --th-on-primary:    #1A1204;

  --th-line:          #DCE4F0;
  --th-line-2:        #E8EEF7;

  /* the single sanctioned amber - replaces the five that had drifted:
     #F59E0B #F97316 #D97706 #FB923C #CA8A04 */
  --th-primary:       #F59E0B;
  --th-primary-600:   #D97706;
  --th-primary-700:   #B4620A;
  --th-primary-soft:  #FEF3D7;

  /* indigo accent keeps the AR suite tied to the company identity */
  --th-accent:        #5B4EE5;
  --th-accent-600:    #4A3ED1;
  --th-accent-soft:   #EEEBFE;

  --th-success:       #0E8F63;
  --th-success-soft:  #E4F4EE;
  --th-warning:       #B5730A;
  --th-warning-soft:  #FBF0DC;
  --th-error:         #C0392F;
  --th-error-soft:    #FAE7EA;
  --th-info:          #2563EB;
  --th-info-soft:     #E6EDFD;

  --th-glass:         rgba(255,255,255,.84);
  --th-glass-2:       rgba(255,255,255,.68);
  --th-glass-bd:      rgba(15,23,42,.14);
  --th-blur:          blur(20px);

  --th-shadow-1:      0 1px 2px rgba(15,23,42,.06);
  --th-shadow-2:      0 4px 24px rgba(15,23,42,.10);
  --th-shadow-3:      0 18px 44px -18px rgba(15,23,42,.22);

  --th-grad-1:        linear-gradient(135deg,#F59E0B,#FBBF4A);
  --th-grad-2:        linear-gradient(135deg,#5B4EE5,#7C6FF0);
}

/* ============================================================
   DARK - OPT-IN ONLY (data-ais-mode="dark")
   ============================================================ */
:root[data-ais-mode="dark"],
:root[data-ais-theme="lux"][data-ais-mode="dark"]{
  --th-bg:#0C0D14; --th-surface:#14161F; --th-surface-2:#1B1E29; --th-surface-hover:#232734;
  --th-ink:#EAEBF3; --th-ink-2:#BFC3D4; --th-muted:#8E93A8; --th-faint:#6A6F84;
  --th-line:#262A38; --th-line-2:#1F222E;
  --th-primary:#8C81F5; --th-primary-600:#7A6DF0; --th-primary-700:#6B5DE8; --th-primary-soft:#221F3D;
  --th-accent:#D9BC6A; --th-accent-600:#C9A84C; --th-accent-soft:#302914;
  --th-success:#3DBF92; --th-success-soft:#11291F;
  --th-warning:#D9A249; --th-warning-soft:#2C2110;
  --th-error:#E8798C;   --th-error-soft:#2E1720;
  --th-info:#6E9BF5;    --th-info-soft:#141F35;
  --th-glass:rgba(255,255,255,.06); --th-glass-2:rgba(255,255,255,.04);
  --th-glass-bd:rgba(255,255,255,.10);
  --th-shadow-1:0 1px 2px rgba(0,0,0,.4);
  --th-shadow-2:0 8px 24px -12px rgba(0,0,0,.6);
  --th-shadow-3:0 18px 44px -18px rgba(0,0,0,.7);
  --th-grad-1:linear-gradient(135deg,#8C81F5,#A79EF8);
  --th-grad-2:linear-gradient(135deg,#D9BC6A,#E7CE8C);
}
:root[data-ais-theme="ar"][data-ais-mode="dark"]{
  --th-bg:#0B0F18; --th-surface:#131926; --th-surface-2:#1A2131; --th-surface-hover:#22293A;
  --th-ink:#E8EDF6; --th-ink-2:#B8C1D4; --th-muted:#8892A8; --th-faint:#66708A;
  --th-line:#242D3F; --th-line-2:#1C2433;
  --th-primary:#FBBF4A; --th-primary-600:#F59E0B; --th-primary-700:#D97706; --th-primary-soft:#33260C;
  --th-accent:#8C81F5; --th-accent-600:#7A6DF0; --th-accent-soft:#221F3D;
  --th-on-primary:#1A1204;
  --th-glass:rgba(255,255,255,.06); --th-glass-2:rgba(255,255,255,.04);
  --th-glass-bd:rgba(255,255,255,.10);
  --th-grad-1:linear-gradient(135deg,#FBBF4A,#FCD177);
  --th-grad-2:linear-gradient(135deg,#8C81F5,#A79EF8);
}

/* ============================================================
   LEGACY NAME COMPATIBILITY
   255 colour variable names accumulated across 96 masters and 23
   product stylesheets. These aliases mean any file not yet remapped
   still resolves to canonical values rather than an undefined
   variable. A file's own :root still wins if it redeclares a name,
   which is why migration points those declarations at --th- tokens.
   ============================================================ */
:root{
  /* grounds */
  --bg: var(--th-bg);                   --bg-primary: var(--th-bg);
  --paper: var(--th-bg);                --bg-hero: var(--th-bg);
  --bg-secondary: var(--th-surface-2);  --bg-soft: var(--th-surface-2);
  --bg2: var(--th-surface-2);           --bg-2: var(--th-surface-2);
  --surface: var(--th-surface);         --bg-surface: var(--th-surface);
  --bg-white: var(--th-surface);        --card: var(--th-surface);
  --bg-card: var(--th-surface);         --bg-card-hover: var(--th-surface-hover);
  --surface-hover: var(--th-surface-hover);

  /* text */
  --ink: var(--th-ink);                 --ink2: var(--th-ink-2);
  --ink3: var(--th-muted);              --text: var(--th-ink);
  --text-primary: var(--th-ink);        --text-dark: var(--th-ink);
  --text-body: var(--th-ink-2);         --text-secondary: var(--th-ink-2);
  --text-muted: var(--th-muted);        --muted: var(--th-muted);
  --mut: var(--th-muted);               --text-dim: var(--th-faint);

  /* rules */
  --line: var(--th-line);               --line2: var(--th-line-2);
  --border: var(--th-line);             --border-color: var(--th-line);
  --border-soft: var(--th-line-2);      --bd: var(--th-line);

  /* primary */
  --brand: var(--th-primary);           --primary: var(--th-primary);
  --accent-1: var(--th-primary);        --pri: var(--th-primary);
  --pri2: var(--th-primary-600);        --primary-dark: var(--th-primary-700);
  --primary-light: var(--th-primary-soft);
  --primary-soft: var(--th-primary-soft);
  --primary-gradient: var(--th-grad-1); --gradient-primary: var(--th-grad-1);
  --grad-1: var(--th-grad-1);           --gradient-hero: var(--th-grad-1);

  /* accent */
  --accent: var(--th-accent);           --accent-2: var(--th-accent);
  --gold: var(--th-accent);             --sec: var(--th-accent);
  --accent-gold: var(--th-accent);      --accent-amber: var(--th-accent);
  --accent-3: var(--th-accent-600);     --accent-deep: var(--th-accent-600);
  --accent-light: var(--th-accent-soft);
  --gold-l: var(--th-accent-soft);      --gold-light: var(--th-accent-soft);
  --gold-soft: var(--th-accent-soft);   --soft: var(--th-accent-soft);
  --accent-gradient: var(--th-grad-2);  --gold-gradient: var(--th-grad-2);
  --grad-gold: var(--th-grad-2);

  /* semantic */
  --success: var(--th-success);         --ok: var(--th-success);
  --emerald: var(--th-success);         --risk-green: var(--th-success);
  --warning: var(--th-warning);         --warn: var(--th-warning);
  --risk-amber: var(--th-warning);      --sev-minor: var(--th-warning);
  --sev-major: var(--th-warning);
  --error: var(--th-error);             --err: var(--th-error);
  --danger: var(--th-error);            --risk-red: var(--th-error);
  --sev-critical: var(--th-error);      --info: var(--th-info);

  /* glass + elevation */
  --glass: var(--th-glass);             --glass-bg: var(--th-glass);
  --glass-bd: var(--th-glass-bd);       --glass-border: var(--th-glass-bd);
  --glass-shadow: var(--th-shadow-2);
  --shadow: var(--th-shadow-2);         --sh: var(--th-shadow-2);
  --shadow-sm: var(--th-shadow-1);
}

/* ============================================================
   MINIMAL SHARED PRIMITIVES
   Only what every product already expects. Component styling stays
   in the product master - this is not a UI framework.
   ============================================================ */
.ais-glass{
  background:var(--th-glass);
  -webkit-backdrop-filter:var(--th-blur);
  backdrop-filter:var(--th-blur);
  border:1px solid var(--th-glass-bd);
  border-radius:16px;
  box-shadow:var(--th-shadow-2);
}
.ais-btn-primary{
  background:var(--th-grad-1); color:var(--th-on-primary);
  border:none; border-radius:12px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ais-btn-primary:hover{ transform:scale(1.02); box-shadow:var(--th-shadow-2); }
.ais-focusable:focus-visible,
.ais-btn-primary:focus-visible{ outline:2px solid var(--th-primary); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  .ais-btn-primary{ transition:none }
  .ais-btn-primary:hover{ transform:none }
}
