/* ==========================================================================
   CASA FAISAL — DESIGN SYSTEM TOKENS (tokens.css)
   v3.1 — Clean Tonal Section Dividers (Google / Apple / x.ai) + Refined CF
   ========================================================================== */

:root,
[data-palette="light"] {
  /* ── Surface Hierarchy (Alternating White & Cool Tonal Bands, Zero Line Clutter) ── */
  --bg-canvas: #FFFFFF;
  --bg-band: #F3F5F8;            /* Google-style full-bleed soft tonal section band */
  --bg-subtle: #F8F9FB;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-well: #F3F5F8;
  --bg-well-hover: #E9ECF2;
  --bg-glass: rgba(255, 255, 255, 0.92);

  /* ── Typography & Ink Hierarchy ── */
  --ink: #0A0A0E;
  --ink-secondary: #3C4043;
  --ink-muted: #5F6368;
  --ink-subtle: #9AA0A6;

  /* ── Borders (Ultra-Subtle, Only Where Needed) ── */
  --line: rgba(10, 10, 14, 0.05);
  --line-strong: rgba(10, 10, 14, 0.09);

  /* ── Brand Accents: Electric Violet + Acid Lime ── */
  --accent: #7B2FFF;
  --accent-hover: #681EE8;
  --accent-fg: #FFFFFF;
  --accent-soft: #EFEAFF;        /* Google-style soft tinted pill background */
  --accent-border: rgba(123, 47, 255, 0.16);
  --accent-glow: rgba(123, 47, 255, 0.14);

  /* ── Secondary Accent: Acid Lime ── */
  --lime: #C4F538;
  --lime-ink: #0A0A0E;
  --lime-soft: #ECF9C8;
  --lime-dot: #86C200;

  /* ── Elevation & Soft Shadows ── */
  --shadow-sm: 0 1px 3px rgba(10, 10, 14, 0.04);
  --shadow-card: 0 2px 10px rgba(10, 10, 14, 0.04), 0 1px 2px rgba(10, 10, 14, 0.03);
  --shadow-hover: 0 14px 34px -8px rgba(10, 10, 14, 0.09), 0 2px 6px rgba(10, 10, 14, 0.04);
  --shadow-float: 0 24px 60px -16px rgba(10, 10, 14, 0.09), 0 2px 10px rgba(10, 10, 14, 0.04);

  /* ── Typography Family (Single Unified Sans-Serif System) ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Google Sans', sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Google Sans', sans-serif;

  /* ── Radii & Layout Metrics ── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  --max-w: 1240px;
  --pad-x: clamp(24px, 5vw, 64px);
  --nav-h: 64px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Palette 2: Monochrome Studio ── */
[data-palette="xai"] {
  --bg-canvas: #FFFFFF;
  --bg-band: #F3F4F6;
  --bg-subtle: #F7F7F8;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-well: #F3F4F6;
  --bg-well-hover: #E5E7EB;
  --bg-glass: rgba(255, 255, 255, 0.92);

  --ink: #050507;
  --ink-secondary: #374151;
  --ink-muted: #6B7280;
  --ink-subtle: #9CA3AF;

  --line: rgba(5, 5, 7, 0.05);
  --line-strong: rgba(5, 5, 7, 0.10);

  --accent: #0A0A0E;
  --accent-hover: #27272F;
  --accent-fg: #FFFFFF;
  --accent-soft: #EDEEF1;
  --accent-border: rgba(10, 10, 14, 0.14);
  --accent-glow: rgba(10, 10, 14, 0.10);

  --lime: #C4F538;
  --lime-ink: #050507;
  --lime-soft: #ECF9C8;
  --lime-dot: #86C200;
}

/* ── Palette 3: Midnight Cosmos (Dark) ── */
[data-palette="dark"] {
  --bg-canvas: #07080C;
  --bg-band: #101218;
  --bg-subtle: #0D0F14;
  --bg-surface: #151821;
  --bg-elevated: #1A1D28;
  --bg-well: #1B1F2B;
  --bg-well-hover: #232838;
  --bg-glass: rgba(7, 8, 12, 0.88);

  --ink: #F8F9FA;
  --ink-secondary: #C4C7CE;
  --ink-muted: #8E939E;
  --ink-subtle: #5A5F6B;

  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);

  --accent: #8C4BFF;
  --accent-hover: #9E66FF;
  --accent-fg: #FFFFFF;
  --accent-soft: rgba(140, 75, 255, 0.16);
  --accent-border: rgba(140, 75, 255, 0.28);
  --accent-glow: rgba(140, 75, 255, 0.25);

  --lime: #C4F538;
  --lime-ink: #07080C;
  --lime-soft: rgba(196, 245, 56, 0.14);
  --lime-dot: #C4F538;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.6);
  --shadow-float: 0 28px 64px rgba(0, 0, 0, 0.7);
}