/* ==========================================================================
   Design Tokens — OmanClinic Theme
   All colors, spacing, typography, and shadow values are defined here.
   Override via Customizer (see customizer.php) or child theme.
   ========================================================================== */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-primary:       #1e6fa8;   /* Deep medical blue */
  --color-primary-dark:  #155a8a;
  --color-primary-light: #d0e9f7;

  --color-accent:        #0d9488;   /* Teal */
  --color-accent-dark:   #0a7a71;
  --color-accent-light:  #ccfbf1;

  --color-success:       #16a34a;
  --color-warning:       #d97706;
  --color-danger:        #dc2626;

  --color-text:          #1e293b;   /* Slate-900 — main body */
  --color-text-muted:    #64748b;   /* Slate-500 */
  --color-text-light:    #94a3b8;   /* Slate-400 */

  --color-bg:            #ffffff;
  --color-light-bg:      #f0f9ff;   /* Very light blue */
  --color-surface:       #f8fafc;
  --color-border:        #e2e8f0;
  --color-border-focus:  #1e6fa8;

  /* Whatsapp brand */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #128C7E;

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

  --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 */

  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── 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 */
  --space-32:  8rem;      /* 128px */

  --section-padding-y: 5rem;        /* Default section vertical padding */
  --section-padding-y-sm: 3rem;     /* Smaller screens */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-max:    1240px;
  --container-pad:    1.5rem;
  --container-pad-sm: 1rem;

  /* ── Borders ─────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:      0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-card: 0 2px 12px 0 rgb(0 0 0 / 0.08);
  --shadow-hover: 0 8px 24px 0 rgb(0 0 0 / 0.12);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition:      250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ─────────────────────────────────────────────── */
  --z-base:        1;
  --z-sticky:      100;
  --z-header:      200;
  --z-dropdown:    300;
  --z-modal:       400;
  --z-toast:       500;
}