/*
Theme Name: Florida Implants
Theme URI: https://floridaimplants.com
Description: Custom WordPress theme built from scratch for Florida Implants clinic.
Version: 1.0.0
Author: Taimoor Ahmed
Author URI: https://floridaimplants.com
Text Domain: florida-implants
*/


:root {
  /* 2.1 Color Palette */
  /* Base — clean light */
  --color-bg: #F8FAFC;
  /* near-white soft background */
  --color-surface: #FFFFFF;
  /* card/section white */
  --color-surface-2: #F1F5F9;
  /* slightly tinted surface */
  --color-border: rgba(0, 0, 0, 0.08);
  --color-border-hover: rgba(30, 43, 94, 0.25);

  /* Brand colors */
  --color-primary: #1E2B5E;
  /* deep navy — trust, headings, body anchors */
  --color-secondary: #F5A623;
  /* warm orange — CTAs, active states, highlights */
  --color-accent: #2BA88A;
  /* teal-green — checkmarks, success states */
  --color-highlight: #E8920A;
  /* deeper orange — hover states, pressed CTAs */

  /* Text */
  --color-text: #0D1117;
  /* near-black */
  --color-text-muted: #5A6A7A;
  /* muted gray */
  --color-text-light: #94A3B8;
  /* placeholder, disabled */

  /* Trust/premium */
  --color-gold: #C9962A;
  /* ratings, awards */

  /* Gradients */
  --grad-title: linear-gradient(135deg, #1E2B5E 0%, #2E4099 55%, #F5A623 100%);
  --grad-cta: linear-gradient(135deg, #F5A623 0%, #E8920A 100%);
  --grad-warm: linear-gradient(135deg, #F5A623, #E8920A);
  /* used sparingly */
  --grad-section: linear-gradient(180deg, #F8FAFC 0%, #EEF1FF 100%);
  /* section bg variants */

  /* 2.2 Typography Fonts */
  --font-display: 'Outfit', sans-serif;
  /* headings — clean, modern, confident */
  --font-body: 'Inter', sans-serif;
  /* body — readable, medical-grade trust */
  --font-mono: 'DM Mono', monospace;
  /* prices, stats, numbers */

  /* 2.3 Spacing & Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --section-gap: clamp(80px, 10vw, 140px);
  --container: min(1280px, 92vw);

  /* 2.4 Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 40px rgba(30, 43, 94, 0.15), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-cta: 0 6px 24px rgba(245, 166, 35, 0.45);

  /* Mouse Glow Init Positions */
  --mx: 50%;
  --my: 50%;

  /* Header dimensions */
  --header-height:          120px;
  --header-height-scrolled: 90px;
}