/* 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. Chosen by Rayan 27 Aug 2026: option A, lime on charcoal. */
  --lime:        #c8f542;   /* progress, the slash, anything EARNED */
  --charcoal:    #161616;   /* every background */
  --white:       #ffffff;   /* the word "log", primary text */
  --grey:        #6b7280;   /* labels, and what has not happened yet */

  /* Light backgrounds only: raw lime is unreadable on white. */
  --lime-on-light: #7ba800;

  /* Roles. Components reference these, never the raw colours above, so the palette
     can change in one place without hunting through screens. */
  --bg:          var(--charcoal);
  --surface:     #1c1c1a;
  --ink:         var(--white);
  --ink-dim:     var(--grey);
  --accent:      var(--lime);
  --warn:        #fab219;
  --danger:      #d03b3b;

  --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); }