/* =====================================================================
   Tracks — branding.css
   Design tokens shared across all pages. Loaded BEFORE app.css and
   public.css so those stylesheets can reference the variables.
   =====================================================================

   Sibling file to Campfire's branding.css — same structure, different
   palette. The "Topo" palette below was selected in the Tray UI polish
   drop (drop 5): warm browns + sage / forest green, tuned for a paper-
   map outdoor feel. The speed-line palette in tracking.js is designed
   to coexist with these UI colours without competing visually.

   Light-/dark-mode plumbing is intentionally NOT in this drop. When a
   dark mode toggle is added (see tracks_punch_list.md), add a block
   that flips these tokens via [data-theme="dark"] on :root.
   ===================================================================== */

:root {
    /* ── Palette — "Topo" ────────────────────────────────────────────── */
    --color-bg:            #F4EFE7;   /* paper / map cream                */
    --color-surface:       #FFFFFF;
    --color-surface-alt:   #EDE6D8;
    --color-border:        #D8CFBE;
    --color-border-strong: #C7BDA8;
    --color-text:          #2C2A26;
    --color-text-muted:    #6C685F;
    --color-text-faint:    #9A958A;
    --color-text-inverse:  #FFFFFF;

    /* Nav / chrome — dark forest. Used for top bar, bottom nav. */
    --color-nav-bg:        #2C3B2D;
    --color-nav-bg-soft:   #3A4B3B;
    --color-nav-text:      rgba(255,255,255,0.72);
    --color-nav-text-on:   #FFFFFF;

    /* Accent — fresh trail green */
    --color-accent:        #6B9E3F;
    --color-accent-hover:  #7CB247;
    --color-accent-press:  #588532;
    --color-accent-soft:   rgba(107,158,63,0.14);

    /* Status */
    --color-danger:        #C0392B;
    --color-danger-hover:  #D34638;
    --color-danger-soft:   rgba(192,57,43,0.12);
    --color-warning:       #D08A1C;
    --color-success:       #4F7B3A;
    --color-info:          #2E6A8A;

    --color-link:          var(--color-accent);
    --color-link-hover:    var(--color-accent-hover);

    /* Recording / tracking beacon — classic red dot */
    --color-beacon:        #C0392B;
    --color-beacon-pulse:  rgba(192,57,43,0.45);

    /* ── Typography ──────────────────────────────────────────────────── */
    --font-thin:           'axiformathin', 'Helvetica Neue', Arial, sans-serif;
    --font-book:           'axiformabook', 'Helvetica Neue', Arial, sans-serif;
    --font-medium:         'axiformamedium', 'Helvetica Neue', Arial, sans-serif;
    --font-semibold:       'axiformasemibold', 'Helvetica Neue', Arial, sans-serif;
    --font-bold:           'axiformabold', 'Helvetica Neue', Arial, sans-serif;

    --fs-xs:    11px;
    --fs-sm:    13px;
    --fs-base:  15px;
    --fs-md:    17px;
    --fs-lg:    20px;
    --fs-xl:    26px;
    --fs-2xl:   34px;
    --fs-3xl:   44px;

    --lh-tight:  1.15;
    --lh-snug:   1.3;
    --lh-normal: 1.5;

    /* ── Spacing scale ───────────────────────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* ── Layout sizing ───────────────────────────────────────────────── */
    --top-bar-height:    44px;
    --bottom-nav-height: 60px;
    --stats-bar-height:  88px;   /* idle/tracking compact stats height  */
    --safe-bottom:       env(safe-area-inset-bottom, 0px);
    --safe-top:          env(safe-area-inset-top, 0px);

    /* ── Radius ──────────────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ── Elevation ───────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.14);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.20);
    --shadow-tray: 0 -6px 24px rgba(0, 0, 0, 0.18);

    /* ── Z layers ────────────────────────────────────────────────────── */
    --z-map:        1;
    --z-controls:   1000;
    --z-stats:      1050;
    --z-nav:        1100;
    --z-tray:       1200;
    --z-toast:      1300;
    --z-modal:      1400;

    /* ── Motion ──────────────────────────────────────────────────────── */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:     120ms;
    --dur-base:     200ms;
    --dur-close:    150ms;
    --dur-slow:     320ms;

    /* ── Form controls ───────────────────────────────────────────────── */
    --input-bg:           var(--color-surface);
    --input-border:       var(--color-border);
    --input-border-focus: var(--color-accent);
    --input-text:         var(--color-text);
    --input-placeholder:  #A09A8D;

    /* ── Buttons ─────────────────────────────────────────────────────── */
    --btn-primary-bg:        var(--color-accent);
    --btn-primary-bg-hover:  var(--color-accent-hover);
    --btn-primary-bg-press:  var(--color-accent-press);
    --btn-primary-text:      var(--color-text-inverse);

    --btn-secondary-bg:      transparent;
    --btn-secondary-border:  var(--color-border-strong);
    --btn-secondary-text:    var(--color-text);

    --btn-danger-bg:         var(--color-danger);
    --btn-danger-bg-hover:   var(--color-danger-hover);
}

/* ── Standalone (installed PWA) safe-area overrides ──────────────────────
   When the app is launched from the home screen, the iOS status indicator
   and the home indicator both need clearance. We use max(env, floor) so
   modern devices that report real safe-area insets get them, but devices
   that report 0 still get a sane top-bar offset. Bottom is left to the
   real env value — no longer pinned to 0 — so the bottom nav clears the
   home indicator. Browser tab experience is unchanged (env-only). */
@media (display-mode: standalone) {
    :root {
        --safe-top:    max(env(safe-area-inset-top, 0px), 30px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
    }
}