/* Design tokens for the mobile mockups - COPIED from src/theme/ (primitives.css + tokens.css) so
   /mobile stays self-contained and the web app is never imported or touched. Keep in sync by hand.
   Two layers: PRIMITIVES (raw palette) then SEMANTIC roles. Rule 2: markup never hardcodes colours -
   it reads these via var(--token). Dark mode via prefers-color-scheme, overridable with [data-theme].
   Variant swap via :root[data-variant='<customer>'] (nigeria inherits the base teal, like the app). */

:root {
  /* ---- PRIMITIVES (src/theme/primitives.css) ---- */
  --grey-0: #ffffff;
  --grey-50: #f5f6f6;
  --grey-100: #edf3f3;
  --grey-200: #cfd2d2;
  --grey-300: #aeb2b2;
  --grey-400: #858b8a;
  --grey-600: #5b5f5f;
  --grey-700: #4d5151;
  --grey-800: #444645;
  --grey-900: #2f3131;

  --primary-100: #f0f9f9;
  --primary-400: #54adac;
  --primary-600: #2b6f71;
  --primary-900: #213e40;

  --success-100: #d6f5da;
  --success-500: #267f50;
  --success-900: #13531c;

  --danger-100: #ffdfe0;
  --danger-500: #d53636;
  --danger-900: #402020;

  --warning-100: #ffeed4;
  --warning-500: #f09205;
  --warning-900: #402f16;

  --gradient-100: #cffcf9;

  /* ---- SEMANTIC ROLES (src/theme/tokens.css) ---- */
  --radius: 0.625rem;

  --background: var(--grey-0);
  --foreground: var(--grey-900);
  --card: var(--grey-0);
  --card-foreground: var(--grey-900);
  --popover: var(--grey-0);
  --popover-foreground: var(--grey-900);
  --primary: var(--primary-600);
  --primary-foreground: var(--grey-0);
  --secondary: var(--grey-50);
  --secondary-foreground: var(--grey-900);
  --muted: var(--grey-100);
  --muted-foreground: var(--grey-600);
  --accent: var(--grey-100);
  --accent-foreground: var(--grey-900);
  --destructive: var(--danger-500);
  --destructive-foreground: var(--grey-0);
  --success: var(--success-500);
  --success-foreground: var(--grey-0);
  --warning: var(--warning-500);
  --warning-foreground: var(--grey-900);
  --info: var(--primary-600);
  --info-foreground: var(--grey-0);
  --border: var(--grey-200);
  --input: var(--grey-200);
  --ring: var(--primary-600);

  /* soft status tints (derived from the 100-steps) for chips/banners */
  --primary-tint: var(--primary-100);
  --success-tint: var(--success-100);
  --warning-tint: var(--warning-100);
  --danger-tint: var(--danger-100);

  /* Doctor avatar colours (copied from src/theme/tokens.css --doctor-1..5) */
  --doctor-1: oklch(0.62 0.17 255);
  --doctor-2: oklch(0.65 0.18 145);
  --doctor-3: oklch(0.70 0.17 50);

  color-scheme: light;
}

/* Dark mode - mirrors src/theme/tokens.css .dark (neutrals in oklch, palette retinted). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: var(--primary-400);
    --primary-foreground: var(--grey-900);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --info: var(--primary-400);
    --info-foreground: var(--grey-900);
    --border: oklch(1 0 0 / 12%);
    --input: oklch(1 0 0 / 15%);
    --ring: var(--primary-400);

    --primary-tint: oklch(0.30 0.03 190);
    --success-tint: oklch(0.32 0.05 150);
    --warning-tint: oklch(0.34 0.06 70);
    --danger-tint: oklch(0.32 0.07 25);

    color-scheme: dark;
  }
}

/* Explicit dark override (used by the index toggle). */
:root[data-theme='dark'] {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: var(--primary-400);
  --primary-foreground: var(--grey-900);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --info: var(--primary-400);
  --info-foreground: var(--grey-900);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);
  --ring: var(--primary-400);
  --primary-tint: oklch(0.30 0.03 190);
  --success-tint: oklch(0.32 0.05 150);
  --warning-tint: oklch(0.34 0.06 70);
  --danger-tint: oklch(0.32 0.07 25);
  color-scheme: dark;
}

/* Nigeria variant - active demo default. Inherits the base teal (variant CSS is empty in the app). */
:root[data-variant='nigeria'] {
  /* intentionally empty - reskin point for a customer */
}