/* ============================================================
 * tokens.css — Acid Lime Design System Tokens
 * XPlus Technologies Website Redesign
 *
 * Design tokens define the visual language of the brand:
 * colors, typography, spacing, radii, shadows, and motion.
 * All component and animation styles reference these tokens.
 * ============================================================ */

/* ----- Light Theme (default) ----- */

:root {

  /* --- Backgrounds --- */
  --bg: #FAFBF4;
  --surface: #FFFFFF;
  --surface-2: #F1F4E4;
  --surface-3: #E4E9CC;
  --elevated: #FFFFFF;

  /* --- Typography Colors --- */
  --text: #07090A;
  --text-strong: #000000;
  --text-muted: #4A5440;
  --text-subtle: #6B7565;

  /* --- Borders --- */
  --border: #C9D4AC;
  --border-strong: #9AAE72;
  --border-subtle: #E8EDD6;

  /* --- Primary Palette --- */
  --primary: #0A0F08;
  --primary-hover: #000000;
  --primary-soft: #E8ECE0;
  --primary-contrast: #BEF264;

  /* --- Accent Palette --- */
  --accent: #65A30D;
  --accent-hover: #4D7C0F;
  --accent-soft: #ECFCCB;
  --accent-glow: #84CC16;

  /* --- Highlight / Glow --- */
  --highlight: #BEF264;
  --highlight-soft: #F0FDE8;
  --glow: #BEF264;

  /* --- Semantic Colors --- */
  --success: #16A34A;
  --warning: #EA580C;
  --danger: #DC2626;
  --info: #0369A1;

  /* --- Typography Stacks --- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Geist", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Fraunces", "Playfair Display", Georgia, serif;

  /* --- Border Radii --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* --- Spacing Scale (4px base) --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(7,9,10,0.04);
  --shadow-md: 0 4px 12px rgba(7,9,10,0.06);
  --shadow-lg: 0 12px 32px rgba(7,9,10,0.08);
  --shadow-glow: 0 0 24px color-mix(in oklab, var(--glow) 28%, transparent);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 400ms;
}

/* ----- Dark Theme ----- */

[data-theme="dark"] {

  /* --- Backgrounds --- */
  --bg: #050803;
  --surface: #0B100A;
  --surface-2: #141B11;
  --surface-3: #1F2818;
  --elevated: #1A2213;

  /* --- Typography Colors --- */
  --text: #E8F0DB;
  --text-strong: #F5FCE4;
  --text-muted: #8B9870;
  --text-subtle: #6B7758;

  /* --- Borders --- */
  --border: #2A3518;
  --border-strong: #455828;
  --border-subtle: #1A2213;

  /* --- Primary Palette --- */
  --primary: #BEF264;
  --primary-hover: #D9F99D;
  --primary-soft: #1F2908;
  --primary-contrast: #050803;

  /* --- Accent Palette --- */
  --accent: #A3E635;
  --accent-hover: #BEF264;
  --accent-soft: #19200A;
  --accent-glow: #D9F99D;

  /* --- Highlight / Glow --- */
  --highlight: #D9F99D;
  --highlight-soft: #141B0A;
  --glow: #BEF264;

  /* --- Semantic Colors --- */
  --success: #4ADE80;
  --warning: #FB923C;
  --danger: #F87171;
  --info: #38BDF8;

  /* --- Shadows (deeper for dark mode) --- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 24px color-mix(in oklab, var(--glow) 35%, transparent);
}