/* ============================================================
   theme.css -- Global design tokens (3 selectable themes)
   ============================================================
   This is the ONLY global CSS file in the project.
   It defines CSS variables only -- no element/class selectors
   -- so it can never conflict with page-scoped
   Component.razor.css files (CSS Isolation).

   Theme switching: set data-theme="blue" | "gold" | "lilac" on
   the <html> element (rendered server-side based on
   users.theme_preference, default 'blue'). All three blocks
   define the SAME variable names -- every Component.razor.css
   uses var(--...) and automatically follows the active theme.

   The selectors are [data-theme=...], NOT html[data-theme=...]:
   variables inherit, so any element carrying the attribute
   re-themes its own subtree. That is what lets a business's
   public page (.site) wear its own colours while the panel
   around it keeps the owner's.
   ============================================================ */

/* ---------- Theme: blue / navy (default) ---------- */

/* A note on --bg-gradient, which all three themes share the shape of:
   it runs at 180deg (top → bottom), NOT on a diagonal. A diagonal makes the
   left edge of the page darker than the right, and the panel's content is laid
   out in columns — a week of day cards, a day of staff columns. A background
   that shades across those columns reads as though the columns themselves are
   shaded, i.e. as if the data on the left means something different from the
   data on the right. Vertical keeps every column on identical ground. */

:root,
[data-theme="blue"] {
  --bg-gradient: linear-gradient(180deg, #0b1226, #0a1020 60%, #080d1a);

  --text-main: #e8f1ff;
  --text-dim: #a8d8ff;
  --text-faint: #8faad1;
  --text-error: #ff8a8a;

  --glass-bg: rgba(10, 20, 45, 0.55);
  --glass-bg-soft: rgba(10, 20, 45, 0.35);
  --glass-border: rgba(120, 180, 255, 0.35);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #6bb6ff, #a8d8ff);
  --accent-glow: rgba(140, 200, 255, 0.8);
  --accent-glow-soft: rgba(120, 180, 255, 0.25);
  --accent-text-on-fill: #001a33;

  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 48px;
  --orb-1: rgba(120, 180, 255, 0.16);
  --orb-2: rgba(124, 108, 255, 0.14);
  --orb-3: rgba(120, 180, 255, 0.10);
  --scanline: rgba(120, 180, 255, 0.75);

  --color-success: linear-gradient(135deg, #6bffb0, #a8ffd8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- Theme: gold / coffee ---------- */
[data-theme="gold"] {
  --bg-gradient: linear-gradient(180deg, #1d1409, #181007 60%, #120b05);

  --text-main: #fff3e0;
  --text-dim: #ffd9a0;
  --text-faint: #d8b690;
  --text-error: #ff8a8a;

  --glass-bg: rgba(40, 25, 12, 0.55);
  --glass-bg-soft: rgba(40, 25, 12, 0.35);
  --glass-border: rgba(255, 195, 90, 0.35);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #f0c869, #ffe2a8);
  --accent-glow: rgba(255, 210, 120, 0.8);
  --accent-glow-soft: rgba(255, 195, 90, 0.25);
  --accent-text-on-fill: #2b1c0f;

  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 48px;
  --orb-1: rgba(255, 195, 90, 0.16);
  --orb-2: rgba(214, 150, 70, 0.14);
  --orb-3: rgba(255, 195, 90, 0.10);
  --scanline: rgba(255, 195, 90, 0.75);

  --color-success: linear-gradient(135deg, #b6e08c, #ddf5b8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- Theme: lilac / purple ---------- */
[data-theme="lilac"] {
  --bg-gradient: linear-gradient(180deg, #150c24, #110a1c 60%, #0c0716);

  --text-main: #f0e9ff;
  --text-dim: #d8c4ff;
  --text-faint: #b8a8d8;
  --text-error: #ff8a8a;

  --glass-bg: rgba(30, 18, 48, 0.55);
  --glass-bg-soft: rgba(30, 18, 48, 0.35);
  --glass-border: rgba(196, 150, 255, 0.35);
  --glass-blur: 18px;

  --accent-gradient: linear-gradient(135deg, #b48cff, #e2c8ff);
  --accent-glow: rgba(200, 160, 255, 0.8);
  --accent-glow-soft: rgba(196, 150, 255, 0.25);
  --accent-text-on-fill: #1f1233;

  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-size: 48px;
  --orb-1: rgba(196, 150, 255, 0.18);
  --orb-2: rgba(150, 110, 255, 0.15);
  --orb-3: rgba(216, 180, 255, 0.12);
  --scanline: rgba(196, 150, 255, 0.8);

  --color-success: linear-gradient(135deg, #a8e0c8, #d8ffe8);
  --color-danger: linear-gradient(135deg, #ff8a8a, #ffc0c0);
  --color-warning: linear-gradient(135deg, #ffd76b, #ffe9a8);
  --color-info: var(--accent-gradient);
}

/* ---------- shared (theme-independent) ---------- */
:root {
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 22px;

  /* ---------- Service palette ----------
     The six colours a service can be drawn in on the calendar. Keys match
     Avacallix.Domain.ServiceColors -- "saffron" here is "saffron" there, and
     the .sw-* classes bridge the two.

     Theme-independent on purpose, like --ok and --warn above: these encode a
     tenant's own meaning ("blue is a haircut"), so they must not shift when
     the owner switches to the gold theme. Each has a -dim for block fills and
     a -lit for text and edges, because the same hue can't do both legibly on
     dark glass. */
  --svc-lajvard: #4E86E0;
  --svc-lajvard-dim: rgba(78, 134, 224, 0.30);
  --svc-lajvard-lit: #A5C8F0;

  --svc-saffron: #E9A13B;
  --svc-saffron-dim: rgba(233, 161, 59, 0.30);
  --svc-saffron-lit: #F2BE72;

  --svc-pomegranate: #D45A50;
  --svc-pomegranate-dim: rgba(212, 90, 80, 0.30);
  --svc-pomegranate-lit: #E88A84;

  --svc-pistachio: #6FBF73;
  --svc-pistachio-dim: rgba(111, 191, 115, 0.30);
  --svc-pistachio-lit: #A0DCA3;

  --svc-turquoise: #3FB6B2;
  --svc-turquoise-dim: rgba(63, 182, 178, 0.30);
  --svc-turquoise-lit: #7FD8D4;

  --svc-plum: #A277C4;
  --svc-plum-dim: rgba(162, 119, 196, 0.30);
  --svc-plum-lit: #C6A6E0;
}