/* ═══════════════════════════════════════════════════════════════════════════
   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}