/**
 * Meowbit WHMCS Theme
 * Design System Variables
 *
 * Color Palette:
 * - Surface/Dark: #120a1c (surface-950)
 * - Brand Primary: #8b4cae (mdpurple-500)
 * - Brand Light: #c68bc3 (mdpurple-300)
 * - Background: #fdf4fd (cream-100)
 * - Card Background: #fffaff (cream-50)
 * - Text Primary: #2a1238 (ink)
 * - Border: #e0c0e2 (mdpurple-100)
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

:root {
  /* Brand Colors */
  --meowbit-cream-100: #fdf4fd;
  --meowbit-cream-50: #fffaff;
  --meowbit-surface-950: #120a1c;
  --meowbit-ink: #2a1238;
  --meowbit-mdpurple-100: #e0c0e2;
  --meowbit-mdpurple-300: #c68bc3;
  --meowbit-mdpurple-50-text: #f7ecf8;
  --meowbit-mdpurple-500: #8b4cae;
  --meowbit-white: #ffffff;

  /* Semantic Colors - Light Theme */
  --meowbit-bg: var(--meowbit-cream-100);
  --meowbit-bg-card: var(--meowbit-cream-50);
  --meowbit-text: var(--meowbit-ink);
  --meowbit-text-muted: color-mix(in oklab, var(--meowbit-ink) 60%, transparent);
  --meowbit-accent: var(--meowbit-mdpurple-500);
  --meowbit-accent-hover: color-mix(in oklab, var(--meowbit-mdpurple-500) 85%, black);
  --meowbit-border: color-mix(in oklab, var(--meowbit-mdpurple-100) 70%, transparent);

  /* Semantic Colors - Dark Theme (Hero Section) */
  --meowbit-hero-bg: var(--meowbit-surface-950);
  --meowbit-hero-text: var(--meowbit-mdpurple-50-text);
  --meowbit-hero-accent: var(--meowbit-mdpurple-300);

  /* Bootstrap Overrides */
  --meowbit-primary: var(--meowbit-mdpurple-500);
  --meowbit-primary-hover: color-mix(in oklab, var(--meowbit-mdpurple-500) 85%, black);
  --meowbit-secondary: var(--meowbit-mdpurple-100);
  --meowbit-success: #28a745;
  --meowbit-info: #17a2b8;
  --meowbit-warning: #ffc107;
  --meowbit-danger: #dc3545;

  /* Typography */
  --meowbit-font-sans: 'Quicksand', 'Quicksand Fallback', ui-sans-serif, system-ui, sans-serif;
  --meowbit-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Font Sizes */
  --meowbit-text-xs: 0.625rem;    /* 10px */
  --meowbit-text-sm: 0.875rem;    /* 14px */
  --meowbit-text-base: 1rem;      /* 16px */
  --meowbit-text-lg: 1.125rem;    /* 18px */
  --meowbit-text-xl: 1.5rem;      /* 24px */
  --meowbit-text-2xl: 2rem;       /* 32px */
  --meowbit-text-3xl: 3rem;        /* 48px */
  --meowbit-text-4xl: 4.5rem;     /* 72px */

  /* Spacing */
  --meowbit-space-1: 0.25rem;   /* 4px */
  --meowbit-space-2: 0.5rem;    /* 8px */
  --meowbit-space-3: 0.75rem;   /* 12px */
  --meowbit-space-4: 1rem;      /* 16px */
  --meowbit-space-5: 1.25rem;   /* 20px */
  --meowbit-space-6: 1.5rem;    /* 24px */
  --meowbit-space-8: 2rem;       /* 32px */
  --meowbit-space-10: 2.5rem;   /* 40px */
  --meowbit-space-12: 3rem;      /* 48px */
  --meowbit-space-16: 4rem;      /* 64px */

  /* Border Radius */
  --meowbit-radius-sm: 0.5rem;    /* 8px */
  --meowbit-radius-md: 0.75rem;   /* 12px */
  --meowbit-radius-lg: 1rem;      /* 16px */
  --meowbit-radius-xl: 1.5rem;    /* 24px */
  --meowbit-radius-2xl: 1.75rem;  /* 28px */
  --meowbit-radius-3xl: 2.75rem;  /* 44px */
  --meowbit-radius-pill: 9999px;

  /* Shadows */
  --meowbit-shadow-sm: 0 1px 2px 0 rgb(139 76 174 / 0.05);
  --meowbit-shadow-md: 0 4px 6px -1px rgb(139 76 174 / 0.08), 0 2px 4px -2px rgb(139 76 174 / 0.06);
  --meowbit-shadow-lg: 0 10px 15px -3px rgb(139 76 174 / 0.08), 0 4px 6px -4px rgb(139 76 174 / 0.06);

  /* Transitions */
  --meowbit-transition-fast: 150ms ease;
  --meowbit-transition-base: 200ms ease;
  --meowbit-transition-slow: 300ms ease;
}

