/* Log/Pro design tokens. THE ONLY PLACE a colour or a typeface is defined.
 *
 * Rayan, 28 Aug 2026: "make sure its inside deep the code to always use the brand
 * font and colors". So brand values live here and nowhere else. No component may
 * write a hex code or a font-family of its own; it uses a var() or it is wrong.
 * A stylesheet with hex codes scattered through it is a brand that drifts.
 *
 * The font is SELF-HOSTED, deliberately. Loading it from Google would tell Google
 * the IP address of every person using an app that holds their health data.
 */
/* Cairo, chosen by Rayan 28 Aug 2026 for Arabic. Only the ARABIC subset is served:
 * Cairo's latin glyphs are never wanted, because Space Grotesk comes first in the
 * stack and the browser falls back per glyph. So Arabic text picks up Cairo
 * automatically with no language switch, no duplicated stylesheet, and no risk of
 * an English screen quietly rendering in the wrong face. */
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
                 U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                 U+FE70-FEFF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;                 /* variable range, one file */
  font-display: swap;                   /* text shows immediately, never invisible */
  src: url('/assets/fonts/spacegrotesk-latin.woff2') format('woff2');
}

:root {
  /* Brand. REPLACED 19 September 2026 from his own Log Pro Brand Guide v1: black
     performance aesthetic with a vivid green action language. The previous palette,
     lime #c8f542 on charcoal #161616, was chosen 27 Aug 2026 and is superseded.
     This is the only edit needed to restyle every screen, which is the whole reason
     the file exists. */
  --green:       #00E676;   /* CTAs, active states, streaks, positive progress */
  --near-black:  #0A0A0A;   /* the app background */
  --surface-raw: #141414;   /* raised surfaces and navigation */
  --card:        #1F1F1F;   /* cards, sheets, grouped content */
  --white:       #ffffff;   /* primary text, and the word "Log" */
  --muted:       #A3A3A3;   /* secondary text */
  --info:        #3887E8;   /* informational, and one macro category */

  /* Light backgrounds only: #00E676 on white fails contrast badly. Darkened until it
     passes 4.5:1 against white, because a brand colour that cannot be read is not a
     brand colour. */
  --green-on-light: #007940;

  /* Roles. Components reference these, never the raw colours above, so the palette
     can change in one place without hunting through screens. */
  --bg:          var(--near-black);
  --surface:     var(--surface-raw);
  --ink:         var(--white);
  --ink-dim:     var(--muted);
  --accent:      var(--green);
  --warn:        #F59E0B;
  --danger:      #EF4444;
  --line:        #232323;

  /* Text and icons sitting ON the accent. Green is bright, so anything on top of it must
     be near-black or it is unreadable; this used to be written as a raw #161616 in three
     different screens, which is how the old background colour ended up doubling as a text
     colour. Naming the role is what stops that happening again. */
  --on-accent:   var(--near-black);

  /* Kept as aliases, not orphans. Renaming the palette broke six screens that still said
     var(--charcoal), and a var() that resolves to nothing fails SILENTLY: the text simply
     inherits and nobody notices until a page looks wrong on his phone. Found by checking
     every token a page uses against every token this file defines, which is now a test.
     --panel and --bad predate tonight and were already dangling. */
  --charcoal:    var(--near-black);   /* old name for the background */
  --grey:        var(--muted);        /* old name for secondary text */
  --panel:       var(--card);
  --bad:         var(--danger);

  /* Macro colours. His board shows P, C and F as three distinct chips, so they need
     three tokens rather than three hex codes written into one screen. */
  --macro-p:     var(--green);
  --macro-c:     var(--info);
  --macro-f:     var(--warn);

  --font: 'Space Grotesk', 'Cairo', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-sm: 6px; --r-md: 10px; --r-lg: 20px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 22px; --sp-5: 34px;
}

/* Arabic is coming, so direction is never assumed. Article 1: the layout mirrors,
   it is not translated. Everything below uses logical properties for that reason. */
[dir="rtl"] { --dir: rtl; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}
.brand { font-weight: 700; letter-spacing: -.5px; }
.brand .slash { color: var(--accent); }
.brand .pro   { color: var(--accent); }
.muted { color: var(--ink-dim); }
.earned { color: var(--accent); }

/* ONE NAV, EVERY PAGE, FIXED AT THE BOTTOM. Rayan, 29 Aug 2026: "make all pages
   placement equal and the same across. Make sure that's permanent."
   It lives HERE, in the file every page already loads, rather than in each page. That is
   what makes it permanent: four copies agree until someone edits one of them.
   Bottom because that is where the thumb is. 44px because that is the tap-target floor.
   The body padding is not decoration: without it a fixed bar sits on top of the last
   thing he was reading. */
nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 8px; padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--bg, #0d0d0d); border-top: 1px solid var(--line, #232323);
}
nav a {
  flex: 1; min-height: 44px; line-height: 44px; text-align: center;
  border-radius: 10px; text-decoration: none; font-size: 15px;
  background: var(--panel, #17171a); color: var(--ink-dim, #8a8a85);
}
nav a.on { background: var(--accent); color: var(--bg, #0d0d0d); font-weight: 600; }
body { padding-bottom: 84px; }