/* assets/css/variables.css */

:root {
  /* 🎨 Color Palette: Midnight Slate & Deep Purple */
  
  /* Foundation */
  --bg-body: #f1f5f9;         /* Very light slate edge for contrast against cards */
  --bg-surface: #ffffff;      /* Pure white for cards/surfaces */
  
  /* Primary Brand Colors */
  --color-primary: #0f172a;   /* Slate 900 - Dark slate */
  --color-primary-hover: #1e293b; 
  
  /* Accents & Interactive (Green) */
  --color-accent: #5ecc2f;    /* Green 500 - Accent color for links/buttons */
  --color-accent-hover: #4fad26; /* Green 600 */
  --color-accent-soft: #eef8e8;  /* Soft green for subtle active states */
  
  /* Typography */
  --text-main: #0f172a;       /* Slate 900 */
  --text-muted: #64748b;      /* Slate 500 */
  --text-inverse: #ffffff;    /* White text on dark bgs */
  
  /* UI Elements */
  --border-color: #e2e8f0;    /* Slate 200 */
  --input-bg: #f8fafc;        /* Slate 50 */
  --input-border: #cbd5e1;    /* Slate 300 */
  --input-focus: #5ecc2f;     /* Green outline */
  
  /* Status Colors (For Table) */
  --status-pending-bg: #fef3c7; /* Amber 100 */
  --status-pending-text: #b45309; /* Amber 700 */
  
  --status-error-bg: #fee2e2;   /* Red 100 */
  --status-error-text: #b91c1c;   /* Red 700 */
  
  --status-success-bg: #dcfce7; /* Green 100 */
  --status-success-text: #15803d; /* Green 700 */

  /* 📏 Typography System */
  --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-title: 2rem;    /* 32px */

  /* 🖌️ Design Tokens */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ☁️ Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-smooth: 0px 8px 24px rgba(15, 23, 42, 0.08); /* Premium soft shadow */

  /* ⏱️ Timings */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
}