/* ═══════════════════════════════════════════════════════════════════════════
   Coachero — marketing brand sheet

   Tokens are lifted from the app's own token block (static/index.html) so the
   site, the store mockup and the product are one visual system. The app is
   light-first with a warm sand ground and a single orange accent; `body.dark`
   there swaps the set, and the same swap is available here for surfaces that
   want the dark treatment.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('fonts.css');

:root{
  color-scheme: light;
  /* Ground & structure — warm, not white. The sand is the brand orange's own
     hue rotated and desaturated, so it sits under the accent instead of
     fighting it. */
  --bg:        #f2ede6;
  --surface:   #f8f4ef;
  --card:      #ffffff;
  --border:    #e6ded2;
  --ring-track:#ebe3d8;
  --text:      #1b1815;
  --muted:     #6e665d;
  --text-rgb:  27,24,21;
  --muted-rgb: 110,102,93;
  --bg-rgb:    242,237,230;
  /* Brand. --accent is the fill; --accent-ink is the same orange darkened so
     it clears AA as small text, which the fill orange (3.4:1 on white) does
     not. Use ink for labels, accent for fills, bars and icons. */
  --accent:     #f0521b;
  --accent-rgb: 240,82,27;
  --accent-ink: #b8400f;
  --accent-soft:#fff0e8;
  --accent-lite:#ff8352;
  --on-accent:  #ffffff;
  /* Semantic domains, straight from the app. Orange is both the brand and the
     calorie colour, which is what frees green for protein and blue for carbs. */
  --orange: #f0521b;  --blue: #2e6ff2;  --amber: #db8b00;
  --violet: #7a5af8;  --green: #0f7b57; --red: #d1453b;  --teal: #0f766e;
  --steady: #8a8078;
  --shadow-card:0 1px 2px rgba(58,44,30,.06), 0 1px 1px rgba(58,44,30,.04);
  --shadow-pop: 0 12px 32px rgba(58,44,30,.16);
  --shadow-lift:0 22px 60px rgba(58,44,30,.20);
  /* One family: Inter carries display, UI and numerals. Numerals are tabular
     so figures don't jitter between renders. */
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: var(--sans);
  --mono:    var(--sans);
}

body.dark{
  color-scheme: dark;
  --bg:        #100d0b;
  --surface:   #181310;
  --card:      #1f1a16;
  --border:    #342c25;
  --ring-track:#2a231d;
  --text:      #f2ede8;
  --muted:     #a89e94;
  --text-rgb:  242,237,232;
  --muted-rgb: 168,158,148;
  --bg-rgb:    16,13,11;
  --accent-ink:#ff8352;          /* lightened rather than darkened on black */
  --accent-soft:rgba(240,82,27,.16);
  --shadow-card:none;
  --shadow-pop: 0 12px 32px rgba(0,0,0,.5);
  --shadow-lift:0 22px 60px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Wordmark ────────────────────────────────────────────────────────────────
   The name contains the word: coac + hero. Lowercase, the second half carrying
   both the extra weight and the accent — the same two spans the app renders,
   not an image, so it stays selectable and scales with its surroundings.

   In running prose the product is still written "Coachero"; a lowercase logo
   doesn't change how the name is spelled in a sentence. */
.wordmark{font-family:var(--display);font-weight:600;letter-spacing:-.035em;
  text-transform:lowercase;color:var(--text);line-height:1;white-space:nowrap}
.wordmark b{font-weight:800;color:var(--accent-ink)}
.wordmark.lg b{color:var(--accent)}   /* clears AA at >=18.66px bold */

/* Lockup: mark + wordmark on one baseline. */
.lockup{display:inline-flex;align-items:center;gap:10px}
.lockup .mark{flex-shrink:0;display:block;color:var(--accent)}

/* Small shared helpers used by the site and the store mockup. */
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}