/* ─────────────────────────────────────────────────────────────
   CaliPath — design tokens
   Values come from CaliPath.dc.html. Phone (390x844) values are the
   defaults; desktop (1440x900) overrides them at 900px, which is also
   where the navigation changes shape.

   Screens must fit the viewport without scrolling, so the sizes that
   drive vertical space are computed rather than fixed: each one is
   min(design size, what actually fits). At the design's own viewport
   the design size wins; on anything shorter the layout shrinks
   instead of scrolling.
   ───────────────────────────────────────────────────────────── */

:root{
  /* ── Constant colours (§2.1) ── */
  --grey:#999EA2;

  /* ── Section colours (§2.3) ── */
  --home:#E84B02;
  --training:#D10D0D;
  --nutrition:#057815;
  --flexibility:#6D089C;
  --shop:#283BC9;

  /* The one section colour on screen, set per route by the router. */
  --accent:var(--home);

  --font:'League Spartan',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0,0,.2,1);

  /* ══ Phone chrome ══ */
  --topbar-h:74px;
  --topbar-pad:0 22px 0 16px;
  --logo-h:36px;
  --avatar:44px;
  --burger-w:40px;
  --burger-bar:4px;
  --burger-gap:4.5px;

  --botbar-h:82px;
  --tab-icon:28px;
  --tab-label:12px;
  --tab-underline-w:32px;

  --pad-x:20px;
  --pad-top:8px;
  --pad-bottom:10px;

  /* ══ Home ══ */
  --greet:36px;
  --greet-lh:.95;
  --expr-box:72px;
  --expr-mt:6px;
  --stats-mt:12px;
  --stat-gap:12px;
  --greet-offset:12px;   /* nudges the greeting down from the bar */
  --stats-inset:0px;     /* phone cards span the full width */
  --stat-max:200px;

  /* ══ Section screens ══ */
  --heading:42px;
  --heading-lh:.95;
  --heading-mb:10px;

  --tile-sq-cols:2;
  --tile-sq-gap:14px;
  --tile-sq-rows:3;
  --tile-sq-max:200px;

  --tile-row-cols:1;
  --tile-row-gap:12px;
  --tile-row-rows:5;
  --tile-row-max:100px;

  /* ══ Drawer (§6.4) ══ */
  --drawer-w:78%;
  --drawer-pad:26px 26px 30px;
  --drawer-title:15px;
  --drawer-item:26px;
  --drawer-item-gap:22px;
  --drawer-items-mt:38px;
  --drawer-appearance:13px;
  --drawer-group-gap:20px;
  --drawer-btn:16px;
  --drawer-btn-pad:14px;
  --drawer-btn-radius:13px;

  /* ══ Profile / Welcome ══
     Straight off the design's "Phone Profile" artboard. The Welcome
     screen has no artboard of its own and borrows every one of these. */
  --pagebar-h:86px;
  --pagebar-pad:0 22px;
  --pagebar-title:26px;
  --pagebar-back:44px;
  --pagebar-back-icon:26px;
  --pagebar-logo:26px;

  --photo:132px;
  --photo-btn:15px;

  --field-gap:10px;
  --field-pad:12px 16px;
  --field-radius:16px;
  --field-label:14px;
  --field-value:22px;

  --btn-radius:14px;
  --btn-pad:13px 24px;
  --btn-font:16px;
  --btn-icon:22px;

  --form-pad:8px 24px 28px;
  --form-gap:16px;
  --form-side:auto;

  /* ══ Content pages (no design exists for these) ══
     Everything below a section tile. The canvas stops at the section
     screens, so these follow §8: the system is fixed, the layout is
     whatever the content needs. */
  --page-title:34px;
  --page-h2:22px;
  --page-h3:17px;
  --page-body:16px;
  --page-measure:70ch;

  --doc-eyebrow:13px;
  --doc-title-mb:18px;
  --doc-h-mt:26px;
  --doc-h-mb:8px;
  --doc-p-mb:14px;

  --meta-pad:10px 16px;
  --meta-value:20px;

  --step-n:30px;
  --step-gap:12px;

  --doclist-h:60px;
  --doclist-gap:10px;
  --doclist-pad:0 18px;
  --doclist-name:19px;
  --doclist-go:20px;
}

