/* ============================================================
   Journal — "Natural & Organic" restyle tokens
   Stone + Moss palette · Editorial type (serif prose / sans UI)
   Drop these variables into the existing app and reference them
   when restyling. Values are the EXACT ones used in the prototype.
   ============================================================ */

:root {
  /* ---- Surfaces (warm greige, all light) ---- */
  --bg-app:            #e4e1d9;  /* outermost canvas */
  --bg-panel:          #e9e6dd;  /* left + right sidebars */
  --bg-paper:          #f7f5ef;  /* journal editor surface + cards */
  --bg-toolbar:        #f4f2ea;  /* editor toolbar strip */
  --bg-inset:          #f0eee5;  /* stat chips, inset wells */
  --bg-search:         #f0eee6;  /* search field */

  /* ---- Ink / text ---- */
  --ink-1:             #2f3a31;  /* headings (dates) */
  --ink-2:             #34372f;  /* card titles, primary body */
  --ink-body:          #43463f;  /* journal prose */
  --ink-muted:         #6f7269;  /* secondary UI text */
  --ink-soft:          #86887d;  /* entry previews */
  --ink-faint:         #a4a698;  /* labels, meta, captions */
  --ink-faint-2:       #a0a296;  /* timeline times */

  /* ---- Borders / hairlines ---- */
  --line-card:         rgba(56,58,53,0.07);
  --line-divider:      rgba(56,58,53,0.08);
  --line-strong:      rgba(56,58,53,0.10);
  --line-chip:         rgba(56,58,53,0.06);  /* category pill bg */

  /* ---- Accents ---- */
  --moss:              #5f7560;  /* primary accent: Today btn, drives, selection */
  --moss-tint:         #eef1ea;  /* drive node fill */
  --moss-sel:          rgba(95,117,96,0.12); /* selected entry bg */
  --sage:              #9aa18c;

  --green:             #6f9059;  /* workouts (text/route) */
  --green-2:           #7fa06a;  /* workout fills, battery good */
  --green-tint:        #eef2e9;  /* workout node fill */

  --slate:             #748a93;  /* calendar events */
  --slate-2:           #7f99a3;
  --slate-tint:        #eaeef0;

  --clay:              #a8604a;  /* spending (outgoing), low battery text */
  --clay-dot:          #c08a78;  /* spend timeline dot, low battery fill */

  /* ---- Health activity rings ---- */
  --ring-move:         #c87f5e;
  --ring-exercise:     #7fa06a;
  --ring-stand:        #5f9a98;

  /* ---- Maps (soft, muted) ---- */
  --map-drive-bg:      #e4e9ed;  /* DRIVES = cool blue-stone */
  --map-drive-area:    #cdd9dd;
  --map-drive-area-2:  #d6e1e4;
  --map-workout-bg:    #e8ece1;  /* WORKOUTS = warm green */
  --map-workout-area:  #d3ddce;
  --map-workout-area-2:#dfe6db;
  --map-road:          #ffffff;  /* drawn at 0.4–0.6 opacity */
  --route-drive:       #5f7560;  /* moss */
  --route-workout:     #6f9059;  /* green */

  /* ---- Type ---- */
  --font-serif: "Newsreader", Georgia, serif;   /* journal prose + dates */
  --font-sans:  "Hanken Grotesk", system-ui, sans-serif; /* all UI/data */

  --fs-date:        24px;  /* editor date heading, weight 500, serif */
  --fs-prose:       18px;  /* journal body, line-height 1.72, serif */
  --fs-entry-date:  14.5px;/* entry list date, weight 600, serif */
  --fs-card-title:  14px;  /* sans, weight 600 */
  --fs-body:        13px;
  --fs-meta:        11.5px;
  --fs-label:       10.5px;/* uppercase, weight 600, tracking 0.13em */
  --lh-prose:       1.72;

  /* ---- Radii ---- */
  --r-glass:   18px;  /* day-at-a-glance card */
  --r-card:    15px;  /* timeline cards */
  --r-tile:    14px;  /* photos */
  --r-pill:    20px;  /* category chips, badges */
  --r-field:   12px;  /* buttons, search */
  --r-chip:    9px;   /* stat chips */
  --r-map:     11px;

  /* ---- Elevation ---- */
  --shadow-card:  0 1px 2px rgba(56,58,53,0.04);
  --shadow-raise: 0 1px 2px rgba(56,58,53,0.08);

  /* ---- Spacing rhythm (used throughout) ---- */
  --pad-panel: 18px;
  --pad-card:  14px;
  --gap-rail:  16px;  /* vertical gap between timeline rows */

  /* ---- Layout ---- */
  --col-left:  300px;
  --col-right: 388px;  /* middle column is flex:1 */
}

/* Tabular figures for all numeric/data text */
.num { font-variant-numeric: tabular-nums; }