/* ============================================
   FONT FACE DECLARATIONS
   ============================================ */

/* Quicksand - Main UI Font */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/quicksand/v31/6xK-dSZaM9iE8K0pUhVhmN5.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/quicksand/v31/6xK-dSZaM9iE8K0pUhVhmN5.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/quicksand/v31/6xK-dSZaM9iE8K0pUhVhmN5.woff2') format('woff2');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/quicksand/v31/6xK-dSZaM9iE8K0pUhVhmN5.woff2') format('woff2');
}

/* ============================================
   BOOTSTRAP VARIABLE OVERRIDES
   ============================================ */

:root {
  /* Override Bootstrap primary color */
  --primary: var(--meowbit-mdpurple-500);

  /* Body */
  --body-bg: var(--meowbit-cream-100);
  --body-color: var(--meowbit-ink);

  /* Fonts */
  --font-family-sans-serif: var(--meowbit-font-sans);
  --font-family-monospace: var(--meowbit-font-mono);

  /* Border Radius */
  --border-radius: 0.5rem;
  --border-radius-sm: var(--meowbit-radius-sm);
  --border-radius-lg: var(--meowbit-radius-lg);
  --border-radius-xl: var(--meowbit-radius-xl);

  /* Component-specific */
  --input-border-color: var(--meowbit-mdpurple-100);
  --input-focus-border-color: var(--meowbit-mdpurple-500);
  --input-focus-box-shadow: 0 0 0 3px rgba(139, 76, 174, 0.2);
  --link-color: var(--meowbit-mdpurple-500);
  --link-hover-color: var(--meowbit-mdpurple-300);
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

body {
  font-family: var(--meowbit-font-sans);
  color: var(--meowbit-ink);
  background-color: var(--meowbit-cream-100);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--meowbit-font-sans);
  font-weight: 600;
  color: var(--meowbit-ink);
}

h1, .h1 {
  font-size: var(--meowbit-text-3xl);
  letter-spacing: -1.2px;
  line-height: 1;
}

h2, .h2 {
  font-size: var(--meowbit-text-2xl);
  letter-spacing: -1.2px;
  line-height: 1;
}

h3, .h3 {
  font-size: var(--meowbit-text-xl);
  letter-spacing: -0.6px;
  line-height: 1.33;
}

h4, .h4 {
  font-size: var(--meowbit-text-lg);
  font-weight: 600;
}

a {
  color: var(--meowbit-mdpurple-500);
  text-decoration: none;
  transition: color var(--meowbit-transition-fast);
}

a:hover {
  color: var(--meowbit-mdpurple-300);
  text-decoration: none;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Pill shape utility */
.pill {
  border-radius: var(--meowbit-radius-pill) !important;
}

/* Surface colors */
.surface-cream {
  background-color: var(--meowbit-cream-100);
}

.surface-card {
  background-color: var(--meowbit-cream-50);
}

/* Hero section utilities */
.hero-bg {
  background-color: var(--meowbit-surface-950);
  background-image: radial-gradient(ellipse at top, rgba(139, 76, 174, 0.15) 0%, transparent 50%);
}

.hero-fg {
  color: var(--meowbit-mdpurple-50-text);
}

.text-hero-accent {
  color: var(--meowbit-mdpurple-300);
}

/* Accent colors */
.text-accent {
  color: var(--meowbit-mdpurple-500);
}

.bg-accent {
  background-color: var(--meowbit-mdpurple-500);
}

.border-accent {
  border-color: var(--meowbit-mdpurple-500);
}

/* Focus styles */
*:focus-visible {
  outline: 3px solid var(--meowbit-mdpurple-300);
  outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--meowbit-cream-100);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--meowbit-mdpurple-300), var(--meowbit-mdpurple-500));
  border-radius: var(--meowbit-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--meowbit-mdpurple-500);
}