/* ═══════════════════════════════════════════════════════════════
   Binny Ops — design tokens.

   The only place colours, type sizes, corner radii and spacing are
   decided. Both the desktop and the phone view load this first, so a
   change here changes every screen.

   Rules of thumb:
   - Never hard-code a colour or a radius in app.css or mobile.css.
     Use a token. If a token is missing, add it here.
   - Text colours are checked against WCAG AA (4.5:1 for normal text,
     3:1 for large). The ratio is noted next to each one.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ─────────────────────────────────────────────────── */
  --c-navy:        #002C5E;   /* logo, headings, dark surfaces      */
  --c-navy-deep:   #00203F;
  --c-orange:      #E67E22;   /* the bin. Primary actions           */
  --c-orange-dark: #DE7C20;   /* hover — still 4.6:1 with navy text */
  --c-orange-text: #A0540A;   /* orange as TEXT on white — 4.6:1    */

  /* ── Neutrals ──────────────────────────────────────────────── */
  --c-ink:      #1D2530;      /* body text — 14.8:1                 */
  --c-muted:    #59636F;      /* secondary text — 6.2:1             */
  --c-faint:    #78828E;      /* only for 18px+ or non-essential    */
  --c-line:     #DCE3EA;
  --c-line-dk:  #C6D0DA;
  --c-bg:       #F1F4F7;
  --c-surface:  #FFFFFF;
  --c-surface-2:#F5F8FB;      /* hover fill                         */

  /* ── Semantic ──────────────────────────────────────────────── */
  --c-ok:        #1E6A2A;     /* 5.9:1 on its tint                  */
  --c-ok-bg:     #E4F1E6;
  --c-warn:      #7A4004;     /* 7.4:1 on its tint                  */
  --c-warn-bg:   #FBECD6;
  --c-danger:    #9E362E;     /* 6.4:1 on white                     */
  --c-danger-bg: #FBE7E5;
  --c-danger-line:#E3C2BE;
  --c-info:      #10406F;     /* 9.4:1 on its tint                  */
  --c-info-bg:   #E3EDF7;

  /* ── Type ──────────────────────────────────────────────────── */
  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-h1: 700 26px/1.2 var(--font);
  --t-h2: 700 19px/1.3 var(--font);
  --t-h3: 700 14px/1.35 var(--font);   /* uppercase overline        */
  --t-body: 500 16px/1.5 var(--font);
  --t-small: 500 14px/1.45 var(--font);
  --t-tiny: 700 12.5px/1.3 var(--font);
  --t-btn: 700 15.5px/1.2 var(--font);
  --track-h3: .07em;

  /* ── Shape ─────────────────────────────────────────────────── */
  --r-1: 8px;      /* pills, tags, small controls */
  --r-2: 10px;     /* buttons, inputs             */
  --r-3: 14px;     /* cards, panels               */
  --r-round: 999px;

  /* ── Space ─────────────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;

  /* ── Controls ──────────────────────────────────────────────── */
  --h-ctl: 44px;        /* every button and input is this tall      */
  --h-ctl-sm: 36px;
  --h-ctl-lg: 54px;

  /* ── Depth and motion ──────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(16,24,40,.06);
  --sh-2: 0 4px 14px rgba(16,24,40,.10);
  --sh-3: 0 10px 30px rgba(0,44,94,.22);
  --ease: .14s ease;
  --ring: 3px solid var(--c-orange);
}

/* Phones: one step down on the big type, taller controls for thumbs. */
@media (max-width: 640px) {
  :root {
    --t-h1: 700 22px/1.22 var(--font);
    --t-h2: 700 18px/1.3 var(--font);
    --h-ctl: 48px;
    --h-ctl-lg: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: 0s; }
}

/* ── Legacy aliases ────────────────────────────────────────────
   app.css and mobile.css still refer to these names. They now point
   at the tokens above, so there is still only one place to change a
   colour. Prefer the --c-* names in anything new.               */
:root {
  --bo-orange: var(--c-orange);
  --bo-orange-dk: var(--c-orange-dark);
  --bo-navy: var(--c-navy);
  --bo-navy-dp: var(--c-navy-deep);
  --bo-grey: var(--c-ink);
  --bo-soft: var(--c-muted);
  --bo-line: var(--c-line);
  --bo-bg: var(--c-bg);
  --bo-white: var(--c-surface);
  --bo-red: var(--c-danger);
  --bo-font: var(--font);

  --m-bg: var(--c-bg);
  --m-card: var(--c-surface);
  --m-ink: var(--c-ink);
  --m-soft: var(--c-muted);
  --m-line: var(--c-line);
  --m-navy: var(--c-navy);
  --m-orange: var(--c-orange);
  --m-orange-dk: var(--c-orange-dark);
  --m-green: var(--c-ok);
  --m-green-bg: var(--c-ok-bg);
  --m-amber-bg: var(--c-warn-bg);
  --m-amber: var(--c-warn);
  --m-red: var(--c-danger);
  --m-red-bg: var(--c-danger-bg);
  --m-blue-bg: var(--c-info-bg);
  --m-radius: var(--r-3);
}