/* ============================================================
   Autómata Álava — Color tokens
   Dark, minimalist. Deep navy-black canvas, bronze-gold accent
   (from the gear mark), WhatsApp green reserved for contact CTAs.
   ============================================================ */
:root {
  /* ---- Base ink scale (deep navy-black, cool) ---- */
  --ink-950: #0B0F18;   /* deepest — full-bleed backdrops          */
  --ink-900: #11161F;   /* page background                          */
  --ink-850: #171E2A;   /* raised background band                    */
  --ink-800: #1D2533;   /* card / surface                           */
  --ink-750: #252E3D;   /* surface hover / input                    */
  --ink-700: #2E3848;   /* elevated surface                         */
  --ink-600: #3A4559;   /* strong border                            */

  /* ---- Bronze-gold accent (sampled from the brand gear) ---- */
  --gold-100: #F6ECD3;  /* tint wash                                */
  --gold-200: #ECD9AE;  /* light highlight                          */
  --gold-300: #E2C988;  /* hover / bright text                      */
  --gold-400: #D4B36A;  /* secondary accent                         */
  --gold-500: #C9A24B;  /* PRIMARY accent                           */
  --gold-600: #A9863A;  /* pressed / deep                           */
  --gold-700: #7E632A;  /* faint outline                            */

  /* ---- WhatsApp green (functional — contact only) ---- */
  --wa-300: #5BE584;
  --wa-400: #3DD673;
  --wa-500: #25D366;    /* canonical WhatsApp green                 */
  --wa-600: #1EBE5A;    /* hover                                    */
  --wa-700: #14934A;    /* pressed                                  */

  /* ---- Text on dark ---- */
  --text-strong: #F5F2EA;  /* headlines (warm white)                */
  --text:        #CDD3DE;  /* body                                  */
  --text-muted:  #8A93A6;  /* secondary / captions                  */
  --text-faint:  #5B6577;  /* placeholder / disabled                */
  --text-on-gold:  #1A1206; /* text atop gold fills                 */
  --text-on-green: #06301A; /* text atop green fills                */

  /* ---- Hairlines & overlays ---- */
  --line:        rgba(245, 242, 234, 0.08);
  --line-strong: rgba(245, 242, 234, 0.14);
  --line-gold:   rgba(201, 162, 75, 0.34);
  --scrim:       rgba(7, 10, 17, 0.66);

  /* ---- Semantic aliases ---- */
  --bg-page:        var(--ink-900);
  --bg-band:        var(--ink-850);
  --surface-card:   var(--ink-800);
  --surface-input:  var(--ink-750);
  --surface-raised: var(--ink-700);
  --border:         var(--line);
  --border-strong:  var(--line-strong);

  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-300);
  --accent-press:   var(--gold-600);
  --accent-soft:    rgba(201, 162, 75, 0.12);

  --action:         var(--wa-500);   /* WhatsApp contact action     */
  --action-hover:   var(--wa-600);
  --action-press:   var(--wa-700);
  --action-soft:    rgba(37, 211, 102, 0.12);

  --text-heading:   var(--text-strong);
  --text-body:      var(--text);

  /* ---- Status (kept muted to respect the single-accent rule) --- */
  --ok:    var(--wa-500);
  --warn:  var(--gold-400);
  --error: #E0625B;

  /* ---- Foil heading stops (night: warm gold ↔ cool platinum/ice; no green) ---- */
  --foil-1: #FBF3DE;
  --foil-2: #E2C988;
  --foil-3: #C4E3EF;
  --foil-4: #C9A24B;
  --foil-5: #9DC4DF;
  --foil-6: #ECD9AE;
  --foil-glow: 201,162,75; /* @kind other */

  /* ---- Service-card hover accents (sheen rgb · ring · chip · glow) ---- */
  --svc-gold-rgb: 226,201,136; /* @kind other */
  --svc-green-rgb: 61,214,115; /* @kind other */
  --svc-admin-rgb: 142,124,248; /* @kind other */
  --svc-admin-ring: rgba(142,124,248,0.5);
  --svc-admin-soft: rgba(142,124,248,0.14);
  --svc-admin-fg: #B7ACFF;
  --glow-admin: 0 0 0 1px rgba(142,124,248,0.5), 0 12px 40px rgba(142,124,248,0.30);
}

/* ============================================================
   DAY / LIGHT THEME
   Overriding the BASE values cascades to every semantic alias
   (--surface-card → var(--ink-800), etc.) automatically.
   ============================================================ */
