/* Copyright 2026 Adibyte Ltd. SPDX-License-Identifier: Apache-2.0 */
/**
 * Adibyte Design System — light theme
 * -----------------------------------
 * Overrides for `design-tokens.css` when `<html data-theme="light">`.
 * Every name here MUST exist in the base file; `npm run design:build`
 * enforces it. Component code never branches on theme: it reads the same
 * `--ab-*` names and the values change underneath it.
 *
 * What changes and why:
 *  - Neutrals invert: canvas becomes a cool off-white, surfaces white.
 *  - Glass flips polarity. On dark, glass is a faint WHITE veil; on light it
 *    is a stronger white veil (the fill ceiling rises) with a DARK hairline
 *    rim, since a white rim on a pale canvas is invisible. Brightness lift
 *    is dropped: the surface behind is already bright.
 *  - Shadows lose weight and take a slate tint instead of pure black.
 *  - Text and status colours step darker to hold 4.5:1 on white. Indigo
 *    stays: it is already 6:1 against white and white-on-indigo.
 *  - Aluminium is unchanged. It is opaque and carries its own ink, so it
 *    reads on either canvas.
 *
 * Keep this file in lockstep with `design-tokens.print.css`: print is the
 * same values inside `@media print`. The build fails if they drift.
 */

:root[data-theme="light"] {
  /* Neutrals */
  --ab-canvas: #f6f7fb;
  --ab-canvas-elevated: #eef0f6;
  --ab-surface: #ffffff;
  --ab-surface-glass: #ffffff;
  --ab-surface-drawer: rgba(255, 255, 255, 0.96);

  /* Accent: text-on-white variants step darker */
  --ab-accent-light: #4338ca;
  --ab-secondary-light: #0e7490;

  /* Text */
  --ab-text: #0b0b12;
  --ab-text-muted: #475569;
  --ab-text-subtle: #64748b;

  /* Borders */
  --ab-border: #dfe3ec;
  --ab-border-strong: #c7cddb;
  --ab-glass-fill: rgba(255, 255, 255, 0.55);
  --ab-glass-fill-hover: rgba(255, 255, 255, 0.7);
  --ab-border-hairline: rgba(11, 11, 18, 0.06);
  --ab-border-glass: rgba(11, 11, 18, 0.08);
  --ab-border-control: rgba(11, 11, 18, 0.16);
  --ab-border-outlined: rgba(11, 11, 18, 0.24);

  /* Status */
  --ab-success: #047857;
  --ab-success-border: rgba(4, 120, 87, 0.3);
  --ab-success-fill: rgba(4, 120, 87, 0.08);
  --ab-warning: #b45309;
  --ab-warning-border: rgba(180, 83, 9, 0.3);
  --ab-warning-fill: rgba(180, 83, 9, 0.08);
  --ab-danger: #b91c1c;
  --ab-danger-border: rgba(185, 28, 28, 0.3);
  --ab-danger-fill: rgba(185, 28, 28, 0.07);
  --ab-info: #0e7490;
  --ab-info-border: rgba(14, 116, 144, 0.3);
  --ab-info-fill: rgba(14, 116, 144, 0.08);

  /* Liquid glass */
  --ab-glass-fill-thin: rgba(255, 255, 255, 0.42);
  --ab-glass-fill-default: rgba(255, 255, 255, 0.62);
  --ab-glass-fill-thick: rgba(255, 255, 255, 0.78);
  --ab-glass-fill-dense: rgba(255, 255, 255, 0.9);
  --ab-glass-optic:
    radial-gradient(
      90% 120% at 4% -12%,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(129, 140, 248, 0.14) 26%,
      transparent 54%
    ),
    radial-gradient(
      85% 100% at 108% 105%,
      rgba(34, 211, 238, 0.12) 0%,
      rgba(79, 70, 229, 0.06) 36%,
      transparent 70%
    );
  --ab-glass-optic-strong:
    radial-gradient(
      95% 120% at 4% -12%,
      rgba(255, 255, 255, 1) 0%,
      rgba(129, 140, 248, 0.18) 28%,
      transparent 56%
    ),
    radial-gradient(
      90% 105% at 108% 105%,
      rgba(34, 211, 238, 0.15) 0%,
      rgba(79, 70, 229, 0.08) 38%,
      transparent 72%
    );
  --ab-glass-filter-raised: blur(18px) saturate(155%) brightness(102%);
  --ab-glass-filter-header: blur(22px) saturate(160%) brightness(102%);
  --ab-glass-filter-overlay: blur(28px) saturate(170%) brightness(103%);
  --ab-glass-rim: rgba(79, 70, 229, 0.16);
  --ab-glass-rim-strong: rgba(79, 70, 229, 0.24);
  --ab-glass-rim-gradient: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(129, 140, 248, 0.5) 28%,
    rgba(79, 70, 229, 0.2) 55%,
    rgba(6, 182, 212, 0.34) 80%,
    rgba(255, 255, 255, 0.7) 100%
  );
  --ab-glass-rim-gradient-strong: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(129, 140, 248, 0.62) 28%,
    rgba(79, 70, 229, 0.28) 55%,
    rgba(6, 182, 212, 0.42) 80%,
    rgba(255, 255, 255, 0.78) 100%
  );
  --ab-specular-top:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(79, 70, 229, 0.06);
  --ab-specular-top-strong:
    inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(79, 70, 229, 0.08);
  --ab-shadow-glass-raised:
    0 1px 2px rgba(30, 41, 59, 0.12), 0 10px 24px rgba(30, 41, 59, 0.1);
  --ab-shadow-glass-header:
    0 1px 2px rgba(30, 41, 59, 0.14), 0 8px 24px rgba(30, 41, 59, 0.12);
  --ab-shadow-glass-overlay:
    0 2px 4px rgba(30, 41, 59, 0.16), 0 20px 48px rgba(30, 41, 59, 0.18);
  --ab-shadow-glass-hover:
    0 2px 4px rgba(30, 41, 59, 0.14), 0 16px 36px rgba(30, 41, 59, 0.16);

  /* Fields, menus, tables */
  --ab-field-border-hover: rgba(79, 70, 229, 0.55);
  --ab-field-well: inset 0 1px 3px rgba(11, 11, 18, 0.12);
  --ab-text-disabled: rgba(71, 85, 105, 0.5);
  --ab-accent-fill: rgba(79, 70, 229, 0.1);
  --ab-accent-fill-strong: rgba(79, 70, 229, 0.18);
  --ab-focus-outline: 2px solid #4f46e5;
  --ab-scrim: rgba(15, 23, 42, 0.38);
  --ab-table-header-fill: rgba(11, 11, 18, 0.035);
  --ab-table-row-hover: rgba(11, 11, 18, 0.035);
  --ab-table-divider: rgba(11, 11, 18, 0.08);
  --ab-menu-item-hover: rgba(11, 11, 18, 0.05);
  --ab-menu-divider: rgba(11, 11, 18, 0.1);

  /* Backdrop: the aurora, softened for a light canvas */
  --ab-backdrop-aurora:
    radial-gradient(
      ellipse 60% 45% at 15% 40%,
      rgba(79, 70, 229, 0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 15%,
      rgba(6, 182, 212, 0.09) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 45% at 70% 85%,
      rgba(129, 140, 248, 0.08) 0%,
      transparent 60%
    );
  --ab-grain-opacity: 0.02;
}