/* Light theme -- semantic variables derived from brand colors */
:root.theme-light {
  /* --- Backgrounds --- */
  --bg: #f7f8fb;
  --bg-deep: #eef2f7;
  --bg-elevated: #ffffff;

  /* --- Panels --- */
  --panel: color-mix(in srgb, var(--brand-primary) 6%, rgba(15, 23, 42, 0.02));
  --panel-hover: color-mix(in srgb, var(--brand-primary) 10%, rgba(15, 23, 42, 0.04));
  --panel-active: color-mix(in srgb, var(--brand-primary) 14%, rgba(15, 23, 42, 0.06));
  --panel-strong: color-mix(in srgb, var(--brand-primary) 18%, rgba(15, 23, 42, 0.08));

  /* --- Text --- */
  --text: rgba(15, 23, 42, 0.92);
  --text-muted: rgba(15, 23, 42, 0.68);
  --text-faint: rgba(15, 23, 42, 0.42);
  --text-inverse: #f7f8fb;
  --text-bright: rgba(15, 23, 42, 0.95);

  /* --- Borders --- */
  --border: rgba(15, 23, 42, 0.14);
  --border-strong: rgba(15, 23, 42, 0.22);
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-faint: rgba(15, 23, 42, 0.05);

  /* --- Accent (primary brand) --- */
  --accent: color-mix(in srgb, var(--brand-primary) 85%, black);
  --accent-bright: var(--brand-primary);
  --accent-bg: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --accent-bg-hover: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --accent-bg-subtle: color-mix(in srgb, var(--brand-primary) 5%, transparent);
  --accent-border: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  --accent-border-hover: color-mix(in srgb, var(--brand-primary) 50%, transparent);
  --accent-glow: color-mix(in srgb, var(--brand-primary) 12%, transparent);

  /* --- Accent2 (secondary brand) --- */
  --accent2: color-mix(in srgb, var(--brand-accent) 85%, black);
  --accent2-bg: color-mix(in srgb, var(--brand-accent) 12%, transparent);
  --accent2-bg-hover: color-mix(in srgb, var(--brand-accent) 20%, transparent);
  --accent2-border: color-mix(in srgb, var(--brand-accent) 22%, transparent);
  --accent2-border-hover: color-mix(in srgb, var(--brand-accent) 45%, transparent);
  --accent2-glow: color-mix(in srgb, var(--brand-accent) 10%, transparent);

  /* --- Danger / Success / Warning / Info --- */
  --danger: color-mix(in srgb, var(--brand-danger) 85%, black);
  --danger-bg: color-mix(in srgb, var(--brand-danger) 8%, transparent);
  --danger-glow: color-mix(in srgb, var(--brand-danger) 10%, transparent);
  --success: color-mix(in srgb, var(--brand-success) 85%, black);
  --success-bg: color-mix(in srgb, var(--brand-success) 10%, transparent);
  --success-border: color-mix(in srgb, var(--brand-success) 40%, transparent);
  --warn: color-mix(in srgb, var(--brand-warn) 85%, black);
  --warn-bg: color-mix(in srgb, var(--brand-warn) 10%, transparent);
  --warn-border: color-mix(in srgb, var(--brand-warn) 40%, transparent);
  --info: color-mix(in srgb, var(--brand-info) 85%, black);
  --info-bg: color-mix(in srgb, var(--brand-info) 10%, transparent);
  --info-border: color-mix(in srgb, var(--brand-info) 40%, transparent);

  /* --- Links --- */
  --link-color: color-mix(in srgb, var(--brand-primary) 70%, black);
  --link-hover-color: color-mix(in srgb, var(--brand-primary) 55%, black);
  --link-underline: color-mix(in srgb, var(--brand-primary) 40%, transparent);
  --link-hover-underline: color-mix(in srgb, var(--brand-accent) 55%, transparent);

  /* --- Buttons --- */
  --button-bg: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --button-hover: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --button-border: color-mix(in srgb, var(--brand-accent) 22%, transparent);
  --button-hover-border: color-mix(in srgb, var(--brand-accent) 40%, transparent);

  /* --- Shadows --- */
  --shadow: 0 18px 60px rgba(15, 23, 42, 0.12);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 26px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.15);

  /* --- Overlays --- */
  --overlay: rgba(15, 23, 42, 0.08);
  --overlay-heavy: rgba(15, 23, 42, 0.75);
  --overlay-medium: rgba(15, 23, 42, 0.35);

  /* --- Focus --- */
  --focus-ring: color-mix(in srgb, var(--brand-primary) 70%, transparent);

  /* --- Gradients --- */
  --grad-h1: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 85%, black) 0%, color-mix(in srgb, var(--brand-accent) 85%, black) 60%, var(--text) 100%);
  --grad-hero: radial-gradient(1200px 700px at 20% 10%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 55%),
               radial-gradient(900px 600px at 80% 20%, color-mix(in srgb, var(--brand-accent) 6%, transparent), transparent 55%),
               linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
  --grad-card: linear-gradient(135deg, var(--panel) 0%, color-mix(in srgb, var(--brand-primary) 2%, transparent) 100%);
  --grad-card-accent: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 12%, transparent) 0%, color-mix(in srgb, var(--brand-accent) 10%, transparent) 100%);
  --grad-navbar: linear-gradient(90deg, color-mix(in srgb, var(--bg) 95%, transparent) 0%, color-mix(in srgb, var(--bg) 98%, transparent) 72%);
  --grad-navbar-pill: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg-deep) 98%, transparent) 68%);

  /* --- Layout --- */
  --radius: 18px;
  --radius2: 28px;
  --max: 1080px;

  /* --- Form elements --- */
  --input-bg: rgba(15, 23, 42, 0.04);
  --input-bg-alt: color-mix(in srgb, var(--brand-accent) 15%, #f0f0f5);
  --placeholder: rgba(15, 23, 42, 0.45);

  /* --- Tooltip --- */
  --tooltip-bg: rgba(15, 23, 42, 0.92);
}