/* =========================================================
   Awall — Color Palettes (LOCAL BRANCH ONLY)

   Four sibling palettes built around the same Slate Comfort
   structure. P1 is the baseline; P2/P3/P4 each adjust ONE
   axis (chroma, temperature, contrast) so they can be
   compared side-by-side without large visual jumps.

     • P1 — Slate Comfort  (baseline)
       Cool blue-tinted surfaces, softened heading ink, warmer
       charcoal dark mode. Inside DESIGN.md.

     • P2 — Slate Neutral  (chroma axis)
       Same as P1 but the blue cast is removed from surfaces;
       canvas becomes a true neutral grey. Same primary, same
       text, same contrast — only the surface temperature
       neutralises.

     • P3 — Slate Warmer  (temperature axis)
       Same as P1 but surfaces lean very slightly warm (a hint
       of taupe/beige). Heading ink picks up the same warmth.
       Designed to feel less clinical without leaving slate.

     • P4 — Slate Contrast+  (contrast axis)
       Same surface temperature as P1 but text returns to the
       original DESIGN.md ink (#0F172A) and the primary becomes
       slightly more saturated. Dark mode goes a touch darker
       and brighter so the same delta lands. For users who feel
       P1 lost too much punch.

   Each palette block is structured:
     [data-palette="pN"]                     { ...light... }
     [data-palette="pN"][data-theme="dark"]  { ...dark... }
   The dark selector (0,2,0) beats the bare-attr (0,1,0), so
   light-mode tokens never bleed into dark.
   ========================================================= */


/* =========================================================
   P1 — Slate Comfort  (baseline; inside DESIGN.md)
   Locked combo: P2's neutral-grey surfaces in light mode +
   P1's warm-charcoal surfaces in dark mode. The single P1
   block below is what the app actually ships with.
   ========================================================= */
[data-palette="p1"] {
  /* Light mode — neutral grey surfaces, no blue cast (was P2). */
  --color-bg:           #F5F6F8;
  --color-surface:      #ECEDF0;
  --color-elevated:     #ffffff;
  --color-border:       #dee0e5;
  --color-border-soft:  rgba(222, 224, 229, 0.6);

  --color-text-heading: #1f2937;
  --color-text-body:    #475569;
  --color-text-muted:   #656b78;

  /* Slightly desaturated operator blue. */
  --color-primary:             #3b66d4;
  --color-primary-hover:       #2d52bd;
  --color-primary-light:       #dde7fb;
  --color-primary-soft:        rgba(59, 102, 212, 0.08);
  --color-primary-ring:        rgba(59, 102, 212, 0.25);
  --color-primary-ring-strong: rgba(59, 102, 212, 0.30);
  --color-primary-glow:        rgba(59, 102, 212, 0.40);
  --color-primary-glow-faint:  rgba(59, 102, 212, 0.05);
  --color-primary-focus-ring:  rgba(59, 102, 212, 0.12);
  --color-primary-border-soft: rgba(59, 102, 212, 0.20);

  --color-pre-bg:   #1f2329;
  --color-pre-text: #e3e4e8;

  --color-sidebar-bg:        #1c1f28;
  --color-sidebar-active-bg: rgba(59, 102, 212, 0.18);
  --color-sidebar-glow-soft: rgba(59, 102, 212, 0.22);
}

[data-palette="p1"][data-theme="dark"] {
  --color-bg:           #1a1f2c;
  --color-surface:      #232a3a;
  --color-elevated:     #2c3445;
  --color-border:       #3a4356;
  --color-border-soft:  rgba(58, 67, 86, 0.7);

  --color-text-heading: #e2e8f0;
  --color-text-body:    #b9c1d2;
  --color-text-muted:   #959dad;

  --color-primary:             #5882e8;
  --color-primary-hover:       #6e93ed;
  --color-primary-light:       rgba(88, 130, 232, 0.18);
  --color-primary-soft:        rgba(88, 130, 232, 0.12);
  --color-primary-ring:        rgba(88, 130, 232, 0.35);
  --color-primary-ring-strong: rgba(88, 130, 232, 0.45);
  --color-primary-glow:        rgba(88, 130, 232, 0.50);
  --color-primary-glow-faint:  rgba(88, 130, 232, 0.10);
  --color-primary-focus-ring:  rgba(88, 130, 232, 0.22);
  --color-primary-border-soft: rgba(88, 130, 232, 0.32);

  --color-pre-bg:   #1a1f2c;
  --color-pre-text: #c1c8d8;

  --color-sidebar-bg:        #1a1f2c;
  --color-sidebar-text:      #8c95a6;
  --color-sidebar-active-bg: rgba(88, 130, 232, 0.20);
  --color-sidebar-hover-bg:  rgba(255, 255, 255, 0.04);
  --color-sidebar-glow-soft: rgba(88, 130, 232, 0.28);
}


/* =========================================================
   P2 — Slate Neutral  (chroma axis)
   Surfaces become true neutral grey — no blue cast — while
   ink, text, and primary stay identical to P1.
   ========================================================= */