@media (min-width:900px){
  :root{
    --topbar-h:88px;
    --topbar-pad:0 44px;
    --logo-h:56px;
    --avatar:54px;
    --burger-w:52px;
    --burger-bar:5px;
    --burger-gap:7px;

    --botbar-h:0px;           /* the bottom bar is phone-only */
    --tab-icon:36px;
    --tab-label:18px;

    --pad-x:80px;
    --pad-top:12px;
    --pad-bottom:12px;

    --greet:80px;
    --greet-lh:.92;
    --expr-box:160px;
    --expr-mt:16px;
    --stats-mt:0px;
    --greet-offset:40px;
    --stats-inset:110px;   /* pulls the cards in off the right edge */
    --stat-gap:20px;
    --stat-max:248px;

    --heading:84px;
    --heading-lh:.92;

    --tile-sq-cols:3;
    --tile-sq-gap:24px;
    --tile-sq-rows:2;
    --tile-sq-max:304px;

    --tile-row-cols:2;
    --tile-row-gap:26px;
    --tile-row-colgap:30px;
    --tile-row-rows:3;
    --tile-row-max:136px;

    --drawer-w:33%;
    --drawer-pad:34px 38px;
    --drawer-title:17px;
    --drawer-item:30px;
    --drawer-item-gap:26px;
    --drawer-items-mt:52px;
    --drawer-appearance:14px;
    --drawer-group-gap:26px;
    --drawer-btn:17px;
    --drawer-btn-pad:15px;
    --drawer-btn-radius:14px;

    /* From the "Desktop Profile" artboard. */
    --pagebar-h:106px;
    --pagebar-pad:0 44px;
    --pagebar-title:34px;
    --pagebar-back:52px;
    --pagebar-back-icon:34px;
    --pagebar-logo:40px;

    --photo:260px;
    --photo-btn:20px;

    --field-gap:22px;
    --field-pad:22px 26px;
    --field-radius:20px;
    --field-label:20px;
    --field-value:40px;

    --btn-radius:16px;
    --btn-pad:16px 30px;
    --btn-font:20px;
    --btn-icon:26px;

    --form-pad:60px 80px 44px;
    --form-gap:70px;
    --form-side:340px;

    --page-title:56px;
    --page-h2:30px;
    --page-h3:21px;
    --page-body:18px;

    --doc-eyebrow:15px;
    --doc-title-mb:26px;
    --doc-h-mt:38px;
    --doc-h-mb:12px;
    --doc-p-mb:18px;

    --meta-pad:12px 20px;
    --meta-value:26px;

    --step-n:38px;
    --step-gap:16px;

    --doclist-h:76px;
    --doclist-gap:14px;
    --doclist-pad:0 26px;
    --doclist-name:26px;
    --doclist-go:26px;
  }
}

/* ─── Fit maths ───
   Everything below derives from the tokens above, so changing a bar
   height or a padding automatically re-fits every screen. */
:root{
  --tile-row-colgap:12px;

  /* Height left for a screen once the bars and page padding are gone. */
  --avail:calc(100dvh - var(--topbar-h) - var(--botbar-h) - var(--pad-top) - var(--pad-bottom));

  /* The section tagline block, heading plus its bottom margin. */
  --heading-block:calc(var(--heading) * var(--heading-lh) + var(--heading-mb));

  /* Width left for tiles once page padding and column gaps are gone. */
  --tiles-w:calc(100vw - 2 * var(--pad-x));

  /* Square tiles are square, so the smaller of the width they may take
     and the height they may take wins — capped at the design size. */
  --tile-sq-fit:min(
    var(--tile-sq-max),
    (var(--avail) - var(--heading-block) - (var(--tile-sq-rows) - 1) * var(--tile-sq-gap)) / var(--tile-sq-rows),
    (var(--tiles-w) - (var(--tile-sq-cols) - 1) * var(--tile-sq-gap)) / var(--tile-sq-cols)
  );

  /* Row tiles stretch to the full width, so only height constrains them. */
  --tile-row-fit:min(
    var(--tile-row-max),
    (var(--avail) - var(--heading-block) - (var(--tile-row-rows) - 1) * var(--tile-row-gap)) / var(--tile-row-rows)
  );

  /* Home's cards. On phone the greeting sits above them and eats into
     the height; on desktop it sits beside them and costs nothing. */
  --home-above:calc(var(--greet-offset) + var(--greet) * var(--greet-lh) + var(--expr-mt) + var(--expr-box) + var(--stats-mt));
  --stat-fit:min(
    var(--stat-max),
    (var(--avail) - var(--home-above) - 2 * var(--stat-gap)) / 3,
    (var(--tiles-w) - var(--stat-gap)) / 2
  );
}

@media (min-width:900px){
  :root{
    --home-above:0px;
    --stat-fit:min(var(--stat-max), (var(--avail) - 2 * var(--stat-gap)) / 3);
  }
}

/* ── Themes (§2.2). Dark is the default, light is a toggle. ── */
[data-theme="dark"]{
  --bg:#121212;
  --fg:#FFFFFF;
  --hair:rgba(153,158,162,.26);
  --logo-blend:screen;   /* the dark logo sits on pure black */
}

[data-theme="light"]{
  --bg:#FFFFFF;
  --fg:#000000;
  --hair:rgba(153,158,162,.5);
  --logo-blend:multiply; /* the light logo sits on white */
}