/* =============================================
   CK 852 LOTTERY - Design System
   Theme: Light Modern Minimal
   Brand: Crimson Red + Gold + White
   ============================================= */

/* === CSS Variables === */
:root {
  /* Brand Colors */
  --color-primary:         #9C2326;
  --color-primary-dark:    #7A1B1E;
  --color-primary-light:   #B6272B;
  --color-primary-bg:      #FDF2F2;

  --color-accent:          #D4A843;
  --color-accent-dark:     #B8922F;
  --color-accent-light:    #F5E6C3;
  --color-accent-bg:       #FFFDF5;

  /* Neutrals */
  --color-white:           #FFFFFF;
  --color-bg-primary:      #F8F9FC;
  --color-bg-secondary:    #F1F3F9;
  --color-bg-tertiary:     #EEF0F5;

  --color-text-primary:    #1F2937;
  --color-text-secondary:  #374151;
  --color-text-muted:      #6B7280;
  --color-text-light:      #9CA3AF;

  --color-border:          #E5E7EB;
  --color-border-light:    #F3F4F6;
  --color-border-focus:    #9C2326;

  /* Semantic */
  --color-success:         #059669;
  --color-success-bg:      #ECFDF5;
  --color-warning:         #D97706;
  --color-warning-bg:      #FFFBEB;
  --color-danger:          #DC2626;
  --color-danger-bg:       #FEF2F2;
  --color-info:            #2563EB;
  --color-info-bg:         #EFF6FF;

  /* Typography */
  --font-family:           'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:          0.75rem;
  --font-size-sm:          0.8125rem;
  --font-size-base:        0.875rem;
  --font-size-md:          1rem;
  --font-size-lg:          1.125rem;
  --font-size-xl:          1.25rem;
  --font-size-2xl:         1.5rem;
  --font-size-3xl:         1.875rem;

  --font-weight-light:     300;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  /* Spacing (8px grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

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

  /* Shadows */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl:   0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    350ms ease;

  /* Layout */
  --header-height:       64px;
  --sidebar-width:       260px;
  --footer-height:       48px;
}

/* === Reset & Base === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove number input spinners/arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-light);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  line-height: 1.6;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-text-light);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Selection */
::selection {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}