/* ==========================================================================
   Insurance Manager · Clickable prototype
   01 — Design tokens  ·  MOBILE FIRST

   Every value here is the MOBILE baseline. Larger viewports build on top
   (@media (min-width: …)) — never the other way round.

   Breakpoints (always min-width):
     sm  480px   larger phones
     md  768px   tablet / landscape
     lg 1024px   small desktop
     xl 1280px   desktop
   ========================================================================== */

:root {
  /* --- Brand colours ----------------------------------------------------- */
  --c-blue:            #0066B3; /* primary action, links                    */
  --c-blue-600:        #005CA9; /* logo blue, hover                         */
  --c-blue-700:        #004B8B; /* active / pressed                         */
  --c-navy:            #002047; /* dark surfaces, footer, hero              */
  --c-navy-2:          #002D67; /* headings                                 */
  --c-orange:          #EC6608; /* logo accent                              */

  /* --- Neutrals ---------------------------------------------------------- */
  --c-ink:             #262626;
  --c-ink-2:           #414141;
  --c-muted:           #6E6E6E;
  --c-hint:            #999999;
  --c-line:            #D9D9D9;
  --c-line-soft:       #E8ECF0;
  --c-surface:         #FFFFFF;
  --c-surface-2:       #FAFBFC;
  --c-bg:              #F8FBFD;
  --c-bg-flat:         #F9F9F9;
  --c-grey-100:        #F2F2F2;

  /* --- Tints ------------------------------------------------------------ */
  --c-tint:            #ECF4F9; /* info box                                 */
  --c-tint-2:          #E5EFF7; /* secondary button                         */
  --c-tint-3:          #DCEAF6; /* secondary button, hover                  */

  /* --- Status ----------------------------------------------------------- */
  --c-green:           #3A9E7A;
  --c-green-bg:        #E6F9F2;
  --c-green-check:     #81C419;
  --c-chipblue:        #0159C1;
  --c-chipblue-bg:     #E6EFF9;
  --c-amber:           #9B7B23;
  --c-amber-bg:        #F9F5E6;
  --c-grey-chip:       #898989;
  --c-grey-chip-bg:    #F2F2F2;
  --c-danger:          #C11943;
  --c-danger-bg:       #FDE9F0;

  /* --- Rating scale (hero cards) ----------------------------------------- */
  --c-rate-good:       #1CC35D;
  --c-rate-good-bg:    #E8F8F0;
  --c-rate-mid:        #F09323;
  --c-rate-mid-bg:     #FEF4E7;
  --c-rate-bad:        #C11943;
  --c-rate-bad-bg:     #FDE9F0;
  --c-rate-off:        #D7D7D7;

  /* --- Cover meter -------------------------------------------------------- */
  --c-gauge-1:         #E52202;
  --c-gauge-2:         #D3CB01;
  --c-gauge-3:         #39A111;

  /* --- Type -------------------------------------------------------------- */
  --font-sans: "Fira Sans", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Mobile baseline sizes — the tiers scale them up in base.css. */
  --fs-display:  2.125rem;  /* hero headline         */
  --fs-h1:       1.5rem;
  --fs-h2:       1.25rem;
  --fs-h3:       1.0625rem;
  --fs-body:     1rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-xxs:      0.6875rem;

  --lh-tight:    1.18;
  --lh-snug:     1.32;
  --lh-body:     1.6;

  /* --- Grid & radii ------------------------------------------------------- */
  --maxw:        1200px;
  --maxw-narrow: 856px;
  --gutter:      16px;      /* grows from sm/md up */

  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* --- Touch ------------------------------------------------------------ */
  --tap:   48px;           /* minimum size of every tap target */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 62px;        /* height of the bottom nav (phones only) */
  --actionbar-h: 76px;     /* height of the sticky action bar in the wizard */

  /* --- Shadows ------------------------------------------------------------ */
  --sh-xs: 0 1px 2px rgba(0, 32, 71, .06);
  --sh-sm: 0 2px 6px rgba(0, 32, 71, .07);
  --sh-md: 0 6px 20px rgba(0, 32, 71, .09);
  --sh-lg: 0 16px 44px rgba(0, 32, 71, .13);
  --sh-xl: 0 28px 70px rgba(0, 32, 71, .18);
  --sh-up: 0 -6px 22px rgba(0, 32, 71, .10);
  --sh-focus: 0 0 0 3px rgba(0, 102, 179, .28);

  /* --- Motion ------------------------------------------------------------- */
  --e-out:    cubic-bezier(.22, .8, .28, 1);
  --e-in-out: cubic-bezier(.5, 0, .2, 1);
  --e-spring: cubic-bezier(.16, 1.02, .3, 1.12);
  --t-fast:   140ms;
  --t-base:   240ms;
  --t-slow:   420ms;
  --t-xslow:  700ms;

  /* --- Layers ------------------------------------------------------------- */
  --z-tabbar:   55;
  --z-header:   60;
  --z-dropdown: 70;
  --z-overlay:  90;
  --z-modal:   100;
  --z-toast:   120;
  --z-devbar:  130;
}

/* --- Tier sm: larger phones ---------------------------------------------- */
@media (min-width: 480px) {
  :root {
    --gutter: 20px;
    --fs-display: 2.5rem;
    --fs-h1: 1.75rem;
  }
}

/* --- Tier md: tablet ------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    --gutter: 28px;
    --fs-display: 3rem;
    --fs-h1: 2rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.125rem;
    --r-xl: 24px;
    --r-2xl: 28px;
    --tabbar-h: 0px;       /* from here the header nav takes over */
    --actionbar-h: 0px;
  }
}

/* --- Tiers lg / xl: desktop ---------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
    --fs-display: 3.25rem;
    --fs-h1: 2.25rem;
    --fs-h2: 1.625rem;
    --r-2xl: 32px;
  }
}
@media (min-width: 1280px) {
  :root {
    --gutter: 40px;
    --fs-display: 3.5rem;
    --fs-h1: 2.375rem;
    --fs-h2: 1.75rem;
  }
}

/* Anyone who prefers reduced motion gets everything at once, and calmly. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-xslow: 1ms;
  }
}