:root {
  /* These pages are always light-themed (no dark toggle); without this,
     native controls (e.g. number input spin buttons) can render in the
     OS's dark color scheme even though the page itself stays light. */
  color-scheme: light;

  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg-page:     #ffffff;
  --bg-surface:  #f8f9fa;
  --bg-elevated: #f0f0f0;
  --bg-hover:    #e8e8e8;
  --bg-input:    #ffffff;

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary-cst:  #121212;
  --text-secondary-cst: #4a4a4a;
  --text-muted-cst:    #6b7280;
  --text-inverse-cst:  #ffffff;

  /* ── Accent ───────────────────────────────────────────────── */
  --accent-gold:        #22c55e;
  /* --accent-gold-light:  #22c55e; */
  --accent-gold-light:  #c52222;
  --accent-gold-dark:   #16a34a;
  --accent-gold-bg:     rgba(34, 197, 94, 0.06);
  --accent-gold-icon:   rgba(34, 197, 94, 0.1);
  --accent-gold-border: rgba(34, 197, 94, 0.2);
  --accent-white:       #121212;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-subtle:  rgba(0, 0, 0, 0.07);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-focus:   rgba(0, 0, 0, 0.35);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 6px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl:    0 25px 60px rgba(0, 0, 0, 0.7);
  --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-glow:  0 8px 32px rgba(34, 197, 94, 0.2);

  /* ── Status colors ────────────────────────────────────────── */
  /* Semantic feedback for KYC states, validation, and badges   */
  --status-success:        #4ade80;
  --status-success-bg:     rgba(74, 222, 128, 0.06);
  --status-success-icon:   rgba(74, 222, 128, 0.1);
  --status-success-border: rgba(74, 222, 128, 0.2);

  --status-warning:        #dbaf00;
  --status-warning-bg:     rgba(250, 204, 21, 0.05);
  --status-warning-icon:   rgba(250, 204, 21, 0.1);
  --status-warning-border: rgba(250, 204, 21, 0.2);

  --status-error:          #ef4444;
  --status-error-light:    #f87171;
  --status-error-bg:       rgba(239, 68, 68, 0.07);
  --status-error-border:   rgba(239, 68, 68, 0.35);

  --status-badge-bg:       #fff4ef;
  --status-badge-border:   #ffd5c2;

  /* Booking-status badge tones (patient dashboard: pending/payment-pending/full/filling) */
  --status-pending:         #f97316;
  --status-payment-pending: #d97706;
  --status-full:            #f85534;
  --status-filling:         #fb923c;

  /* ── Primary action color ─────────────────────────────────── */
  /* Blue used on edit/interactive pages                        */
  --color-primary:              #3b82f6;
  --color-primary-bg:           rgba(59, 130, 246, 0.1);
  --color-primary-bg-hover:     rgba(59, 130, 246, 0.15);
  --color-primary-border:       rgba(59, 130, 246, 0.2);
  --color-primary-border-hover: rgba(59, 130, 246, 0.3);

  /* ── Neutral tones ────────────────────────────────────────── */
  /* Structural grays for cards, dividers, and body text        */
  --neutral-soft:  #f3f4f6;
  --neutral-line:  #d1d5db;
  --neutral-faint: #9ca3af;
  --neutral-body:  #374151;
  --neutral-deep:  #111827;

  /* ── Overlays ─────────────────────────────────────────────── */
  /* Modal and drawer backdrop opacities                        */
  --overlay-light: rgba(0, 0, 0, 0.5);
  --overlay-modal: rgba(0, 0, 0, 0.75);
  --overlay-heavy: rgba(0, 0, 0, 0.88);

  /* ── Typography ───────────────────────────────────────────── */
  /* --font-family-cst: var(--abc-social-bold); */
  --font-size-2xs:  12px;
  --font-size-xs:   14px;
  --font-size-sm:   16px;
  --font-size-base: 18px;
  --font-size-md:   20px;
  --font-size-lg:   24px;
  --font-size-xl:   28px;
  --font-size-2xl:  36px;

  --font-weight-light: 300;
  --font-weight-reg:   400;
  --font-weight-med:   500;
  --font-weight-semi:  600;
  --font-weight-bold:  700;
  --font-weight-black: 800;

  --line-height-tight: 1.2;
  --line-height-base:  1.65;
  --line-height-loose: 1.85;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal:  0em;
  --letter-spacing-wide:    0.06em;
  --letter-spacing-wider:   0.1em;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-xxs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   20px;
  --space-lg:   28px;
  --space-xl:   40px;
  --space-2xl:  56px;

  /* ── Border radius ────────────────────────────────────────── */
  --radius-sm:   2px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── Transitions ──────────────────────────────────────────── */
  --tr-fast:   all 0.18s ease;
  --tr-base:   all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --tr-bounce: all 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── SweetAlert2 override ─────────────────────────────────── */
  --swal2-color: #000000 !important;

  /* ── Legacy ───────────────────────────────────────────────── */
  --btn-hover-clr: #1a1a1a;

  /* ── Admin listing-edit theme tokens ─────────────────────────
     Used by ccc-admin.css. Light values mirror the base tokens
     above by default; [data-theme="dark"] below (set by the admin
     panel's theme toggle) overrides them. */
  --el-bg-page:     var(--bg-page);
  --el-bg-card:     var(--bg-surface);
  --el-bg-input:    var(--bg-input);
  --el-bg-icon:     var(--bg-elevated);
  --el-border:      var(--border-default);
  --el-border-hover: var(--border-focus);
  --el-text:        var(--text-primary-cst);
  --el-text-muted:  var(--text-muted-cst);
}

[data-theme="dark"] {
  color-scheme: dark;
  --el-bg-page:     #0f0f0f;
  --el-bg-card:     #161616;
  --el-bg-input:    #1e1e1e;
  --el-bg-icon:     #1e1e1e;
  --el-border:      #2a2a2a;
  --el-border-hover: #4a4a4a;
  --el-text:        #ffffff;
  --el-text-muted:  #6b7280;
}