/**
 * Scicom Design Hub - CSS Variables
 *
 * Import this file into your project to use the design system tokens.
 * Usage: @import url('path/to/variables.css');
 *
 * Then use variables like: color: var(--primary-500);
 */

:root {
  /* ==========================================
   * GLOBAL TOKENS (Shared across all brands)
   * ========================================== */

  /* Gray Palette */
  --gray-50: #fafafa;
  --gray-100: #f4f4f5;
  --gray-200: #e4e4e7;
  --gray-300: #d4d4d8;
  --gray-400: #a1a1aa;
  --gray-500: #71717a;
  --gray-600: #52525b;
  --gray-700: #3f3f46;
  --gray-800: #27272a;
  --gray-900: #18181b;
  --gray-950: #09090b;

  /* Danger/Error Palette */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;
  --danger-950: #450a0a;

  /* Success Palette */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;
  --success-950: #052e16;

  /* Warning Palette */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;
  --warning-950: #451a03;

  /* Typography */
  --font-primary: 'Inter', system-ui, sans-serif;
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* ==========================================
   * SCICOM THEME (Default)
   * ========================================== */

  /* Primary Palette - Scicom OKLCH */
  --primary-50: oklch(0.94 0.026 278.77);
  --primary-100: oklch(0.872 0.057 277.54);
  --primary-200: oklch(0.755 0.113 273.89);
  --primary-300: oklch(0.629 0.176 268.57);
  --primary-400: oklch(0.51 0.19 263.65);
  --primary-500: oklch(0.381 0.142 263.58);
  --primary-600: oklch(0.334 0.124 263.42);
  --primary-700: oklch(0.282 0.105 263.55);
  --primary-800: oklch(0.237 0.09 263.69);
  --primary-900: oklch(0.181 0.067 263.06);
  --primary-950: oklch(0.152 0.057 263.91);

  /* Secondary Palette - Warm OKLCH */
  --secondary-c-50: oklch(0.975 0.013 35.83);
  --secondary-c-100: oklch(0.942 0.029 39.38);
  --secondary-c-200: oklch(0.885 0.061 42.7);
  --secondary-c-300: oklch(0.836 0.093 43.84);
  --secondary-c-400: oklch(0.778 0.136 48.97);
  --secondary-c-500: oklch(0.722 0.171 53.91);
  --secondary-c-600: oklch(0.607 0.143 54.12);
  --secondary-c-700: oklch(0.491 0.117 54.03);
  --secondary-c-800: oklch(0.369 0.088 53.76);
  --secondary-c-900: oklch(0.254 0.06 54.14);
  --secondary-c-950: oklch(0.202 0.049 52.98);

  /* Semantic Colors */
  --primary: oklch(0.334 0.124 263.42);
  --primary-foreground: #ffffff;
  --ring: oklch(0.381 0.142 263.58);
  --accent: oklch(0.872 0.057 277.54);
  --accent-foreground: oklch(0.181 0.067 263.06);
  --background: #ffffff;
  --foreground: #09090b;
}

/* ==========================================
 * EMGS THEME
 * Apply by adding class="theme-emgs" to root
 * ========================================== */

.theme-emgs {
  /* Primary Palette - Teal */
  --primary-50: #f0fdfa;
  --primary-100: #ccfbf1;
  --primary-200: #99f6e4;
  --primary-300: #5eead4;
  --primary-400: #2dd4bf;
  --primary-500: #14b8a6;
  --primary-600: #0d9488;
  --primary-700: #0f766e;
  --primary-800: #115e59;
  --primary-900: #134e4a;
  --primary-950: #042f2e;

  /* Semantic Colors */
  --primary: #0d9488;
  --primary-foreground: #ffffff;
  --ring: #14b8a6;
  --accent: #ccfbf1;
  --accent-foreground: #134e4a;
}

/* ==========================================
 * TELEKOM MALAYSIA THEME
 * Apply by adding class="theme-telekom" to root
 * ========================================== */

.theme-telekom {
  /* Primary Palette - TM Blue */
  --primary-50: #e6f3ff;
  --primary-100: #cce7ff;
  --primary-200: #99cfff;
  --primary-300: #66b7ff;
  --primary-400: #339fff;
  --primary-500: #0087ff;
  --primary-600: #0066b3;
  --primary-700: #005299;
  --primary-800: #003d73;
  --primary-900: #00294d;
  --primary-950: #001426;

  /* Semantic Colors */
  --primary: #0066b3;
  --primary-foreground: #ffffff;
  --ring: #00a0e4;
  --accent: #e6f3ff;
  --accent-foreground: #00294d;
}

/* ==========================================
 * DARK MODE SUPPORT
 * ========================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --background: #09090b;
    --foreground: #fafafa;
  }
}

.dark {
  --background: #09090b;
  --foreground: #fafafa;
}