/* ============================================================
   Ezylife Mobile — Design Tokens
   Framework-agnostic. Apply a theme class to a wrapper:
     .ezm.ezm-admin     → HQ admin portal  (hq.ezylife.co)
     .ezm.ezm-supplier  → supplier portal  (supplier.ezylife.co)
   Both portals share one warm-ivory editorial scheme. The supplier
   theme is identical apart from the "Supplier Portal" context badge;
   its brass accent is exposed as --teal* so engineering can later
   diverge it to a distinct supplier colour without touching markup.
   Colours authored in OKLCH (authoritative). ~hex in README.
   ============================================================ */

.ezm {
  /* Type families — Ezylife brand: Ranade (headings) + Aileron (body). */
  --display: 'Ranade', 'Cormorant Garamond', Georgia, serif;
  --body:    'Aileron', 'Hind', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Surfaces — Ivory canvas, warm Peach-Cream panels. */
  --canvas:   #FDFDFC;   /* page background (Ivory) */
  --panel:    #FBF6EF;   /* card / grouped-list fill */
  --panel-2:  #F6EEE3;   /* nested block inside a card (Peach Cream tint) */
  --sheet:    #FFFFFF;   /* bottom-sheet fill */
  --tabbar:   rgba(253, 253, 252, 0.88); /* tab bar (blurred) */

  /* Photo placeholder */
  --photo:      #F2EADF;
  --photo-line: #E5DACB;
  --photo-mark: #B4A88F;

  /* Ink (text) — Royal Midnight primary. */
  --ink:       #202D42;  /* primary text / solid buttons (Royal Midnight) */
  --ink-soft:  #586074;  /* secondary text */
  --ink-faint: #8C92A0;  /* tertiary / meta / idle icon */

  /* Hairlines */
  --line:    #EAE3D7;    /* all dividers & borders (1px) */
  --line-2:  #D8CFC0;    /* stronger border (inputs/btns) */

  /* Champagne Gold accent (status / price / active). */
  --gold:      #A9823F;  /* readable gold for text/price on ivory */
  --gold-line: #D6AF74;  /* Champagne Gold — borders / active */
  --gold-soft: #F6EEDD;  /* gold wash */

  /* Supplier accent = Champagne Gold (aliased to --teal in the kit). */
  --teal:      #A9823F;
  --teal-line: #D6AF74;
  --teal-soft: #F6EEDD;

  /* Alert — Royal Burgundy. */
  --alert:      #6E2E2C;
  --alert-ink:  #6E2E2C;
  --alert-line: #C9A29B;
  --alert-soft: #F3E6E2;

  /* Solid action — Royal Midnight. */
  --accent:    var(--ink);             /* solid button bg (Royal Midnight) */
  --on-accent: #FDFDFC;                /* text on solid button */

  /* Safe areas (phone). Override with env() in production. */
  --safe-top: 54px;
  --safe-bottom: 30px;
}

/* Both portals resolve to the same ivory scheme today. */
.ezm-admin    { }
.ezm-supplier { }

/* Base reset scoped to the app */
.ezm, .ezm * { box-sizing: border-box; }
.ezm { -webkit-tap-highlight-color: transparent; }
.ezm button { font-family: var(--body); cursor: pointer; }
.ezm h1, .ezm h2, .ezm h3 { margin: 0; -webkit-font-smoothing: antialiased; }
.ezm ::-webkit-scrollbar { width: 0; height: 0; }
.ezm-body { scrollbar-width: none; }