/*
Theme Name: PG Slot Pro
Theme URI: https://example.com
Author: PG Slot Pro
Author URI: https://example.com
Description: Premium WordPress Theme for PG Soft Online Slot Website — Light Theme, Mobile First, SEO Ready, RankMath Compatible
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pgslot
Tags: slot, game, pg-soft, light-theme, mobile-first, seo-ready
*/

/* ============================================================
   CSS CUSTOM PROPERTIES — DESIGN SYSTEM
   ============================================================ */
:root {
  /* Background */
  --bg-primary:       #fdfdfe;
  --bg-secondary:     #f0f5fe;
  --bg-tertiary:      #f1f3f5;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f8f9fa;
  --bg-overlay:       rgba(0, 0, 0, 0.6);

  /* Brand Colors */
  --blue-primary:     #2161e2;
  --blue-secondary:   #64a9f8;
  --purple-primary:   #764ba2;
  --purple-secondary: #6a0dad;
  --green-primary:    #22c55e;
  --green-dark:       #16a34a;
  --red-hot:          #ff416c;
  --red-hot-dark:     #ff4b2b;
  --green-new:        #11998e;
  --green-new-light:  #38ef7d;
  --gold-primary:     #f5a623;
  --gold-dark:        #e08e0b;

  /* Gradients */
  --gradient-sidebar-active: linear-gradient(135deg, #2161e2 0%, #64a9f8 100%);
  --gradient-button-primary:  linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  --gradient-jackpot:         linear-gradient(135deg, #6a0dad 0%, #f5a623 100%);
  --gradient-hot-badge:       linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  --gradient-new-badge:       linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --gradient-hero-overlay:    linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
  --gradient-card-hover:      linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 60%);
  --gradient-shimmer:         linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

  /* Text */
  --text-primary:     #1a1a2e;
  --text-h:           #143070;
  --text-secondary:   #6b7280;
  --text-muted:       #9ca3af;
  --text-white:       #ffffff;
  --text-link:        #4f6ef7;
  --text-link-hover:  #3b55d4;

  /* Border */
  --border-color:     #e5e7eb;
  --border-light:     #f3f4f6;
  --border-focus:     #667eea;
  --radius-sm:        6px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        24px;
  --radius-full:      9999px;

  /* Shadow */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.12);
  --shadow-card:      0 2px 12px rgba(0,0,0,0.08);
  --shadow-card-hover:0 8px 32px rgba(79,110,247,0.18);
  --shadow-button:    0 4px 15px rgba(34,197,94,0.35);
  --shadow-sidebar:   2px 0 16px rgba(0,0,0,0.06);
  --box-s-card:       0 2px 12px hsla(219, 100%, 91%, 0.75);

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

  /* Typography */
  --font-display: 'Kanit', sans-serif;
  --font-body:    'Sarabun', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --text-xs:      clamp(0.7rem,  1.2vw, 0.75rem);
  --text-sm:      clamp(0.8rem,  1.4vw, 0.875rem);
  --text-base:    clamp(0.875rem,1.6vw, 1rem);
  --text-lg:      clamp(1rem,    1.8vw, 1.125rem);
  --text-xl:      clamp(1.1rem,  2vw,   1.25rem);
  --text-2xl:     clamp(1.25rem, 2.5vw, 1.5rem);
  --text-3xl:     clamp(1.5rem,  3vw,   1.875rem);
  --text-4xl:     clamp(1.875rem,4vw,   2.25rem);

  /* Layout */
  --sidebar-left-width:  220px;
  --sidebar-right-width: 280px;
  --header-height:       64px;
  --content-max:         1440px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   DARK MODE (optional future)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-primary:   #0f172a;
    --bg-secondary: #1e293b;
    --bg-card:      #1e293b;
    --text-primary: #f1f5f9;
    --text-secondary:#94a3b8;
    --border-color: #334155;
  }
}