/* =======================================================
   SIYAGHA THEME VARIABLES (Tokens)
   ======================================================= */

:root {
  /* =========================================================
     TIER 1: GLOBAL PALETTE (Literal Colors - Never changes)
     ========================================================= */
  --white: #ffffff;
  --gradient: radial-gradient(
    circle,
    var(--brand-500) 47%,
    var(--brand-600) 100%
  );
  --gray-50: #f7f8fb;
  --gray-200: #e5e7eb;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #525252;
  --gray-700: #454545;
  --gray-800: #333333;
  --gray-900: #282828;
  --gray-950: #181818;

  --brand-500: #37a0a0; /* Primary */
  --brand-600: #2a7a8a; /* Light hover */
  --brand-700: #2e808f; /* Dark hover */
  --brand-soft-light: rgba(59, 161, 179, 0.1);
  --brand-soft-dark: rgba(59, 161, 179, 0.15);

  --green-400: #34d399;
  --green-800: #076b51;

  --amber-400: #ffb702;
  --amber-900: #893000;

  --red-400: #ff6a6a;
  --red-900: #450a0a;

  /* =========================================================
     TIER 2: SEMANTIC TOKENS (Dark Theme - Default)
     ========================================================= */

  /* --- Typography --- */
  --font-main: "Tajawal", sans-serif;

  /* --- Backgrounds --- */
  --bg-body: var(--gray-900);
  --bg-panel: var(--gray-800);
  --bg-surface: var(--gray-700);
  --bg-footer: var(--gray-900);

  /* --- Brand Accent --- */
  --accent: var(--brand-500);
  --accent-hover: var(--brand-700);
  --accent-soft: var(--brand-soft-dark);

  /* --- Text & Borders --- */
  --border: var(--gray-800);
  --text-main: var(--gray-200);
  --text-muted: var(--gray-400);

  /* --- Status Indicators --- */
  --success: var(--green-800);
  --success-text: var(--green-400);

  --warning: var(--amber-900);
  --warning-text: var(--amber-900);

  --danger: var(--red-900);
  --danger-text: var(--red-400);

  /* --- Shadows (Brutalist style for Dark Mode) --- */

  /* --- Layout & Utilities --- */
  --container-width: 1200px;
  --transition: 0.3s ease;
  --radius-12: 12px;
}

/* =======================================================
   LIGHT THEME OVERRIDES (Semantic Tokens Only)
   ======================================================= */
[data-theme="light"] {
  /* Backgrounds */
  --bg-body: var(--gray-50);
  --bg-surface: var(--white);
  --bg-panel: var(--white);

  /* Brand Accent */
  --accent-hover: var(--brand-600);
  --accent-soft: var(--brand-soft-light);

  /* Text & Borders */
  --border: var(--gray-200);
  --text-main: var(--gray-950);
  --text-muted: var(--gray-500);

  /* Shadows (Softer style for Light Mode) */
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  --shadow-3: 0 1px 1px var(--accent), 0 2px 6px var(--accent);
}