[data-palette="p2"] {
  --color-bg:           #F5F6F8;
  --color-surface:      #ECEDF0;
  --color-elevated:     #ffffff;
  --color-border:       #dee0e5;
  --color-border-soft:  rgba(222, 224, 229, 0.6);

  --color-text-heading: #1f2937;
  --color-text-body:    #475569;
  --color-text-muted:   #656b78;

  --color-primary:             #3b66d4;
  --color-primary-hover:       #2d52bd;
  --color-primary-light:       #dde7fb;
  --color-primary-soft:        rgba(59, 102, 212, 0.08);
  --color-primary-ring:        rgba(59, 102, 212, 0.25);
  --color-primary-ring-strong: rgba(59, 102, 212, 0.30);
  --color-primary-glow:        rgba(59, 102, 212, 0.40);
  --color-primary-focus-ring:  rgba(59, 102, 212, 0.12);
  --color-primary-border-soft: rgba(59, 102, 212, 0.20);

  --color-pre-bg:   #1f2329;
  --color-pre-text: #e3e4e8;

  --color-sidebar-bg:        #1c1f28;
  --color-sidebar-active-bg: rgba(59, 102, 212, 0.18);
  --color-sidebar-glow-soft: rgba(59, 102, 212, 0.22);
}

[data-palette="p2"][data-theme="dark"] {
  --color-bg:           #1d1f25;
  --color-surface:      #262930;
  --color-elevated:     #2f323a;
  --color-border:       #3c3f49;
  --color-border-soft:  rgba(60, 63, 73, 0.7);

  --color-text-heading: #e4e6ea;
  --color-text-body:    #b8bcc6;
  --color-text-muted:   #989aa4;

  --color-primary:             #5882e8;
  --color-primary-hover:       #6e93ed;
  --color-primary-light:       rgba(88, 130, 232, 0.18);
  --color-primary-soft:        rgba(88, 130, 232, 0.12);
  --color-primary-ring:        rgba(88, 130, 232, 0.35);
  --color-primary-ring-strong: rgba(88, 130, 232, 0.45);
  --color-primary-glow:        rgba(88, 130, 232, 0.50);
  --color-primary-focus-ring:  rgba(88, 130, 232, 0.22);
  --color-primary-border-soft: rgba(88, 130, 232, 0.32);

  --color-pre-bg:   #1d1f25;
  --color-pre-text: #c0c3cd;

  --color-sidebar-bg:        #1d1f25;
  --color-sidebar-text:      #8c8f9a;
  --color-sidebar-active-bg: rgba(88, 130, 232, 0.20);
  --color-sidebar-hover-bg:  rgba(255, 255, 255, 0.04);
  --color-sidebar-glow-soft: rgba(88, 130, 232, 0.28);
}


/* =========================================================
   P3 — Slate Warmer  (temperature axis)
   Surfaces pick up a faint taupe undertone, ink warms in
   sympathy. Same primary blue carries the brand, providing
   a cool/warm contrast that reads as inviting rather than
   clinical. Stays well inside slate territory.
   ========================================================= */
[data-palette="p3"] {
  --color-bg:           #F6F4F0;
  --color-surface:      #EDEAE3;
  --color-elevated:     #ffffff;
  --color-border:       #ddd9d1;
  --color-border-soft:  rgba(221, 217, 209, 0.6);

  --color-text-heading: #2a2620;
  --color-text-body:    #4d4740;
  --color-text-muted:   #6d6863;

  --color-primary:             #3b66d4;
  --color-primary-hover:       #2d52bd;
  --color-primary-light:       #e1e7f6;
  --color-primary-soft:        rgba(59, 102, 212, 0.08);
  --color-primary-ring:        rgba(59, 102, 212, 0.25);
  --color-primary-ring-strong: rgba(59, 102, 212, 0.30);
  --color-primary-glow:        rgba(59, 102, 212, 0.40);
  --color-primary-focus-ring:  rgba(59, 102, 212, 0.12);
  --color-primary-border-soft: rgba(59, 102, 212, 0.20);

  --color-pre-bg:   #2a2620;
  --color-pre-text: #ede8db;

  --color-sidebar-bg:        #1f1d18;
  --color-sidebar-active-bg: rgba(59, 102, 212, 0.18);
  --color-sidebar-glow-soft: rgba(59, 102, 212, 0.22);
}

