/* ═══════════════════════════════════════════════════════════════════════════
   The Port Dental Clinic — Design Tokens (CSS Custom Properties)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand Colors ──────────────────────────────────────────────────── */
    --color-primary:         #00BCC9;
    --color-primary-dark:    #009BA6;
    --color-primary-light:   #33C9D4;
    --color-primary-subtle:  #E8F8F9;

    --color-secondary:       #004C6C;
    --color-secondary-dark:  #003A54;
    --color-secondary-light: #1A6A8A;

    /* ── Accent Colors ─────────────────────────────────────────────────── */
    --color-accent-coral:    #FF6B6B;
    --color-accent-coral-dark: #E55555;
    --color-success:         #2ECC71;
    --color-success-light:   #E8FAF0;
    --color-warning:         #F39C12;
    --color-warning-light:   #FEF5E7;
    --color-emergency:       #e74c3c;
    --color-emergency-dark:  #c0392b;

    /* ── Neutral Colors ────────────────────────────────────────────────── */
    --color-white:           #FFFFFF;
    --color-bg:              #FAFBFC;
    --color-bg-alt:          #F0F4F8;
    --color-surface:         #FFFFFF;
    --color-border:          #E2E8F0;
    --color-border-light:    #F1F5F9;

    /* ── Text Colors ───────────────────────────────────────────────────── */
    --color-text:            #1A2B3D;
    --color-text-secondary:  #5A6B7D;
    --color-text-muted:      #94A3B8;
    --color-text-inverse:    #FFFFFF;

    /* ── Typography ────────────────────────────────────────────────────── */
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --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:   3.75rem;     /* 60px */

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* ── Spacing ───────────────────────────────────────────────────────── */
    --space-1:   0.25rem;    /* 4px */
    --space-2:   0.5rem;     /* 8px */
    --space-3:   0.75rem;    /* 12px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-16:  4rem;       /* 64px */
    --space-20:  5rem;       /* 80px */
    --space-24:  6rem;       /* 96px */

    /* ── Layout ────────────────────────────────────────────────────────── */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1200px;
    --container-2xl:  1400px;

    /* ── Borders & Radius ──────────────────────────────────────────────── */
    --radius-sm:   0.375rem;   /* 6px */
    --radius-md:   0.5rem;     /* 8px */
    --radius-lg:   0.75rem;    /* 12px */
    --radius-xl:   1rem;       /* 16px */
    --radius-2xl:  1.5rem;     /* 24px */
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(0, 188, 201, 0.25);

    /* ── Transitions ──────────────────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Z-Index Scale ─────────────────────────────────────────────────── */
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-overlay:    300;
    --z-modal:      400;
    --z-toast:      500;
}