/* ============================================================
   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 */
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Surfaces */
  --canvas:   oklch(0.987 0.006 85);   /* page background (ivory)        ~#FBF8F3 */
  --panel:    oklch(0.977 0.007 83);   /* card / grouped-list fill       ~#F7F2EB */
  --panel-2:  oklch(0.959 0.009 80);   /* nested block inside a card     ~#F1ECE2 */
  --sheet:    oklch(0.99 0.005 85);    /* bottom-sheet fill              ~#FCFAF5 */
  --tabbar:   rgba(247, 242, 234, 0.86); /* tab bar (blurred)            ~#F7F2EA */

  /* Photo placeholder */
  --photo:      oklch(0.952 0.011 76); /* placeholder field              ~#EFE9DF */
  --photo-line: oklch(0.905 0.013 76); /* diagonal hairlines             ~#E1D8CA */
  --photo-mark: oklch(0.70 0.016 72);  /* ring + caption                 ~#AC9F8D */

  /* Ink (text) */
  --ink:       oklch(0.28 0.012 60);   /* primary text / solid buttons   ~#3A322B */
  --ink-soft:  oklch(0.46 0.012 60);   /* secondary text                 ~#6A6056 */
  --ink-faint: oklch(0.62 0.012 62);   /* tertiary / meta / idle icon    ~#978D81 */

  /* Hairlines */
  --line:    oklch(0.88 0.008 72);     /* all dividers & borders (1px)   ~#E2DCD3 */
  --line-2:  oklch(0.82 0.012 72);     /* stronger border (inputs/btns)  ~#D2CABD */

  /* Brass accent (status: Live / Reserved / price) */
  --gold:      oklch(0.52 0.062 72);                       /* ~#8A7048 */
  --gold-line: oklch(0.78 0.05 75);                        /* ~#CBB48F */
  --gold-soft: oklch(0.965 0.022 82);                      /* ~#F4EEE2 */

  /* Supplier accent — currently identical brass (see header note) */
  --teal:      oklch(0.52 0.062 72);
  --teal-line: oklch(0.78 0.05 75);
  --teal-soft: oklch(0.965 0.022 82);

  /* Alert (urgent / unpaid / sign-out) */
  --alert:      oklch(0.48 0.12 25);   /* deep warm red                  ~#9B3A33 */
  --alert-ink:  oklch(0.46 0.13 25);   /* legible alert text             ~#9A352C */
  --alert-line: oklch(0.78 0.08 25);   /*                                ~#DCA99B */
  --alert-soft: oklch(0.95 0.03 28);   /*                                ~#F7E9E2 */

  /* Solid action */
  --accent:    var(--ink);             /* solid button bg (espresso) */
  --on-accent: oklch(0.987 0.006 85);  /* 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; }