/* =====================================================================
   MI TOKENS — Μικροί Ήρωες · Design Lock V1 («Ήρεμη Ακρίβεια»)
   Canonical design tokens. This file is the source of truth for colour,
   type, spacing, radius, elevation and focus. Values are copied exactly
   from the approved Design Lock V1 canvas; do not change them ad hoc.

   Theme switch: the existing theme toggle sets `html.dark` and
   `html[data-theme="dark"]` (public/healthtech-ui.js). Both are honoured.
   Rules: no !important in MI files; weights 400/500/600/700 only.
   ===================================================================== */

:root{
  /* Surfaces & text — light */
  --mi-bg:#F5F6F4;
  --mi-surface:#FFFFFF;
  --mi-surface-2:#F9FAF8;
  --mi-sunken:#EEF1ED;
  --mi-border:#E1E5DF;
  --mi-border-strong:#CCD2CA;
  --mi-control-border:#858F8A;
  --mi-text:#16212C;
  --mi-text-2:#4A5663;
  --mi-text-3:#5F6A76;

  /* Brand & warmth */
  --mi-primary:#1F5A8C;
  --mi-primary-tint:#E7EFF6;
  --mi-on-primary:#FFFFFF;
  --mi-gold:#A8843A;          /* decorative only — never text (3.48:1 on surface) */
  --mi-sage:#41745B;
  --mi-sage-tint:#E5EFE9;
  --mi-blush:#9E4F66;
  --mi-blush-tint:#F7E8EC;

  /* Semantic */
  --mi-danger:#B23A31;        /* emergency status · error · destructive action */
  --mi-danger-tint:#FBEAE8;
  --mi-on-danger:#FFFFFF;
  --mi-warning:#95600E;
  --mi-warning-tint:#FAEFDB;
  --mi-allergy:#8E2E63;
  --mi-allergy-tint:#F6E5EE;
  --mi-success:#28704E;
  --mi-success-tint:#E4F2EA;
  --mi-pending:#6552A0;
  --mi-pending-tint:#EEEBF8;

  /* Elevation */
  --mi-shadow-1:0 1px 2px rgba(16,24,32,.05);
  --mi-shadow-2:0 6px 18px rgba(16,24,32,.08);
  --mi-shadow-3:0 16px 40px rgba(16,24,32,.18);
  --mi-scrim:rgba(22,33,44,.32);

  /* Typography — Commissioner with a Greek-complete fallback (Noto Sans is already loaded). */
  --mi-font-sans:Commissioner,"Noto Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mi-weight-regular:400;
  --mi-weight-medium:500;
  --mi-weight-semibold:600;
  --mi-weight-bold:700;
  --mi-text-display:28px;   --mi-lh-display:36px;
  --mi-text-title:22px;     --mi-lh-title:30px;
  --mi-text-heading:18px;   --mi-lh-heading:26px;
  --mi-text-subhead:16px;   --mi-lh-subhead:24px;
  --mi-text-body:14px;      --mi-lh-body:22px;
  --mi-text-body-mobile:15px;
  --mi-text-dense:13px;     --mi-lh-dense:20px;
  --mi-text-meta:12px;      --mi-lh-meta:18px;   /* minimum for meaningful text */
  --mi-text-overline:11px;  --mi-lh-overline:16px; /* uppercase section labels, desktop only */

  /* Spacing (4px grid) */
  --mi-space-1:4px;  --mi-space-2:8px;  --mi-space-3:12px; --mi-space-4:16px;
  --mi-space-5:20px; --mi-space-6:24px; --mi-space-8:32px; --mi-space-10:40px;

  /* Radius */
  --mi-radius-sm:6px;   /* controls, buttons */
  --mi-radius-md:10px;  /* cards, dialogs */
  --mi-radius-pill:999px;

  /* Control heights */
  --mi-control-sm:32px; --mi-control-md:36px; --mi-control-lg:40px; --mi-control-xl:44px;
  --mi-control-mobile:48px;
  --mi-tap-min:44px;

  /* Focus */
  --mi-focus-width:2px;
  --mi-focus-offset:2px;

  /* Shell */
  --mi-topbar-height:64px;
  --mi-topbar-height-mobile:56px;
  --mi-bottom-nav-height:72px;

  /* Layering */
  --mi-z-topbar:220;
  --mi-z-bottom-nav:230;
  --mi-z-menu:400;
  --mi-z-modal:1200;
  --mi-z-toast:1400;
}

html.dark,
html[data-theme="dark"]{
  --mi-bg:#0E1216;
  --mi-surface:#141A20;
  --mi-surface-2:#1A2128;
  --mi-sunken:#0B0F12;
  --mi-border:#26303A;
  --mi-border-strong:#35414D;
  --mi-control-border:#66727E;
  --mi-text:#E7ECF0;
  --mi-text-2:#A9B3BE;
  --mi-text-3:#8893A0;

  --mi-primary:#8BB6E3;
  --mi-primary-tint:#1A2B3D;
  --mi-on-primary:#0E1216;
  --mi-gold:#D9B76A;
  --mi-sage:#8DC3A7;
  --mi-sage-tint:#17291F;
  --mi-blush:#E7A6B7;
  --mi-blush-tint:#2E1C23;

  --mi-danger:#F28B80;
  --mi-danger-tint:#3A1A17;
  --mi-on-danger:#1A0B09;
  --mi-warning:#E6B45E;
  --mi-warning-tint:#33270F;
  --mi-allergy:#EA90BE;
  --mi-allergy-tint:#33172A;
  --mi-success:#72CC9E;
  --mi-success-tint:#14291F;
  --mi-pending:#AB9EE6;
  --mi-pending-tint:#221E38;

  --mi-shadow-1:0 0 0 1px rgba(255,255,255,.02);
  --mi-shadow-2:0 8px 24px rgba(0,0,0,.4);
  --mi-shadow-3:0 20px 48px rgba(0,0,0,.55);
  --mi-scrim:rgba(0,0,0,.55);
  color-scheme:dark;
}

/* ---------------------------------------------------------------------
   TRANSITIONAL BRIDGE — app background & surfaces only.
   Legacy screens read --ht-* / --os-* neutrals. Pointing those neutrals at
   MI tokens moves the app background, surfaces, borders and text colours to
   Design Lock V1 without editing legacy screen rules. Brand/semantic legacy
   tokens (primary, success, warning, critical, allergy) are intentionally
   NOT bridged in Phase 1; each screen adopts them when it is migrated.
   Remove this block once no legacy stylesheet reads these variables.
   --------------------------------------------------------------------- */
:root,
html.dark,
html[data-theme="dark"]{
  --ht-bg:var(--mi-bg);
  --ht-surface:var(--mi-surface);
  --ht-elevated:var(--mi-surface-2);
  --ht-border:var(--mi-border);
  --ht-text:var(--mi-text);
  --ht-secondary:var(--mi-text-2);
  --ht-muted:var(--mi-text-3);
  --os-bg:var(--mi-bg);
  --os-surface:var(--mi-surface);
  --os-elevated:var(--mi-surface-2);
  --os-border:var(--mi-border);
  --os-text:var(--mi-text);
  --os-secondary:var(--mi-text-2);
  --os-muted:var(--mi-text-3);
}