:root[data-theme="light"] {
  /* ink scale → warm cream paper */
  --ink-950: #E7DEC9;
  --ink-900: #F4EFE4;   /* page background */
  --ink-850: #ECE3D1;   /* band */
  --ink-800: #FFFFFF;   /* card */
  --ink-750: #F4EFE3;   /* input / hover */
  --ink-700: #FBF7EE;   /* elevated */
  --ink-600: #D8CDB4;   /* strong border */

  /* gold → deeper bronze for contrast on cream */
  --gold-100: #F3E8CF;
  --gold-200: #E7D4A6;
  --gold-300: #8A6630;  /* used as chip glyph / bright text — darkened */
  --gold-400: #B98E4D;
  --gold-500: #A87B3D;  /* PRIMARY accent (day) */
  --gold-600: #8A6630;
  --gold-700: #6E4F22;

  /* text */
  --text-strong: #1A2438;
  --text:        #3C4761;
  --text-muted:  #6B7688;
  --text-faint:  #97A0AF;
  --text-on-gold: #FFFFFF;

  /* hairlines & overlays → navy-tinted */
  --line:        rgba(26, 36, 56, 0.10);
  --line-strong: rgba(26, 36, 56, 0.16);
  --line-gold:   rgba(168, 123, 61, 0.40);
  --scrim:       rgba(26, 36, 56, 0.30);

  --accent:       var(--gold-500);
  --accent-hover: #8A6630;
  --accent-press: #6E4F22;
  --accent-soft:  rgba(168, 123, 61, 0.12);

  /* shadows → softer, navy-tinted on paper */
  --shadow-sm: 0 1px 2px rgba(26, 36, 56, 0.10);
  --shadow-md: 0 8px 24px rgba(26, 36, 56, 0.10);
  --shadow-lg: 0 18px 50px rgba(26, 36, 56, 0.14);
  --shadow-xl: 0 28px 70px rgba(26, 36, 56, 0.16);
  --glow-gold: 0 0 0 1px var(--line-gold), 0 12px 40px rgba(168, 123, 61, 0.20);
  --ring-focus: 0 0 0 3px rgba(168, 123, 61, 0.45);

  /* ---- Foil heading stops (day: bronze + chrome/steel on cream; no green) ---- */
  --foil-1: #8A6630;
  --foil-2: #A87B3D;
  --foil-3: #5E6B7C;
  --foil-4: #6E4F22;
  --foil-5: #41506A;
  --foil-6: #B98E4D;
  --foil-glow: 168,123,61; /* @kind other */

  /* ---- Service-card hover accents (darker on cream so the sheen reads) ---- */
  --svc-gold-rgb: 168,123,61; /* @kind other */
  --svc-green-rgb: 26,160,80; /* @kind other */
  --svc-admin-rgb: 109,90,200; /* @kind other */
  --svc-admin-ring: rgba(109,90,200,0.5);
  --svc-admin-soft: rgba(109,90,200,0.12);
  --svc-admin-fg: #5B45B8;
  --glow-green: 0 0 0 1px rgba(30,170,90,0.45), 0 12px 40px rgba(30,170,90,0.22);
  --glow-admin: 0 0 0 1px rgba(109,90,200,0.5), 0 14px 44px rgba(109,90,200,0.26);
}

/* ============================================================
   DARK SCOPE — force the dark palette on a subtree regardless of
   the active theme (used to keep the HERO dark over its shader).
   ============================================================ */
.aa-dark-scope {
  --ink-950: #0B0F18; --ink-900: #11161F; --ink-850: #171E2A;
  --ink-800: #1D2533; --ink-750: #252E3D; --ink-700: #2E3848; --ink-600: #3A4559;
  --gold-100: #F6ECD3; --gold-200: #ECD9AE; --gold-300: #E2C988; --gold-400: #D4B36A;
  --gold-500: #C9A24B; --gold-600: #A9863A; --gold-700: #7E632A;
  --text-strong: #F5F2EA; --text: #CDD3DE; --text-muted: #8A93A6; --text-faint: #5B6577;
  --text-on-gold: #1A1206;
  --line: rgba(245, 242, 234, 0.08);
  --line-strong: rgba(245, 242, 234, 0.14);
  --line-gold: rgba(201, 162, 75, 0.34);
  --accent: #C9A24B; --accent-hover: #E2C988; --accent-press: #A9863A;
  --accent-soft: rgba(201, 162, 75, 0.12);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-xl: 0 32px 80px rgba(0,0,0,0.6);
  --glow-gold: 0 0 0 1px var(--line-gold), 0 12px 40px rgba(201,162,75,0.18);
  --foil-1: #FBF3DE; --foil-2: #E2C988; --foil-3: #C4E3EF; --foil-4: #C9A24B; --foil-5: #9DC4DF; --foil-6: #ECD9AE; --foil-glow: 201,162,75; /* @kind other */
  --svc-gold-rgb: 226,201,136; /* @kind other */ --svc-green-rgb: 61,214,115; /* @kind other */ --svc-admin-rgb: 142,124,248; /* @kind other */
  --svc-admin-ring: rgba(142,124,248,0.5); --svc-admin-soft: rgba(142,124,248,0.14); --svc-admin-fg: #B7ACFF;
  --glow-green: 0 0 0 1px rgba(37,211,102,0.4), 0 10px 34px rgba(37,211,102,0.22);
  --glow-admin: 0 0 0 1px rgba(142,124,248,0.5), 0 12px 40px rgba(142,124,248,0.30);
}