/* ══ DIVSA OS Design System Tokens (Phase 4) ══════════════════════════════════
   This file acts as the single source of truth for all primitive and semantic
   design tokens in DIVSA. Do NOT hardcode colors in component stylesheets.
   These tokens are dynamically overridden by the DIVSA Admin Control Panel. */

:root {
  /* Primitive Brand Colors */
  --tap-purple: #6109be; 
  --tap-purple-deep: #4a0090; 
  --tap-purple-pale: #f0e8fd;
  --tap-marigold: #f99000; 
  --tap-marigold-deep: #db8400;
  --tap-terracotta: #d75c27; 
  --tap-chocolate: #5e3023;
  --tap-saffron: #FF8C00; 
  --tap-sindoor: #E03B3B;
  --tap-lotus: #F4A0B5; 
  --tap-ganga: #4A9EBF;
  --tap-turmeric: #F5C842; 
  --tap-gold-light: #FFF8E7;
  
  /* Multi-stop metallic gold tokens */
  --tap-gold-stop-1: #BF953F; 
  --tap-gold-stop-2: #FCF6BA; 
  --tap-gold-stop-3: #B38728; 
  --tap-gold-stop-4: #FBF5B7; 
  --tap-gold-stop-5: #AA771C;
  
  /* Gradients */
  --grad-gold-multistop: linear-gradient(135deg, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%);
  --grad-gold-metallic: linear-gradient(90deg, #d4af37 0%, #fff3a8 30%, #f99000 70%, #aa771c 100%);
  --grad-sacred: linear-gradient(135deg, var(--tap-purple, #6109be) 0%, var(--tap-terracotta, #d75c27) 100%);
  --grad-gold: linear-gradient(135deg, var(--tap-marigold, #f99000) 0%, #f5c842 100%);
  --grad-dawn: linear-gradient(135deg, var(--tap-saffron, #FF8C00) 0%, var(--tap-purple, #6109be) 100%);
  --grad-night: linear-gradient(180deg, #0D0820 0%, #1A0A40 100%);
  
  /* Base & Surfaces */
  --tap-ink: #1e0a2e; 
  --tap-muted: #6b5b78;
  --tap-line: #ece6f2; 
  --tap-bg: #faf7fd; 
  --tap-card: #fff;
  
  /* Semantics */
  --tap-ok: #1a7d3c; 
  --tap-ok-pale: #e8f8ee; 
  --tap-gold-dark: #3a2400; 
  --tap-warn-bg: #fff4e7; 
  --tap-warn-fg: #854f0b; 
  --tap-warn: #c9851b; 
  --tap-err: #c0392b;
  
  /* 3-Tier Elevation Shadows */
  --tap-shadow-sm: 0 2px 8px rgba(30,10,46,.06), 0 1px 3px rgba(97,9,190,.04);
  --tap-shadow-md: 0 6px 20px rgba(30,10,46,.10), 0 2px 6px rgba(97,9,190,.06);
  --tap-shadow-lg: 0 16px 48px rgba(30,10,46,.16), 0 4px 12px rgba(97,9,190,.10);
  --tap-shadow: var(--tap-shadow-md);
  --tap-shadow-xl: var(--tap-shadow-lg);
  --tap-shadow-gold: 0 6px 24px rgba(249,144,0,.28), 0 2px 8px rgba(176,119,28,.15);
  --tap-glow: 0 0 0 3px rgba(97,9,190,.15);
  
  /* Radius & Motion */
  --tap-radius: 18px; 
  --tap-radius-sm: 10px; 
  --tap-radius-xl: 28px;
  --tap-radius-full: 999px;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 150ms; 
  --dur-std: 250ms; 
  --dur-slow: 400ms;
  
  /* Z-Index & Measurements */
  --zi-base: 1; 
  --zi-nav: 100; 
  --zi-sticky: 500; 
  --zi-overlay: 1000; 
  --zi-modal: 5000; 
  --zi-toast: 10000;
  --nav-h: 64px;
  
  /* Spacing Scale */
  --tap-space-1: 4px;  
  --tap-space-2: 8px;  
  --tap-space-3: 12px; 
  --tap-space-4: 16px;
  --tap-space-5: 20px; 
  --tap-space-6: 24px; 
  --tap-space-8: 32px; 
  --tap-space-10: 40px;
  
  /* Typography Scale */
  --tap-fs-scale: 1;
  --tap-fs-xs: calc(11px * var(--tap-fs-scale));
  --tap-fs-sm: calc(13px * var(--tap-fs-scale));
  --tap-fs-md: calc(15px * var(--tap-fs-scale));
  --tap-fs-base: calc(16px * var(--tap-fs-scale));
  --tap-fs-lg: calc(18px * var(--tap-fs-scale));
  --tap-fs-xl: calc(22px * var(--tap-fs-scale));
  
  /* Component Roles */
  --tap-btn-radius: var(--tap-radius-full); 
  --tap-btn-pad-y: 12px; 
  --tap-btn-pad-x: 22px; 
  --tap-btn-weight: 700;
  --tap-surface: var(--tap-card); 
  --tap-card-shadow: var(--tap-shadow);
  --tap-border: var(--tap-line); 
  --tap-text: var(--tap-ink); 
  --tap-text-muted: var(--tap-muted);
}

/* Midnight Temple Dark Mode (OS preference & explicit dark/midnight class) */
@media (prefers-color-scheme: dark) {
  :root {
    --tap-bg: #0B0614;
    --tap-card: #150A24;
    --tap-surface: #150A24;
    --tap-ink: #F5EFFC;
    --tap-text: #F5EFFC;
    --tap-muted: #A694B8;
    --tap-text-muted: #A694B8;
    --tap-line: #2C1647;
    --tap-border: #2C1647;
    --tap-gold-light: #2E1E05;
    --tap-purple-pale: #230E38;
    --tap-shadow-sm: 0 2px 10px rgba(0,0,0,.45);
    --tap-shadow-md: 0 8px 28px rgba(0,0,0,.55);
    --tap-shadow-lg: 0 16px 56px rgba(0,0,0,.70);
  }
}

.tap-dark, [data-theme="dark"], body.tap-theme-midnight {
  --tap-bg: #0B0614; 
  --tap-card: #150A24; 
  --tap-surface: #150A24;
  --tap-ink: #F5EFFC; 
  --tap-text: #F5EFFC; 
  --tap-muted: #A694B8;
  --tap-line: #2C1647; 
  --tap-border: #2C1647; 
  --tap-purple-pale: #230E38;
}