/* ============================================================
   MedAlert — Design Tokens
   Calm medical / wellness · teal-anchored · large & readable
   Light + Dark. Applied via [data-theme] on .ma-root wrappers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800&display=swap');

/* ---------- LIGHT (default) ---------- */
[data-theme="light"] {
  /* Brand teal */
  --brand-50:  #E3F3F0;
  --brand-100: #C6E8E2;
  --brand-300: #5FC2B5;
  --brand-500: #009688;   /* brand anchor */
  --brand-600: #00897B;
  --brand-700: #00796B;   /* filled buttons — white text AA */
  --brand-ink: #ffffff;   /* text on filled brand */
  --brand-tint:  #E3F3F0; /* selected / soft fill */
  --brand-tint-2:#CFECE6;

  /* Canvas + surfaces (cool, calm neutrals) */
  --bg:        #EDF2F1;
  --surface:   #FFFFFF;
  --surface-2: #F5F8F7;
  --surface-3: #EBF1EF;
  --border:    #E0E8E6;
  --hairline:  #EAF0EE;

  /* Text */
  --text:   #14201E;
  --text-2: #566967;
  --text-3: #8A9B98;
  --on-fill:#ffffff;

  /* Status — calm, AA */
  --taken:        #1E9E63;
  --taken-strong: #16824F;
  --taken-tint:   #E1F3EA;
  --due:          #C77800;   /* due now / late */
  --due-strong:   #A86400;
  --due-tint:     #FBEFD6;
  --missed:       #D24A3D;
  --missed-strong:#BE3A2E;
  --missed-tint:  #FBE6E3;
  --skipped:      #6B7C79;
  --skipped-tint: #ECF1F0;
  --info:         #0062DB;   /* loader blue — sparing */
  --info-tint:    #E2ECFD;

  /* Geometry */
  --r-card: 18px;
  --r-btn:  14px;
  --r-input:14px;
  --r-chip: 999px;
  --r-sheet:26px;
  --r-sm:   10px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(16,32,30,.05);
  --sh-2: 0 4px 16px rgba(16,32,30,.07);
  --sh-3: 0 14px 36px rgba(16,32,30,.11);
  --ring: 0 0 0 4px rgba(0,150,136,.16);

  /* Page (presentation sheet) */
  --page-bg:   #E7EDEC;
  --page-grid: #DCE5E3;
  --page-card: #FFFFFF;
  --page-text: #14201E;
  --page-text-2:#566967;
  --page-line: #D5DFDC;
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --brand-50:  #103029;
  --brand-100: #15413B;
  --brand-300: #1F8576;
  --brand-500: #2BC4B2;   /* brightened anchor */
  --brand-600: #25B5A4;
  --brand-700: #2BC4B2;
  --brand-ink: #04231F;   /* dark text on bright teal */
  --brand-tint:  #112E2A;
  --brand-tint-2:#16413A;

  --bg:        #0E1413;
  --surface:   #161E1D;
  --surface-2: #1D2725;
  --surface-3: #25302E;
  --border:    #2B3633;
  --hairline:  #232E2C;

  --text:   #ECF2F0;
  --text-2: #A2B2AF;
  --text-3: #6E7E7A;
  --on-fill:#04231F;

  --taken:        #34C77F;
  --taken-strong: #4FD693;
  --taken-tint:   #102C20;
  --due:          #E6A23C;
  --due-strong:   #F2B65A;
  --due-tint:     #322611;
  --missed:       #F2685A;
  --missed-strong:#F78477;
  --missed-tint:  #341A17;
  --skipped:      #8A9A96;
  --skipped-tint: #212B29;
  --info:         #5096F5;
  --info-tint:    #142436;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 6px 18px rgba(0,0,0,.45);
  --sh-3: 0 16px 40px rgba(0,0,0,.55);
  --ring: 0 0 0 4px rgba(43,196,178,.22);

  --page-bg:   #090D0C;
  --page-grid: #141B19;
  --page-card: #131A18;
  --page-text: #ECF2F0;
  --page-text-2:#9DADAA;
  --page-line: #232E2C;
}

/* ---------- HIGH CONTRAST (AAA) — third ThemeMode ---------- */
[data-theme="contrast"] {
  --brand-50:  #DDEFEC;
  --brand-100: #C2E2DC;
  --brand-300: #1A7E70;
  --brand-500: #006B5E;
  --brand-600: #00564B;
  --brand-700: #00564B;   /* fills — white text, >7:1 */
  --brand-ink: #FFFFFF;
  --brand-tint:  #DDEFEC;
  --brand-tint-2:#BFE0DA;

  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F2F2F2;
  --surface-3: #E4E4E4;
  --border:    #000000;   /* 2px borders everywhere */
  --hairline:  #000000;

  --text:   #000000;
  --text-2: #1A1A1A;
  --text-3: #333333;
  --on-fill:#FFFFFF;

  --taken:        #00563A;
  --taken-strong: #003B27;
  --taken-tint:   #D6EBE0;
  --due:          #8A4B00;
  --due-strong:   #663800;
  --due-tint:     #F7E6CF;
  --missed:       #A11200;
  --missed-strong:#7A0D00;
  --missed-tint:  #F8DBD6;
  --skipped:      #2E2E2E;
  --skipped-tint: #E4E4E4;
  --info:         #003E8A;
  --info-tint:    #D7E3F5;

  --sh-1: 0 0 0 1px #000;
  --sh-2: 0 0 0 1px #000;
  --sh-3: 0 0 0 2px #000;
  --ring: 0 0 0 3px #000;

  --page-bg:   #FFFFFF;
  --page-grid: #E4E4E4;
  --page-card: #FFFFFF;
  --page-text: #000000;
  --page-text-2:#1A1A1A;
  --page-line: #000000;
}
/* In high-contrast, force visible 2px outlines on the key surfaces */
[data-theme="contrast"] .ma-card,
[data-theme="contrast"] .ma-btn--outline { border-width: 2px !important; border-color: #000 !important; }

.ma-root {
  font-family: 'Noto Sans', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Type scale (px — these live inside ~400px phone screens) */
.ma-root {
  --fs-display: 30px;
  --fs-title:   26px;
  --fs-h2:      21px;
  --fs-h3:      18px;
  --fs-body-lg: 17px;
  --fs-body:    16px;
  --fs-label:   15px;
  --fs-cap:     13px;
}

/* Utility text wrap */
.ma-root :where(h1,h2,h3,p) { text-wrap: pretty; }

/* Custom scrollbars inside phones */
.ma-scroll::-webkit-scrollbar { width: 0; height: 0; }
.ma-scroll { scrollbar-width: none; }