@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/**
 * MY BOCA SMILE - DESIGN SYSTEM TOKENS
 * Brand Reference: Dental Associates of Boca Raton
 * Primary Brand Color: #8BD3DF
 * Primary Font: Poppins
 */

:root {
  /* ==========================================================================
     1. COLOR PALETTE (Strict adherence to brand guidelines)
     ========================================================================== */
  
  /* Primary Brand Teal */
  --color-primary-50:  #f0fafb;
  --color-primary-100: #e2f6f9;
  --color-primary-200: #c5edf2;
  --color-primary-300: #a8e4ec;
  --color-primary-400: #8bd3df; /* OFFICIAL PRIMARY BRAND COLOR */
  --color-primary-500: #68b8c5;
  --color-primary-600: #4a9ca9;
  --color-primary-700: #33808c;
  --color-primary-800: #23656f;
  --color-primary-900: #184e56;

  /* Brand Tints & Backdrops (Very Light Teal) */
  --color-teal-tint-subtle: #f6fcfe;
  --color-teal-tint-soft:   #edf8fa;
  --color-teal-tint-hover:  #e0f4f7;
  --color-teal-tint-border: #bee8ef;

  /* Neutrals (Crisp White to Near-Black) */
  --color-white:       #ffffff;
  --color-neutral-25:  #fafcfd;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155; /* Soft Charcoal */
  --color-neutral-800: #1e293b; /* Dark Charcoal (Sidebar & Admin) */
  --color-neutral-900: #0f172a; /* Deep Charcoal */
  --color-near-black:  #0a0f1d; /* Near-black text */

  /* Semantic UI Tokens */
  --bg-app:          var(--color-neutral-50);
  --bg-surface:      var(--color-white);
  --bg-subtle:       var(--color-neutral-100);
  --bg-teal-subtle:  var(--color-teal-tint-soft);
  
  --text-main:       var(--color-near-black);
  --text-secondary:  var(--color-neutral-600);
  --text-muted:      var(--color-neutral-400);
  --text-inverse:    var(--color-white);
  --text-primary:    var(--color-primary-800);

  --border-subtle:   var(--color-neutral-200);
  --border-focus:    var(--color-primary-500);
  --border-brand:    var(--color-primary-300);

  /* Status Colors (Subdued Clinical) */
  --status-success-bg:     #ecfdf5;
  --status-success-text:   #065f46;
  --status-success-border: #a7f3d0;

  --status-warning-bg:     #fffbeb;
  --status-warning-text:   #92400e;
  --status-warning-border: #fde68a;

  --status-info-bg:        var(--color-primary-50);
  --status-info-text:      var(--color-primary-800);
  --status-info-border:    var(--color-primary-200);

  --status-error-bg:       #fef2f2;
  --status-error-text:     #991b1b;
  --status-error-border:   #fecaca;

  /* ==========================================================================
     2. TYPOGRAPHY SCALE
     ========================================================================== */
  --font-family-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:        'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:           'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type Scale */
  --text-display: clamp(2.5rem, 4vw + 1rem, 3.5rem);   /* 40px - 56px */
  --text-h1:      clamp(2rem, 3vw + 0.5rem, 2.5rem);    /* 32px - 40px */
  --text-h2:      clamp(1.5rem, 2vw + 0.5rem, 1.875rem);/* 24px - 30px */
  --text-h3:      clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);/* 20px - 24px */
  --text-h4:      1.125rem;  /* 18px */
  --text-body:    1rem;      /* 16px */
  --text-small:   0.875rem;  /* 14px */
  --text-caption: 0.75rem;   /* 12px */
  --text-micro:   0.6875rem; /* 11px */

  /* Line Heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

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

  /* ==========================================================================
     3. SPACING & SIZING SCALE (8pt Grid)
     ========================================================================== */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs:  0.5rem;  /* 8px */
  --space-sm:  0.75rem; /* 12px */
  --space-md:  1rem;    /* 16px */
  --space-lg:  1.5rem;  /* 24px */
  --space-xl:  2rem;    /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4rem;    /* 64px */
  --space-4xl: 6rem;    /* 96px */

  /* Layout Containers */
  --container-max-width: 1240px;
  --container-admin-max:  1600px;
  --container-mobile:     430px;

  /* ==========================================================================
     4. BORDER RADIUS (Subtle, professional, avoids childish curvature)
     ========================================================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ==========================================================================
     5. ELEVATION & SHADOWS (Soft, pristine, healthcare clean)
     ========================================================================== */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.06), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 32px -8px rgba(15, 23, 42, 0.10), 0 8px 16px -6px rgba(15, 23, 42, 0.05);

  /* Subtle Teal Accent Glow */
  --shadow-brand-glow: 0 0 0 3px rgba(139, 211, 223, 0.35);

  /* ==========================================================================
     6. TRANSITIONS & ANIMATIONS
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     7. Z-INDEX LAYERS
     ========================================================================== */
  --z-base:       1;
  --z-dropdown:   100;
  --z-sticky:     500;
  --z-modal-backdrop: 1000;
  --z-modal:      1050;
  --z-toast:      2000;
}