/* ==========================================================================
   CSS Custom Properties (Design Tokens) — Dark Theme
   ParhaatNettikasinot.ai
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     COLOR PALETTE — Dark Theme
     ------------------------------------------------------------------ */

  /* Primary emerald */
  --color-primary:          #10b981;
  --color-primary-light:    #34d399;
  --color-primary-dark:     #059669;
  --color-primary-50:       rgba(16,185,129,0.08);
  --color-primary-100:      rgba(16,185,129,0.15);
  --color-primary-200:      rgba(16,185,129,0.25);
  --color-primary-300:      #6ee7b7;
  --color-primary-400:      #34d399;
  --color-primary-500:      #10b981;
  --color-primary-600:      #059669;
  --color-primary-700:      #047857;
  --color-primary-800:      #065f46;
  --color-primary-900:      #064e3b;

  /* Secondary emerald */
  --color-secondary:        #059669;
  --color-secondary-light:  #10b981;
  --color-secondary-dark:   #047857;

  /* Accent gold */
  --color-accent:           #f59e0b;
  --color-accent-light:     #fbbf24;
  --color-accent-dark:      #d97706;
  --color-accent-hover:     #d97706;
  --color-accent-50:        rgba(245,158,11,0.08);
  --color-accent-100:       rgba(245,158,11,0.15);
  --color-accent-200:       rgba(245,158,11,0.25);

  /* Background & surface */
  --color-bg:               #0f172a;
  --color-bg-alt:           #1e293b;
  --color-bg-dark:          #0a0f1a;
  --color-surface:          #1e293b;
  --color-surface-hover:    #273548;
  --color-surface-raised:   #334155;

  /* Text colors */
  --color-text:             #f8fafc;
  --color-text-secondary:   #94a3b8;
  --color-text-muted:       #64748b;
  --color-text-light:       #475569;
  --color-text-inverse:     #FFFFFF;
  --color-text-link:        #10b981;
  --color-text-link-hover:  #34d399;

  /* Rating / star */
  --color-star:             #f59e0b;
  --color-star-empty:       #334155;

  /* Semantic colors */
  --color-success:          #10b981;
  --color-success-bg:       rgba(16,185,129,0.15);
  --color-warning:          #f59e0b;
  --color-warning-bg:       rgba(245,158,11,0.15);
  --color-danger:           #ef4444;
  --color-danger-bg:        rgba(239,68,68,0.15);
  --color-info:             #3b82f6;
  --color-info-bg:          rgba(59,130,246,0.15);

  /* Borders */
  --color-border:           rgba(255,255,255,0.06);
  --color-border-light:     rgba(255,255,255,0.06);
  --color-border-dark:      rgba(255,255,255,0.12);
  --color-border-focus:     #10b981;

  /* ------------------------------------------------------------------
     GRADIENTS
     ------------------------------------------------------------------ */
  --gradient-primary:       linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --gradient-primary-dark:  linear-gradient(135deg, #0a0f1a 0%, #0f172a 100%);
  --gradient-secondary:     linear-gradient(135deg, #059669 0%, #10b981 100%);
  --gradient-accent:        linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-accent-hover:  linear-gradient(135deg, #059669 0%, #047857 100%);

  /* Casino card gradients */
  --gradient-casino-card:       linear-gradient(160deg, #1e293b 0%, #1a2332 100%);
  --gradient-casino-card-hover: linear-gradient(160deg, #273548 0%, #1e293b 100%);
  --gradient-casino-card-dark:  linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
  --gradient-casino-featured:   linear-gradient(160deg, #1e293b 0%, rgba(16,185,129,0.05) 100%);

  /* Hero / header gradients */
  --gradient-hero:          linear-gradient(135deg, #0f172a 0%, #1a1a2e 50%, #16213e 100%);
  --gradient-header:        rgba(15,23,42,0.9);
  --gradient-footer:        linear-gradient(180deg, #0a0f1a 0%, #060a12 100%);

  /* Overlay */
  --gradient-overlay:       linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.85) 100%);
  --gradient-overlay-dark:  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------ */
  --font-family-base:       'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono:       "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Courier New", monospace;

  /* Font sizes - fluid scale */
  --font-size-xs:           0.75rem;
  --font-size-sm:           0.875rem;
  --font-size-base:         1rem;
  --font-size-md:           1.125rem;
  --font-size-lg:           1.25rem;
  --font-size-xl:           1.5rem;
  --font-size-2xl:          1.875rem;
  --font-size-3xl:          2.25rem;
  --font-size-4xl:          3rem;
  --font-size-5xl:          3.75rem;

  /* Font weights */
  --font-weight-normal:     400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-extrabold:  800;

  /* Line heights */
  --line-height-tight:      1.2;
  --line-height-snug:       1.375;
  --line-height-base:       1.6;
  --line-height-relaxed:    1.75;
  --line-height-loose:      2;

  /* Letter spacing */
  --letter-spacing-tight:   -0.025em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.025em;
  --letter-spacing-wider:   0.05em;
  --letter-spacing-widest:  0.1em;

  /* ------------------------------------------------------------------
     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-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Section spacing */
  --section-gap:            var(--space-16);
  --section-gap-sm:         var(--space-10);
  --section-gap-lg:         var(--space-24);

  /* ------------------------------------------------------------------
     CONTAINER / LAYOUT WIDTHS
     ------------------------------------------------------------------ */
  --container-xs:           480px;
  --container-sm:           640px;
  --container-md:           768px;
  --container-lg:           1024px;
  --container-xl:           1200px;
  --container-2xl:          1400px;
  --container-max:          1400px;
  --container-padding:      1rem;

  /* ------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------ */
  --radius-sm:              4px;
  --radius-md:              8px;
  --radius-lg:              12px;
  --radius-xl:              16px;
  --radius-2xl:             24px;
  --radius-full:            9999px;
  --radius-card:            var(--radius-xl);
  --radius-button:          var(--radius-lg);
  --radius-badge:           var(--radius-full);
  --radius-input:           var(--radius-md);

  /* ------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------ */
  --shadow-xs:              0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:              0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:              0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-xl:              0 20px 25px rgba(0, 0, 0, 0.35), 0 8px 10px rgba(0, 0, 0, 0.15);
  --shadow-2xl:             0 25px 50px rgba(0, 0, 0, 0.4);
  --shadow-inner:           inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Colored shadows */
  --shadow-primary:         0 4px 14px rgba(16, 185, 129, 0.25);
  --shadow-primary-lg:      0 10px 30px rgba(16, 185, 129, 0.3);
  --shadow-accent:          0 4px 14px rgba(16, 185, 129, 0.3);
  --shadow-accent-lg:       0 10px 30px rgba(16, 185, 129, 0.35);
  --shadow-glow:            0 0 30px rgba(16, 185, 129, 0.15);

  /* Card shadows */
  --shadow-card:            0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-card-hover:      0 8px 32px rgba(0, 0, 0, 0.4);

  /* ------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------ */
  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;
  --transition-slow:        350ms ease;
  --transition-slower:      500ms ease;

  --transition-colors:      color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base);
  --transition-shadow:      box-shadow var(--transition-base);
  --transition-transform:   transform var(--transition-base);
  --transition-all:         all var(--transition-base);

  /* Easing functions */
  --ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:               cubic-bezier(0, 0, 0.2, 1);
  --ease-in:                cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:            cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* ------------------------------------------------------------------
     Z-INDEX SCALE
     ------------------------------------------------------------------ */
  --z-negative:             -1;
  --z-base:                 0;
  --z-above:                1;
  --z-dropdown:             100;
  --z-sticky:               200;
  --z-header:               300;
  --z-overlay:              400;
  --z-modal:                500;
  --z-popover:              600;
  --z-tooltip:              700;
  --z-toast:                800;
  --z-top:                  999;

  /* ------------------------------------------------------------------
     COMPONENT-SPECIFIC TOKENS
     ------------------------------------------------------------------ */

  /* Header */
  --header-height:          72px;
  --header-height-mobile:   64px;
  --header-bg:              rgba(15, 23, 42, 0.9);
  --header-text:            #f8fafc;

  /* Footer */
  --footer-bg:              #0a0f1a;
  --footer-text:            #94a3b8;
  --footer-link:            #64748b;
  --footer-link-hover:      #10b981;

  /* Casino card */
  --casino-card-min-height: 220px;
  --casino-card-logo-size:  80px;

  /* Buttons */
  --btn-height:             44px;
  --btn-height-sm:          36px;
  --btn-height-lg:          52px;
  --btn-padding-x:          1.5rem;
  --btn-padding-x-sm:       1rem;
  --btn-padding-x-lg:       2rem;

  /* Form inputs */
  --input-height:           44px;
  --input-padding-x:        0.875rem;
  --input-bg:               #0f172a;
  --input-border:           rgba(255,255,255,0.1);
  --input-border-focus:     #10b981;

  /* Breadcrumbs */
  --breadcrumb-separator:   "/";
  --breadcrumb-color:       var(--color-text-muted);
  --breadcrumb-active:      var(--color-text);

  /* Scroll-to-top */
  --scroll-top-size:        48px;
  --scroll-top-bg:          #10b981;
  --scroll-top-color:       #FFFFFF;

  /* Keywords carousel */

}

/* Responsive images */
img { max-width: 100%; height: auto; }