/* ============================================================
   variables.css — Design tokens for TechMobile
   Refined, premium palette (Apple/Samsung retailer feel)
   ============================================================ */

:root {
  /* Brand — a confident, engineered blue */
  --color-primary:       #0B6CFF;   /* primary actions */
  --color-primary-dark:  #0A57CC;   /* hover */
  --color-accent:        #0E7C66;   /* subtle teal — links, small accents */
  --color-accent-dark:   #0A5E4D;

  /* Backgrounds */
  --color-bg:            #FFFFFF;
  --color-bg-secondary:  #F4F5F7;
  --color-bg-card:       #FFFFFF;
  --color-bg-tint:       #F8F9FB;

  /* Text */
  --color-text-primary:  #14151A;
  --color-text-secondary:#3C4150;
  --color-text-muted:    #6B7180;
  --color-text-inverse:  #FFFFFF;

  /* UI */
  --color-border:        #E6E8EC;
  --color-border-strong: #D3D7DD;
  --color-success:       #1A9E5E;
  --color-danger:        #D93636;
  --color-warning:       #C97A11;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* Border radius — moderate, premium (not pill-everything) */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* Shadows — soft and restrained */
  --shadow-card:   0 1px 2px rgba(20,21,26,0.04), 0 6px 20px rgba(20,21,26,0.05);
  --shadow-hover:  0 6px 16px rgba(20,21,26,0.08), 0 18px 44px rgba(20,21,26,0.10);
  --shadow-soft:   0 1px 3px rgba(20,21,26,0.06);

  /* Transitions */
  --transition:  0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-logo:    'Outfit', 'Inter', sans-serif;

  /* Brand wordmark gradient */
  --logo-gradient: linear-gradient(90deg, #4a8fff, #00c8ff);

  /* Layout */
  --max-width:     1240px;
  --navbar-height: 66px;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --color-bg:            #0C0D12;
  --color-bg-secondary:  #15171F;
  --color-bg-card:       #16181F;
  --color-bg-tint:       #14161D;
  --color-text-primary:  #F2F3F5;
  --color-text-secondary:#C2C7D0;
  --color-text-muted:    #8A909E;
  --color-border:        #262932;
  --color-border-strong: #353945;
  --color-primary:       #4D93FF;
  --color-primary-dark:  #3B82F6;
  --color-accent:        #3FB89B;
  --shadow-card:         0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --shadow-hover:        0 10px 30px rgba(0,0,0,0.45);
  --shadow-soft:         0 1px 3px rgba(0,0,0,0.4);
}