[data-palette="p3"][data-theme="dark"] {
  --color-bg:           #1f1d18;
  --color-surface:      #2a2822;
  --color-elevated:     #34322a;
  --color-border:       #423f37;
  --color-border-soft:  rgba(66, 63, 55, 0.7);

  --color-text-heading: #e6e1d3;
  --color-text-body:    #c1bba8;
  --color-text-muted:   #a09a8d;

  --color-primary:             #6f8eea;
  --color-primary-hover:       #859fee;
  --color-primary-light:       rgba(111, 142, 234, 0.18);
  --color-primary-soft:        rgba(111, 142, 234, 0.12);
  --color-primary-ring:        rgba(111, 142, 234, 0.35);
  --color-primary-ring-strong: rgba(111, 142, 234, 0.45);
  --color-primary-glow:        rgba(111, 142, 234, 0.50);
  --color-primary-focus-ring:  rgba(111, 142, 234, 0.22);
  --color-primary-border-soft: rgba(111, 142, 234, 0.32);

  --color-pre-bg:   #1f1d18;
  --color-pre-text: #c8c2b1;

  --color-sidebar-bg:        #1f1d18;
  --color-sidebar-text:      #908a7a;
  --color-sidebar-active-bg: rgba(111, 142, 234, 0.20);
  --color-sidebar-hover-bg:  rgba(255, 255, 255, 0.04);
  --color-sidebar-glow-soft: rgba(111, 142, 234, 0.28);
}


/* =========================================================
   P4 — Slate Contrast+  (contrast axis)
   Closer to the original DESIGN.md ink (#0F172A heading,
   slightly more saturated primary). Dark mode is a touch
   darker than P1 with brighter text. For users who felt P1
   went too soft.
   ========================================================= */
[data-palette="p4"] {
  --color-bg:           #F2F5FA;
  --color-surface:      #E5EBF6;
  --color-elevated:     #ffffff;
  --color-border:       #d6dce6;
  --color-border-soft:  rgba(214, 220, 230, 0.6);

  --color-text-heading: #0f172a;
  --color-text-body:    #334155;
  --color-text-muted:   #5b6a7e;

  --color-primary:             #2553c5;
  --color-primary-hover:       #1c43a3;
  --color-primary-light:       #d8e2f7;
  --color-primary-soft:        rgba(37, 83, 197, 0.08);
  --color-primary-ring:        rgba(37, 83, 197, 0.25);
  --color-primary-ring-strong: rgba(37, 83, 197, 0.30);
  --color-primary-glow:        rgba(37, 83, 197, 0.40);
  --color-primary-focus-ring:  rgba(37, 83, 197, 0.12);
  --color-primary-border-soft: rgba(37, 83, 197, 0.20);

  --color-pre-bg:   #0f172a;
  --color-pre-text: #e2e8f0;

  --color-sidebar-bg:        #0f172a;
  --color-sidebar-active-bg: rgba(37, 83, 197, 0.20);
  --color-sidebar-glow-soft: rgba(37, 83, 197, 0.24);
}

[data-palette="p4"][data-theme="dark"] {
  --color-bg:           #131825;
  --color-surface:      #1d2333;
  --color-elevated:     #262e44;
  --color-border:       #38415a;
  --color-border-soft:  rgba(56, 65, 90, 0.7);

  --color-text-heading: #f1f5f9;
  --color-text-body:    #cbd5e1;
  --color-text-muted:   #94a3b8;

  --color-primary:             #4d77e8;
  --color-primary-hover:       #6489ec;
  --color-primary-light:       rgba(77, 119, 232, 0.20);
  --color-primary-soft:        rgba(77, 119, 232, 0.14);
  --color-primary-ring:        rgba(77, 119, 232, 0.38);
  --color-primary-ring-strong: rgba(77, 119, 232, 0.48);
  --color-primary-glow:        rgba(77, 119, 232, 0.55);
  --color-primary-focus-ring:  rgba(77, 119, 232, 0.24);
  --color-primary-border-soft: rgba(77, 119, 232, 0.34);

  --color-pre-bg:   #131825;
  --color-pre-text: #cbd5e1;

  --color-sidebar-bg:        #131825;
  --color-sidebar-text:      #94a3b8;
  --color-sidebar-active-bg: rgba(77, 119, 232, 0.22);
  --color-sidebar-hover-bg:  rgba(255, 255, 255, 0.04);
  --color-sidebar-glow-soft: rgba(77, 119, 232, 0.30);
}


/* =========================================================
   Bar-chart colors — "Last 7 Days" graph
   Locked to Soft Semantic (sage / terracotta, vivid). Light
   and dark values are separate so bars stay readable on both
   the neutral-grey light surface and the warm-charcoal dark
   surface. Legend dots follow the same tokens.
   ========================================================= */
:root {
  --bar-allowed:         #4a8a5a;
  --bar-blocked:         #b85858;
  --bar-allowed-opacity: 0.95;
  --bar-blocked-opacity: 0.95;
}
[data-theme="dark"] {
  --bar-allowed: #7cba8e;
  --bar-blocked: #d77f7f;
}

.bar--allowed {
  background: var(--bar-allowed);
  opacity:    var(--bar-allowed-opacity);
}
.bar--blocked {
  background: var(--bar-blocked);
  opacity:    var(--bar-blocked-opacity);
}
.legend-dot--allowed { background: var(--bar-allowed); }
.legend-dot--blocked { background: var(--bar-blocked); }