/* ============================================================
   Krugersdorp Medical Centre — Design Tokens
   Canonical CSS Custom Properties for the site design system.
   All component CSS must reference var(--token) — no hardcoded hex.

   These tokens are extracted from the existing site design and
   map 1:1 to what CLD's theme will import verbatim.
   ============================================================ */

/* ── Light theme (base) ───────────────────────────────────── */
:root {
  /* Tonal scale — navy/teal */
  --t900: #0f1525;
  --t800: #23315a;
  --t700: #2a3d6b;
  --t600: #3a5ba0;
  --t500: #4a6db5;
  --t400: #6ea3c1;
  --t200: #b8cde3;
  --t100: #d4e4f0;
  --t50:  #edf3f8;

  /* Accent scale — gold/amber */
  --a600: #c4920a;
  --a500: #f7c873;
  --a400: #fad690;
  --a100: #fef7e3;

  /* Neutrals */
  --ww:  #ffffff;   /* card / page white */
  --w50: #f5f7fa;   /* off-white background */
  --tp:  #1a2238;   /* primary text */
  --ts:  #4a5e78;   /* secondary text */
  --tm:  #7a88a1;   /* muted text */
  --bd:  #b0b8c1;   /* border */
  --wh:  #ffffff;

  /* Brand colours (semantic aliases) */
  --color-primary:   var(--t700);
  --color-accent:    var(--a500);
  --color-bg-page:   var(--ww);
  --color-bg-alt:    var(--w50);
  --color-text:      var(--tp);
  --color-border:    var(--bd);

  /* WhatsApp green */
  --wa: #25D366;

  /* Typography */
  --fd: 'Playfair Display', Georgia, serif;   /* display / headings */
  --fb: 'Libre Baskerville', Georgia, serif;  /* body */

  /* Border radius */
  --rsm:  8px;
  --rmd:  16px;
  --rlg:  24px;
  --rxl:  32px;

  /* Shadows */
  --ssm: 0 2px 8px  rgba(26, 34, 56, .08);
  --smd: 0 8px 24px rgba(26, 34, 56, .12);
  --slg: 0 20px 48px rgba(26, 34, 56, .16);

  /* Transition shorthand */
  --ease: all .3s cubic-bezier(.4, 0, .2, 1);

  /* Shadcn-compat aliases (used by some components) */
  --card:                 #e3eaf2;
  --ring:                 var(--a500);
  --input:                var(--t400);
  --muted:                #e5e5df;
  --accent:               var(--t400);
  --border:               var(--bd);
  --primary:              var(--t600);
  --secondary:            var(--a500);
  --background:           var(--w50);
  --foreground:           var(--tp);
  --popover:              #fffbe6;
  --primary-foreground:   #fffbe6;
  --secondary-foreground: var(--tp);
  --muted-foreground:     var(--t600);
  --accent-foreground:    var(--tp);
  --card-foreground:      var(--tp);
  --popover-foreground:   var(--tp);
  --destructive:          #2d1e2f;
  --destructive-foreground: #fffbe6;
  --font-sans: 'Libre Baskerville', serif;
  --radius: 0.5rem;
}

/* ── Dark theme ───────────────────────────────────────────── */
.dark {
  --t900: #080a12;
  --t800: #12162a;
  --t700: #1a2238;
  --t600: #3a5ba0;
  --t500: #4a6db5;
  --t400: #6ea3c1;
  --t200: #2a4060;
  --t100: #1e3050;
  --t50:  #182440;

  --a600: #b8880a;
  --a500: #ffe066;
  --a400: #ffe896;
  --a100: #2a2600;

  --ww:  #181a24;
  --w50: #23243a;
  --tp:  #e6eaf3;
  --ts:  #a0b0c8;
  --tm:  #7a88a1;
  --bd:  #2d2e3e;
  --wh:  #23243a;

  --ssm: 0 2px 8px  rgba(0, 0, 0, .22);
  --smd: 0 8px 24px rgba(0, 0, 0, .32);
  --slg: 0 20px 48px rgba(0, 0, 0, .42);

  --card:                 #23243a;
  --ring:                 #ffe066;
  --input:                var(--t600);
  --muted:                #23243a;
  --accent:               #bccdf0;
  --border:               #2d2e3e;
  --primary:              var(--t600);
  --secondary:            #ffe066;
  --background:           #181a24;
  --foreground:           #e6eaf3;
  --popover:              #23243a;
  --primary-foreground:   #ffe066;
  --secondary-foreground: #23243a;
  --muted-foreground:     var(--tm);
  --accent-foreground:    #181a24;
  --card-foreground:      #e6eaf3;
  --popover-foreground:   #ffe066;
  --destructive:          #a04a6c;
  --destructive-foreground: #ffe066;
}