/*
 * ══════════════════════════════════════════════════════════════
 * Splenda Central Theme Tokens
 * Single source of truth for colors/shadows/radii across every
 * public page (main app, superadmin, legal pages, login).
 *
 * Update this file to rethemes ALL public pages in lockstep.
 * Do NOT redefine these variables in page-specific stylesheets.
 * ══════════════════════════════════════════════════════════════
 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-vh: 100dvh;

  /* Surfaces */
  --bg: #131620;
  --surface: #1a1f2e;
  --raised: #232a3b;
  --sunken: #0f1219;

  /* Text */
  --ink: #e4e4f0;
  --ink-secondary: #9d9db8;
  --muted: #6c6c8a;

  /* Accent — dark blue */
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-glow: rgba(59, 130, 246, 0.25);

  /* Semantic colors */
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --red: #f87171;
  --red-soft: rgba(248, 113, 113, 0.12);
  --blue: #60a5fa;
  --blue-soft: rgba(96, 165, 250, 0.12);
  --amber: #fbbf24;

  /* Lines / borders */
  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.1);
  --tag-bg: rgba(255, 255, 255, 0.05);
  --tag-border: rgba(255, 255, 255, 0.08);

  /* Shadows */
  --shadow-up: 6px 6px 20px rgba(0, 0, 0, 0.5), -4px -4px 14px rgba(60, 60, 100, 0.06);
  --shadow-inset: inset 3px 3px 8px rgba(0, 0, 0, 0.4), inset -2px -2px 6px rgba(60, 60, 100, 0.05);

  /* Shape / motion */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar */
  --sidebar-bg: #0d1017;
  --sidebar-width: 224px;
  --sidebar-border: rgba(59, 130, 246, 0.08);

  /* Aliases (legacy names kept for compatibility) */
  --border: var(--line-strong);
  --bg-secondary: var(--sunken);
  --bg-primary: var(--bg);
  --panel: var(--raised);
  --panel-border: var(--line);
  --text: var(--ink);
  --text-soft: var(--ink-secondary);

  /* Compatibility aliases used by inline modal styles */
  --bg-elev: var(--surface);
  --bg-muted: rgba(255, 255, 255, 0.04);
  --danger: var(--red);
}

@supports (height: 100svh) {
  :root {
    --app-vh: 100svh;
  }
}

body[data-theme="light"] {
  --bg: #f0f2f7;
  --surface: #f8f9fc;
  --raised: #ffffff;
  --sunken: #e6e9f2;

  --ink: #1f2640;
  --ink-secondary: #495371;
  --muted: #76809b;

  /* Light-mode accent — same blue family, slightly deeper for contrast */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --accent-glow: rgba(37, 99, 235, 0.18);

  --line: rgba(20, 30, 55, 0.07);
  --line-strong: rgba(20, 30, 55, 0.12);
  --tag-bg: rgba(20, 30, 55, 0.04);
  --tag-border: rgba(20, 30, 55, 0.1);

  --shadow-up: 8px 8px 20px rgba(140, 152, 180, 0.15), -6px -6px 16px rgba(255, 255, 255, 0.9);
  --shadow-inset: inset 3px 3px 8px rgba(163, 176, 205, 0.2), inset -2px -2px 6px rgba(255, 255, 255, 0.85);

  --sidebar-bg: #e8eaf4;
  --sidebar-border: rgba(37, 99, 235, 0.08);

  --border: var(--line-strong);
  --bg-secondary: var(--sunken);
  --bg-primary: var(--bg);
  --panel: var(--raised);
  --panel-border: var(--line);
  --text: var(--ink);
  --text-soft: var(--ink-secondary);

  /* Compatibility aliases used by inline modal styles */
  --bg-elev: var(--surface);
  --bg-muted: rgba(20, 30, 55, 0.04);
  --danger: var(--red);
}