/* ==========================================================================
   ELDERCARE MOBILE WEB — DESIGN TOKENS
   Surface: m.eldercare.com · Customer experience · Mobile web
   --------------------------------------------------------------------------
   The brand ramps below are the SAME VALUES as assets/theme.css. Mobile is a
   different surface, not a different brand — so the palette, the type floors
   and the 48px target rule are carried over unchanged, and only the things
   that are genuinely about a phone are re-decided here.

   WHAT CHANGED FROM DESKTOP, AND WHY

   1. Type is expressed in rem, not px.
      Desktop fixed the scale in pixels. On a phone the user's OS text-size
      setting is the single most-used accessibility control there is, and a px
      scale ignores it. Every step below is the same rendered size as desktop
      at a 16px root, and grows with the user's preference from there.
      17px body and 20px primary actions remain the floor (spec 4.1).

   2. The display sizes come down.
      Desktop h1 is 28px against a 1120px column. A phone column is ~330px, so
      the same 28px wraps a 4-word headline onto three lines. Page titles drop
      to 26px and the hero display to 30px; nothing below body size moves.

   3. Radii go up, shadows get softer.
      Cards sit edge-to-edge or near it on a phone, so a 14px radius reads as
      almost-square. 18px is the native-feeling default here, 28px for sheets.

   4. New tokens exist only for phone chrome: appbar, tabbar, action bar,
      sheet, safe-area insets, and the live viewport height.
   ========================================================================== */

:root {
  /* ---------- BRAND RAMPS — identical to assets/theme.css ---------------- */
  --green-900: #06301F;
  --green-800: #0A5239;
  --green-700: #0F6E4E;   /* PRIMARY */
  --green-600: #17875F;
  --green-500: #2FA077;
  --green-200: #A9D7C4;
  --green-100: #CDE6D9;
  --green-050: #E9F4EF;

  --amber-900: #6B3007;
  --amber-800: #8A3F07;
  --amber-700: #B45309;   /* SECONDARY — marks the Warrior */
  --amber-500: #D98324;
  --amber-200: #F2D2AC;
  --amber-100: #F8E6CE;
  --amber-050: #FDF4E8;

  --petrol-900: #142C3A;
  --petrol-700: #23485C;  /* TERTIARY */
  --petrol-500: #4A7189;
  --petrol-100: #DCE7ED;
  --petrol-050: #F0F5F8;

  /* Warm-tinted neutrals. Older users report warm interfaces as clearer and
     more cared-for; an earlier desktop draft on cool grey read as clinical. */
  --ink-900: #1C1A17;
  --ink-700: #3E3A34;
  --ink-500: #6B6459;
  --ink-300: #A39B8E;
  --ink-200: #DAD3C8;
  --ink-100: #EBE6DD;
  --ink-050: #FAF7F2;
  --white:   #FFFFFF;

  /* ---------- SEMANTIC ALIASES ------------------------------------------ */
  --color-brand:        var(--green-700);
  --color-brand-deep:   var(--green-800);
  --color-brand-soft:   var(--green-050);
  --color-brand-edge:   var(--green-100);
  --color-on-brand:     var(--white);

  --color-accent:       var(--amber-700);
  --color-accent-deep:  var(--amber-800);
  --color-accent-soft:  var(--amber-050);
  --color-accent-edge:  var(--amber-100);

  --color-support:      var(--petrol-700);
  --color-support-soft: var(--petrol-050);
  --color-support-edge: var(--petrol-100);

  --color-bg:           var(--ink-050);
  --color-surface:      var(--white);
  --color-surface-alt:  #F4F0E9;
  --color-border:       var(--ink-200);
  --color-border-soft:  var(--ink-100);

  --color-text:         var(--ink-900);
  --color-heading:      var(--petrol-900);
  --color-text-muted:   var(--ink-500);
  --color-text-faint:   var(--ink-300);

  --color-success:      var(--green-700);
  --color-success-soft: var(--green-050);
  --color-warning:      var(--amber-700);
  --color-warning-soft: var(--amber-050);
  --color-danger:       #A8231C;
  --color-danger-soft:  #FBEDEB;
  --color-danger-edge:  #F0CFCD;
  --color-info:         #1B5E8C;
  --color-info-soft:    #EAF2F8;
  --color-info-edge:    #CBDDEA;

  /* ---------- TYPE — same rendered sizes as desktop, in rem ------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:     0.8125rem;  /* 13 — metadata only, never body copy */
  --fs-sm:     0.9375rem;  /* 15 */
  --fs-base:   1.0625rem;  /* 17 — spec floor is 16, we sit above it */
  --fs-lg:     1.1875rem;  /* 19 */
  --fs-action: 1.25rem;    /* 20 — spec: primary actions 20+ */
  --fs-xl:     1.375rem;   /* 22 */
  --fs-2xl:    1.625rem;   /* 26 — screen title */
  --fs-3xl:    1.875rem;   /* 30 — hero display */
  --fs-4xl:    2.375rem;   /* 38 — the one number that carries a screen */

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.6;

  --fw-normal: 400;
  --fw-medium: 550;
  --fw-bold:   700;

  /* ---------- SPACE ----------------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* The single horizontal gutter. Fluid so a 320px phone keeps its content
     and a 430px phone does not look cramped. */
  --gutter: clamp(16px, 4.6vw, 22px);

  /* ---------- SHAPE ----------------------------------------------------- */
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 2px rgba(28, 26, 23, .06);
  --shadow:     0 2px 10px rgba(28, 26, 23, .07);
  --shadow-lg:  0 10px 30px rgba(28, 26, 23, .13);
  --shadow-up:  0 -2px 16px rgba(28, 26, 23, .09);
  --shadow-bar: 0 1px 0 rgba(28, 26, 23, .07);

  /* ---------- PHONE CHROME --------------------------------------------- */
  --tap-min:   48px;   /* spec 4.1 — unchanged from desktop */
  --wfbar-h:   32px;   /* reviewer strip — desktop's is 44px; thinner here, phone width can't spend more */
  --appbar-h:  56px;
  --tabbar-h:  60px;
  --sheet-max: 86%;

  /* Safe areas, resolved once so every component can add them to its own
     padding without repeating the env() fallback dance. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* Live app height. app.js keeps this in step with visualViewport so a
     growing browser toolbar or an opening keyboard shrinks the frame rather
     than pushing the action bar off-screen. 100dvh is the pre-JS answer. */
  --app-h: 100dvh;

  /* Height the scroller must reserve at the bottom so fixed bars never cover
     the last row of content. Recomputed by the shell per screen. */
  --bottom-inset: 0px;

  /* ---------- MOTION ---------------------------------------------------- */
  --ease-out:   cubic-bezier(.22, .8, .3, 1);
  --ease-in:    cubic-bezier(.5, 0, .9, .3);
  --ease-sheet: cubic-bezier(.2, .9, .25, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   380ms;
}

/* dvh is well supported now, but a browser without it would collapse the
   frame to nothing, so keep an explicit fallback ahead of the modern value. */
@supports not (height: 100dvh) {
  :root { --app-h: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}