/* =========================================
   BRIGHTSMILE DENTAL — DESIGN TOKENS
   Single source of truth for all design values.
   Import this file first in every page.
   ========================================= */

:root {
  /* ── Colors: Brand ── */
  --color-navy:         #1B3A6B;
  --color-navy-dark:    #142D56;
  --color-navy-light:   #2A4E8C;
  --color-teal:         #0D9488;
  --color-teal-dark:    #0B7A70;
  --color-teal-light:   #14B8A6;
  --color-accent-gold:  #D4A853;
  --color-accent-gold-light: #E8C47A;

  /* ── Colors: Backgrounds ── */
  --color-white:        #FFFFFF;
  --color-soft-blue:    #EFF6FF;
  --color-muted-mint:   #F0FAFA;
  --color-warm-neutral: #FAF9F7;
  --color-light-gray:   #F7F8FA;

  /* ── Colors: Text ── */
  --color-text-primary:   #1A1A2E;
  --color-text-secondary: #4A5568;
  --color-text-muted:     #718096;
  --color-text-on-dark:   #FFFFFF;
  --color-text-on-teal:   #FFFFFF;

  /* ── Colors: UI ── */
  --color-border:       #E2E8F0;
  --color-border-focus: #0D9488;
  --color-error:        #DC2626;
  --color-error-bg:     #FEF2F2;
  --color-success:      #16A34A;
  --color-success-bg:   #F0FDF4;
  --color-warning:      #D97706;

  /* ── Colors: Overlays ── */
  --overlay-navy:   rgba(27, 58, 107, 0.80);
  --overlay-dark:   rgba(10, 18, 36, 0.60);
  --overlay-light:  rgba(255, 255, 255, 0.92);

  /* ── Typography: Families ── */
  --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* ── Typography: Scale (fluid with clamp) ── */
  --text-xs:   0.75rem;       /* 12px */
  --text-sm:   0.875rem;      /* 14px */
  --text-base: 1rem;          /* 16px */
  --text-lg:   1.125rem;      /* 18px */
  --text-xl:   1.25rem;       /* 20px */
  --text-2xl:  1.5rem;        /* 24px */
  --text-3xl:  1.875rem;      /* 30px */
  --text-4xl:  2.25rem;       /* 36px */
  --text-5xl:  3rem;          /* 48px */
  --text-6xl:  clamp(2.25rem, 5vw, 3.75rem);  /* 36px → 60px fluid */

  /* Fluid headings */
  --h1-size: clamp(2.25rem, 5vw, 3.75rem);   /* 36→60px */
  --h2-size: clamp(1.75rem, 3.5vw, 2.75rem); /* 28→44px */
  --h3-size: clamp(1.375rem, 2.5vw, 2rem);   /* 22→32px */
  --h4-size: clamp(1.125rem, 2vw, 1.5rem);   /* 18→24px */

  /* ── Typography: Weights ── */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── Typography: Line Heights ── */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.6;
  --leading-loose:  1.75;

  /* ── Typography: Letter Spacing ── */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing (8px base unit) ── */
  --space-1:  0.5rem;   /* 8px  */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */
  --space-20: 10rem;    /* 160px */

  /* ── Border Radii ── */
  --radius-xs:     2px;
  --radius-sm:     4px;   /* inputs, small chips */
  --radius-md:     8px;   /* cards */
  --radius-lg:     12px;
  --radius-xl:     16px;  /* large cards, panels */
  --radius-2xl:    24px;
  --radius-pill:   50px;  /* buttons, badges */
  --radius-circle: 50%;   /* avatars */

  /* ── Shadows (navy-tinted, not harsh black) ── */
  --shadow-xs: 0 1px 2px rgba(27, 58, 107, 0.06);
  --shadow-sm: 0 2px 8px rgba(27, 58, 107, 0.08);
  --shadow-md: 0 4px 16px rgba(27, 58, 107, 0.12);
  --shadow-lg: 0 8px 32px rgba(27, 58, 107, 0.16);
  --shadow-xl: 0 16px 48px rgba(27, 58, 107, 0.20);
  --shadow-2xl:0 24px 64px rgba(27, 58, 107, 0.24);

  /* ── Transitions ── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
  --ease-default:    ease;
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast:   var(--duration-fast) var(--ease-default);
  --transition-base:   var(--duration-base) var(--ease-default);
  --transition-slow:   var(--duration-slow) var(--ease-default);

  /* ── Layout ── */
  --container-max:  1200px;
  --container-wide: 1440px;
  --container-narrow: 768px;
  --nav-height:     72px;
  --banner-height:  48px;

  /* ── Z-Index Scale ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-banner:   600;
}