/**
 * ALKemy Design Tokens
 * 
 * Centralized CSS custom properties extracted from app icon visual DNA.
 * Use @layer for Tailwind conflict isolation per ADR-105 CR-1.
 * 
 * @see .ai_handoffs/plans/ADR-105_ALKEMY_FULL_UI_REDESIGN_SPECIFICATION.md
 */

@layer alkemy-design {
  :root {
    /* ==========================================================================
       Backgrounds
       ========================================================================== */
    --bg-primary: #0a1628;
    --bg-secondary: #0d2035;
    --bg-card: rgba(255, 255, 255, 0.05);
    --bg-card-hover: rgba(255, 255, 255, 0.08);
    --bg-overlay: rgba(10, 22, 40, 0.8);

    /* ==========================================================================
       Accent Colors (from app icon)
       ========================================================================== */
    --accent-primary: #00d4ff;      /* Electric Cyan */
    --accent-secondary: #00b4d8;    /* Teal Glow */
    --accent-tertiary: #0077b6;     /* Deep Teal */

    /* ==========================================================================
       Status Colors
       ========================================================================== */
    --status-success: #00ff88;      /* Reef Green */
    --status-warning: #ff9f1c;      /* Coral Orange */
    --status-danger: #ff4757;       /* Alert Red */

    /* ==========================================================================
       Text Colors
       CR-2: --text-muted uses #6b7280 for WCAG AA compliance (4.54:1 contrast)
       Original spec #4a5568 had only 3.39:1 contrast ratio.
       ========================================================================== */
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;      /* Silver Mist */
    --text-muted: #6b7280;          /* WCAG AA compliant gray */

    /* ==========================================================================
       Chart Colors (per ADR-105 Section 2.2)
       ========================================================================== */
    --chart-ph: #00d4ff;            /* Cyan */
    --chart-salinity: #ffd93d;      /* Yellow */
    --chart-temperature: #00ff88;   /* Green */
    --chart-calcium: #ff6b6b;       /* Coral */
    --chart-alkalinity: #a855f7;    /* Purple */
    --chart-magnesium: #f97316;     /* Orange */
    --chart-grid: rgba(255, 255, 255, 0.1);

    /* ==========================================================================
       Borders
       ========================================================================== */
    --border-card: rgba(0, 212, 255, 0.2);
    --border-glow: rgba(0, 212, 255, 0.4);
    --border-subtle: rgba(255, 255, 255, 0.1);

    /* ==========================================================================
       Shadows
       ========================================================================== */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.15);
    --shadow-button: 0 4px 15px rgba(0, 212, 255, 0.3);
    --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-panel-hover: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --shadow-text-glow: 0 0 12px rgba(0, 212, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.2), 0 1px 4px rgba(0, 0, 0, 0.7);
    --shadow-text-subtle: 0 0 8px rgba(0, 212, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.6);
    --shadow-icon-glow: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.25)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
    --shadow-icon-glow-hover: drop-shadow(0 0 14px rgba(0, 212, 255, 0.6)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.35)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));

    /* ==========================================================================
       Border Radius
       ========================================================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ==========================================================================
       Transitions
       ========================================================================== */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* ==========================================================================
       Spacing
       ========================================================================== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* ==========================================================================
       Typography
       ========================================================================== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Font Sizes */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 48px;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Letter Spacing */
    --tracking-tight: -0.5px;
    --tracking-normal: 0;
    --tracking-wide: 0.3px;
    --tracking-wider: 0.5px;

    /* ==========================================================================
       Z-Index Scale
       ========================================================================== */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    --z-notification: 600;

    /* ==========================================================================
       Glassmorphism Properties
       ========================================================================== */
    --glass-blur: 10px;
    --glass-background: rgba(255, 255, 255, 0.05);
    --glass-background-hover: rgba(255, 255, 255, 0.08);

    /* ==========================================================================
       Gradient Presets
       ========================================================================== */
    --gradient-primary: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-tertiary) 100%);
    --gradient-ocean: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    --gradient-glow: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.15) 0%, transparent 70%);
  }

  body.alkemy-light {
    background-color: var(--bg-primary);
    color: var(--text-primary);

    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-overlay: rgba(248, 250, 252, 0.9);
    
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    
    --border-card: rgba(0, 0, 0, 0.1);
    --border-glow: rgba(0, 150, 200, 0.3);
    --border-subtle: rgba(0, 0, 0, 0.05);

    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 15px rgba(0, 150, 200, 0.1);
    --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --shadow-panel-hover: 0 12px 32px rgba(0, 0, 0, 0.12), 0 0 16px rgba(0, 150, 200, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    --shadow-text-glow: none;
    --shadow-text-subtle: none;
    --shadow-icon-glow: drop-shadow(0 2px 4px rgba(0, 150, 200, 0.2));
    --shadow-icon-glow-hover: drop-shadow(0 4px 8px rgba(0, 150, 200, 0.3));

    --gradient-ocean: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    --gradient-primary: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%);
  }

  body.alkemy-solid-dark {
    background-color: var(--bg-primary);
    color: var(--text-primary);

    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-card: #1a1a1a;
    --bg-card-hover: #242424;
    --bg-overlay: rgba(0, 0, 0, 0.9);
    
    --border-card: rgba(255, 255, 255, 0.1);
    --border-glow: rgba(255, 255, 255, 0.2);
    --border-subtle: rgba(255, 255, 255, 0.05);

    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.1);
    --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --shadow-panel-hover: 0 12px 48px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 255, 255, 0.1);
    --shadow-text-glow: none;
    --shadow-text-subtle: none;
    --shadow-icon-glow: none;
    --shadow-icon-glow-hover: drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));

    --gradient-ocean: none;
    --gradient-primary: linear-gradient(135deg, #333333 0%, #555555 100%);
    --text-primary: #ffffff;
    --text-secondary: #a0aec0;
    --text-muted: #6b7280;
  }

  body.alkemy-dark {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }
}