/* ============================================================
 * FREEZE ADS BOT — Design Tokens & CSS Custom Properties
 * ============================================================
 * 
 * Dual-theme token system:
 *   • :root          → Light theme (default)
 *   • html.theme-dark → Dark chocolate glassmorphism overrides
 *
 * Naming convention:
 *   --category-variant   e.g. --bg-primary, --text-secondary
 *
 * All color tokens use rgba where transparency is needed so
 * glassmorphism backdrop-filter can bleed through.
 * ========================================================== */


/* ──────────────────────────────────────────────────────────── 
 * LIGHT THEME (DEFAULT)
 * ──────────────────────────────────────────────────────────── */

:root {

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-primary:        rgba(248, 250, 252, 0.98); /* clean off-white slate */
  --bg-secondary:      #F1F5F9;                   /* cool slate-grey */
  --bg-card:           rgba(255, 255, 255, 0.85);
  --bg-card-hover:     rgba(255, 255, 255, 0.95);
  --bg-elevated:       rgba(255, 255, 255, 0.92);
  --bg-input:          rgba(255, 255, 255, 0.7);
  --bg-overlay:        rgba(15, 23, 42, 0.45);
  --bg-skeleton:       rgba(36, 129, 204, 0.06);
  --bg-nav:            rgba(248, 250, 252, 0.92);

  /* ── Accent & Brand (Telegram Blue) ────────────────────── */
  --accent:            #2481CC;
  --accent-light:      #3FA2F6;
  --accent-glow:       rgba(36, 129, 204, 0.25);
  --accent-soft:       rgba(36, 129, 204, 0.1);
  --accent-rgb:        36, 129, 204;

  /* ── Premium Accent (Indigo/Purple) ─────────────────────── */
  --accent-premium:     #5D5FEF;
  --accent-premium-rgb: 93, 95, 239;
  --gradient-premium:   linear-gradient(135deg, #5D5FEF 0%, #7879F1 100%);

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:      #0F172A; /* Slate 900 */
  --text-secondary:    #475569; /* Slate 600 */
  --text-muted:        #94A3B8; /* Slate 400 */
  --text-on-accent:    #FFFFFF;
  --text-link:         #2481CC;

  /* ── Semantic ──────────────────────────────────────────── */
  --success:           #16A34A;
  --success-soft:      rgba(22, 163, 74, 0.1);
  --warning:           #D97706;
  --warning-soft:      rgba(217, 119, 6, 0.1);
  --danger:            #DC2626;
  --danger-soft:       rgba(220, 38, 38, 0.1);
  --info:              #2481CC;
  --info-soft:         rgba(36, 129, 204, 0.1);

  /* ── Borders ───────────────────────────────────────────── */
  --border:            rgba(36, 129, 204, 0.12);
  --border-light:      rgba(36, 129, 204, 0.06);
  --border-strong:     rgba(36, 129, 204, 0.2);

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-color:      rgba(15, 23, 42, 0.06);
  --shadow-sm:         0 1px 2px var(--shadow-color);
  --shadow-md:         0 4px 12px var(--shadow-color), 0 1px 3px var(--shadow-color);
  --shadow-lg:         0 8px 24px var(--shadow-color), 0 2px 8px var(--shadow-color);
  --shadow-xl:         0 16px 48px var(--shadow-color), 0 4px 16px var(--shadow-color);

  /* ── Gradients ─────────────────────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #2481CC 0%, #3FA2F6 100%);
  --gradient-accent:   linear-gradient(135deg, #1B5E96 0%, #2481CC 100%);
  --gradient-card:     linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(241,245,249,0.85) 100%);
  --gradient-hero:     linear-gradient(180deg, rgba(36,129,204,0.06) 0%, transparent 60%);

  /* ── Glassmorphism ─────────────────────────────────────── */
  --glass-blur:        blur(20px);
  --glass-bg:          rgba(255, 255, 255, 0.7);


  /* ══════════════════════════════════════════════════════════
   * TYPOGRAPHY
   * ════════════════════════════════════════════════════════ */

  --font-family:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* Font Sizes (modular scale ~1.2) */
  --font-size-2xs:     0.625rem;   /* 10px */
  --font-size-xs:      0.6875rem;  /* 11px */
  --font-size-sm:      0.8125rem;  /* 13px */
  --font-size-base:    0.9375rem;  /* 15px */
  --font-size-lg:      1.0625rem;  /* 17px */
  --font-size-xl:      1.25rem;    /* 20px */
  --font-size-2xl:     1.5rem;     /* 24px */
  --font-size-3xl:     1.875rem;   /* 30px */
  --font-size-4xl:     2.25rem;    /* 36px */

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

  /* Line Heights */
  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.7;

  /* Letter Spacing */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;


  /* ══════════════════════════════════════════════════════════
   * SPACING (4px base grid)
   * ════════════════════════════════════════════════════════ */

  --space-0:     0;
  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-7:     28px;
  --space-8:     32px;
  --space-9:     36px;
  --space-10:    40px;
  --space-11:    44px;
  --space-12:    48px;


  /* ══════════════════════════════════════════════════════════
   * BORDER RADIUS
   * ════════════════════════════════════════════════════════ */

  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    18px;
  --radius-2xl:   24px;
  --radius-full:  9999px;


  /* ══════════════════════════════════════════════════════════
   * TRANSITIONS
   * ════════════════════════════════════════════════════════ */

  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal:  250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo:      cubic-bezier(0.16, 1, 0.3, 1);


  /* ══════════════════════════════════════════════════════════
   * Z-INDEX LAYERS
   * ════════════════════════════════════════════════════════ */

  --z-base:       1;
  --z-card:       10;
  --z-fab:        50;
  --z-nav:        100;
  --z-header:     110;
  --z-overlay:    500;
  --z-modal:      600;
  --z-drawer:     650;
  --z-toast:      900;
  --z-max:        9999;


  /* ══════════════════════════════════════════════════════════
   * SAFE AREAS (updated by JS on init)
   * ════════════════════════════════════════════════════════ */

  --safe-area-top:     0px;
  --safe-area-bottom:  0px;
  --safe-area-left:    0px;
  --safe-area-right:   0px;


  /* ══════════════════════════════════════════════════════════
   * LAYOUT CONSTANTS
   * ════════════════════════════════════════════════════════ */

  --header-height:     64px;
  --nav-height:        64px;
  --max-app-width:     480px;
  --content-padding:   16px;
}


/* ──────────────────────────────────────────────────────────── 
 * DARK THEME (Slate-Navy & Blue/Purple accents)
 * ──────────────────────────────────────────────────────────── */

html.theme-dark {

  /* ── Backgrounds ───────────────────────────────────────── */
  --bg-primary:        rgba(13, 22, 32, 0.95);    /* deep slate-navy */
  --bg-secondary:      #080E15;
  --bg-card:           rgba(24, 38, 54, 0.6);     /* slate-grey glass cards */
  --bg-card-hover:     rgba(32, 50, 70, 0.7);
  --bg-elevated:       rgba(36, 56, 78, 0.65);
  --bg-input:          rgba(16, 26, 38, 0.7);
  --bg-overlay:        rgba(0, 0, 0, 0.65);
  --bg-skeleton:       rgba(36, 129, 204, 0.1);
  --bg-nav:            rgba(13, 22, 32, 0.88);

  /* ── Accent & Brand (Telegram Blue) ────────────────────── */
  --accent:            #2481CC;
  --accent-light:      #3FA2F6;
  --accent-glow:       rgba(36, 129, 204, 0.35);
  --accent-soft:       rgba(36, 129, 204, 0.12);
  --accent-rgb:        36, 129, 204;

  /* ── Premium Accent (Indigo/Purple) ─────────────────────── */
  --accent-premium:     #5D5FEF;
  --accent-premium-rgb: 93, 95, 239;
  --gradient-premium:   linear-gradient(135deg, #5D5FEF 0%, #7879F1 100%);

  /* ── Text ──────────────────────────────────────────────── */
  --text-primary:      #FFFFFF;
  --text-secondary:    #8E9CAE;
  --text-muted:        #5C6B7E;
  --text-on-accent:    #FFFFFF;
  --text-link:         #3FA2F6;

  /* ── Semantic ──────────────────────────────────────────── */
  --success:           #4ADE80;
  --success-soft:      rgba(74, 222, 128, 0.12);
  --warning:           #FBBF24;
  --warning-soft:      rgba(251, 191, 36, 0.12);
  --danger:            #F87171;
  --danger-soft:       rgba(248, 113, 113, 0.12);
  --info:              #60A5FA;
  --info-soft:         rgba(96, 165, 250, 0.12);

  /* ── Borders ───────────────────────────────────────────── */
  --border:            rgba(36, 129, 204, 0.2);
  --border-light:      rgba(36, 129, 204, 0.1);
  --border-strong:     rgba(36, 129, 204, 0.3);

  /* ── Shadows (deeper for dark) ─────────────────────────── */
  --shadow-color:      rgba(0, 0, 0, 0.35);
  --shadow-sm:         0 1px 3px var(--shadow-color);
  --shadow-md:         0 4px 16px var(--shadow-color), 0 1px 4px rgba(0,0,0,0.2);
  --shadow-lg:         0 8px 32px var(--shadow-color), 0 2px 12px rgba(0,0,0,0.25);
  --shadow-xl:         0 20px 60px var(--shadow-color), 0 4px 20px rgba(0,0,0,0.3);

  /* ── Gradients ─────────────────────────────────────────── */
  --gradient-primary:  linear-gradient(135deg, #2481CC 0%, #3FA2F6 100%);
  --gradient-accent:   linear-gradient(135deg, #1B5E96 0%, #2481CC 100%);
  --gradient-card:     linear-gradient(145deg, rgba(24,38,54,0.65) 0%, rgba(16,26,38,0.55) 100%);
  --gradient-hero:     linear-gradient(180deg, rgba(36,129,204,0.08) 0%, transparent 60%);

  /* ── Glassmorphism ─────────────────────────────────────── */
  --glass-blur:        blur(20px);
  --glass-bg:          rgba(16, 26, 38, 0.55);
}