/*!
 * ZIC Theme — Layer 2 · Light palette (the default)
 * ============================================================================
 *
 * Light values, applied to `:root` so they are also the fallback when neither
 * theme class nor `data-bs-theme` has been written yet (first paint, JS off).
 *
 * Depth model: the canvas is a soft off-white (#FAFAFA) and content is raised
 * onto pure white (#FFFFFF). Recessed chrome (table heads, wells) drops to
 * #F5F5F5. Shadows carry the elevation, at 8-12% opacity so the page reads as
 * paper rather than as a set of boxes.
 *
 * All `-text` values are >= 4.5:1 against every surface above; all `-fill`
 * values are >= 4.5:1 against their `-contrast`. See docs/UI_THEME_GUIDE.md.
 */

:root,
[data-bs-theme="light"],
html.light-style {
  color-scheme: light;

  /* ---------------------------------------------------------------------
   * Surfaces
   * ------------------------------------------------------------------ */
  --zic-surface-primary: #ffffff;          /* raised: cards, panels, navbar, sidebar */
  --zic-surface-primary-rgb: 255, 255, 255;
  --zic-surface-secondary: #fafafa;        /* canvas behind the raised surface       */
  --zic-surface-secondary-rgb: 250, 250, 250;
  --zic-surface-elevated: #ffffff;         /* floating: dropdown, modal, popover     */
  --zic-surface-elevated-rgb: 255, 255, 255;
  --zic-surface-tertiary: #f5f5f5;         /* recessed: table heads, wells           */
  --zic-surface-tertiary-rgb: 245, 245, 245;
  --zic-surface-overlay: rgba(15, 23, 42, 0.45);

  /* ---------------------------------------------------------------------
   * Text
   * ------------------------------------------------------------------ */
  --zic-text-primary: #1a1a1a;             /* 17.4:1 on white                     */
  --zic-text-primary-rgb: 26, 26, 26;
  --zic-text-secondary: #4a4a4a;           /*  8.9:1 on white                     */
  --zic-text-secondary-rgb: 74, 74, 74;
  --zic-text-disabled: #8c8c8c;            /* non-text per WCAG 1.4.3             */
  --zic-text-inverse: #ffffff;             /* text on a dark/coloured fill        */

  /* A disabled control at 0.5 on light still reads. Dark needs a little more,
     because the control and the surface behind it are closer in luminance. */
  --zic-control-disabled-opacity: 0.5;

  /* ---------------------------------------------------------------------
   * Borders
   * ------------------------------------------------------------------ */
  --zic-border-default: #e5e7eb;
  --zic-border-strong: #cbd5e1;
  --zic-border-focus: #3b82f6;

  /* ---------------------------------------------------------------------
   * Brand & interactive blues
   * ------------------------------------------------------------------ */
  --zic-primary: #1e40af;                  /*  8.7:1 on white — icons, borders    */
  --zic-primary-rgb: 30, 64, 175;
  --zic-primary-text: #1e40af;             /*  8.7:1 on white — links, labels     */
  --zic-primary-hover: #1d4ed8;            /*  6.7:1 on white                     */
  --zic-primary-active: #1e3a8a;
  --zic-primary-fill: #1e40af;             /* white on this:  8.7:1               */
  --zic-primary-contrast: #ffffff;
  --zic-accent: #3b82f6;                   /* decorative only — 3.7:1 on white    */

  /* ---------------------------------------------------------------------
   * Status — semantic only. Never style a business state with a raw hex.
   * ------------------------------------------------------------------ */
  --zic-status-success: #059669;           /* 3.8:1 — icons, borders, non-text    */
  --zic-status-success-rgb: 5, 150, 105;
  --zic-status-success-text: #047857;      /* 5.5:1 on white — AA for text        */
  --zic-status-success-fill: #047857;      /* white on this: 5.5:1                */
  --zic-status-success-contrast: #ffffff;
  --zic-status-success-bg-subtle: #ecfdf5;
  --zic-status-success-border-subtle: #a7f3d0;

  --zic-status-warning: #d97706;
  --zic-status-warning-rgb: 217, 119, 6;
  --zic-status-warning-text: #b45309;      /* 5.0:1 on white                      */
  --zic-status-warning-fill: #b45309;      /* white on this: 5.0:1                */
  --zic-status-warning-contrast: #ffffff;
  --zic-status-warning-bg-subtle: #fffbeb;
  --zic-status-warning-border-subtle: #fde68a;

  --zic-status-danger: #dc2626;
  --zic-status-danger-rgb: 220, 38, 38;
  --zic-status-danger-text: #b91c1c;       /* 6.5:1 on white                      */
  --zic-status-danger-fill: #dc2626;       /* white on this: 4.8:1                */
  --zic-status-danger-contrast: #ffffff;
  --zic-status-danger-bg-subtle: #fef2f2;
  --zic-status-danger-border-subtle: #fecaca;

  --zic-status-info: #1e40af;
  --zic-status-info-rgb: 30, 64, 175;
  --zic-status-info-text: #1e40af;         /* 8.7:1 on white                      */
  --zic-status-info-fill: #1e40af;         /* white on this: 8.7:1                */
  --zic-status-info-contrast: #ffffff;
  --zic-status-info-bg-subtle: #eff6ff;
  --zic-status-info-border-subtle: #bfdbfe;

  --zic-status-neutral: #64748b;
  --zic-status-neutral-rgb: 100, 116, 139;
  --zic-status-neutral-text: #475569;      /* 7.6:1 on white                      */
  --zic-status-neutral-fill: #64748b;      /* white on this: 4.8:1                */
  --zic-status-neutral-contrast: #ffffff;
  --zic-status-neutral-bg-subtle: #f1f5f9;
  --zic-status-neutral-border-subtle: #e2e8f0;

  /* ---------------------------------------------------------------------
   * Toast close glyph.
   *
   * Bootstrap's `.btn-close` is a baked-in SVG: a near-black ✕ that cannot be
   * recoloured through `color`. Every `-fill` above is dark in this theme, so
   * the stock glyph is invisible on a solid toast. This is the same path as
   * Bootstrap's own, drawn in the AA contrast colour of the fills.
   * ------------------------------------------------------------------ */
  --zic-toast-close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

  /* ---------------------------------------------------------------------
   * Interactive states — translucent so they layer over any surface.
   * ------------------------------------------------------------------ */
  --zic-interactive-hover: rgba(30, 64, 175, 0.05);
  --zic-interactive-active: rgba(30, 64, 175, 0.1);
  /* 0.9, not a whisper. The ring has to be *visible*: WCAG 1.4.11 asks for 3:1
     against what it sits on, and a 45%-alpha blue over white composites to
     1.72:1 — measured, not estimated. At 0.9 it composites to 3.21:1. */
  --zic-interactive-focus-ring: rgba(59, 130, 246, 0.9);

  /* ---------------------------------------------------------------------
   * Typography.
   *
   * Inline code does NOT sit on `--zic-surface-secondary` as briefed: that is
   * the canvas, and inside a white card #FAFAFA against #FFFFFF is 1.03:1 —
   * an invisible chip. Tinting the same surface toward the ink keeps the
   * brief's base and works on every surface in both themes, which is the
   * technique `components.css` already uses for `.zic-skeleton`.
   *
   * The code ink is a deep violet rather than the shell's pink: #E83E8C is
   * 3.66:1 on that background and fails WCAG AA for text.
   * ------------------------------------------------------------------ */
  --zic-code-bg: color-mix(in srgb, var(--zic-text-primary) 8%, var(--zic-surface-secondary));
  --zic-code-text: #6d28d9;                /*  6.8:1 on the code chip          */

  --zic-kbd-bg: var(--zic-surface-primary);
  --zic-kbd-text: var(--zic-text-primary);
  --zic-kbd-border: var(--zic-border-strong);

  --zic-highlight-bg: #fef3c7;             /* amber wash for <mark>            */
  --zic-highlight-text: #422006;           /* 13.1:1 on it                     */

  /* "Slightly darker" than the resting link, per the brief. Dark mode uses a
     desaturated blue instead: darker on a dark surface loses contrast rather
     than gaining it, and would read as a disabled link. */
  --zic-link-visited: #1e3a8a;             /* 10.4:1 on white                  */

  /* Tooltip surface — deliberately inverted against the page, which is the one
     place a floating surface should *not* sit on the elevation scale. The
     shell's own `--bs-tooltip-bg` is a hardcoded #1A0E33: on a dark page that
     is 1.24:1 against the surface behind it, so the tooltip reads as a smudge
     rather than as a layer. Inverting gives 17.4:1 separation on light and
     11.5:1 on dark, with the text at 18.2:1 / 13.4:1. */
  --zic-tooltip-bg: #1a1a1a;
  --zic-tooltip-text: #ffffff;

  /* ---------------------------------------------------------------------
   * Shadows — 8-12% ink. Elevation on light paper is subtle by design.
   * ------------------------------------------------------------------ */
  --zic-shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.08);
  --zic-shadow-md:
    0 4px 6px -1px rgba(15, 23, 42, 0.1),
    0 2px 4px -2px rgba(15, 23, 42, 0.08);
  --zic-shadow-lg:
    0 10px 15px -3px rgba(15, 23, 42, 0.1),
    0 4px 6px -4px rgba(15, 23, 42, 0.08);
  --zic-shadow-xl:
    0 20px 25px -5px rgba(15, 23, 42, 0.12),
    0 8px 10px -6px rgba(15, 23, 42, 0.1);
}