/* tokens.css — design tokens as CSS custom properties.
 *
 * Dark-only, KFE-canonical. Sources: KFE GUI iPhone SN V2.5 2016-08-09 design
 * guide and the current iOS production app. Edit only with both references in
 * hand — these tokens drive every screen's brand fidelity.
 */

:root {
  /* === KFE brand palette (canonical, per 2016 GUI design guide) === */

  /* Surfaces */
  --kfe-bg:           #1a1a1a;   /* primary dark body */
  --kfe-bg-header:    #000000;   /* header bar */
  --kfe-surface:      #2a2a2a;   /* alternating list rows, sub-surfaces */
  --kfe-surface-hover:#333333;
  --kfe-border:       #3a3a3a;

  /* Foreground */
  --kfe-fg:           #ffffff;
  --kfe-muted:        #999999;

  /* Brand accents */
  --kfe-accent:       #f89b25;   /* KFE orange — stage paths, active states, brand */
  --kfe-on-accent:    #ffffff;
  --kfe-success:      #a4cb39;   /* KFE lime — current/just-completed state cues */
  --kfe-link:         #f89b25;

  /* Squiggle node + connector tokens (level-aware).
     Brief 198: the three node colours and the fill are read straight from
     iOS `KFEGatingLineView.m` — #333 disc + 1 pt white ring in every state,
     and only the NUMBER (or the star) takes the state colour. The star has
     no colour of its own any more: it inherits the node's state colour
     (`:1577-1578`), which is why iOS shows it green. The tan
     `--kfe-star-fill` Brief 002b introduced is gone — its iOS source
     (kEndingStarAllCompletedColor) is dead code in the shipped build. */
  --kfe-node-fill:        #333333;     /* KFEGatingLineView.m:1529 RGB(51,51,51) */
  --kfe-node-border:      #ffffff;     /* KFEGatingLineView.m:1532 */
  --kfe-node-text:        #ffffff;     /* kPlayingTextColor — available / "in process" */
  --kfe-node-completed:   #8cc63f;     /* kPassedTextColor RGB(140,198,63) — completed */
  --kfe-node-locked:      #6d6d6d;     /* kUnavailableTextColor RGB(109,109,109) — not yet accessible */
  --kfe-line-stage:       #ff931e;     /* StagesViewController.m:454 RGB(255,147,30) — stage squiggle */
  --kfe-line-lesson:      #29abe2;     /* LessonsViewController.m:401 KFEsRGB(41,171,226) — lesson squiggle */
  --kfe-locked-opacity:   0.35;        /* locked list rows / disabled buttons (NOT squiggle nodes) */

  /* The shell's page gutter. A token because the squiggle bleeds back out of
     it to span the full screen width, the way iOS does (Brief 198). */
  --kfe-page-pad:         1rem;
  /* The app column's width. Below this the layout is the phone layout,
     unchanged; above it <main> grows its inline padding so the column — and
     therefore the squiggle — is centred (Brief 198 item 10). */
  --kfe-app-max-width:    480px;

  /* Activity-wheel palette (Reports, filter chips, future use) */
  --kfe-listen:    #e63e2e;
  --kfe-visualise: #e81f76;
  --kfe-test:      #a4cb39;
  --kfe-read:      #23a4d9;
  --kfe-speak:     #f89b25;

  /* Typography */
  --kfe-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
              "Hiragino Sans GB", Roboto, "Helvetica Neue", sans-serif;
  --kfe-h1: 1.5rem;
  --kfe-h2: 1.2rem;

  /* Layout */
  --kfe-radius: 8px;
  --kfe-gap:    0.75rem;

  /* Orange separator between the lesson-detail main header and its lesson
     sub-header (Brief 099 §3 / V1-UI-DESIGN-NOTES §7.1). Lesson-detail-only —
     NOT a global shell element. */
  --kfe-separator-orange-height: 2px;
  --kfe-separator-orange-color:  var(--kfe-accent);

  /* Breakpoints (design-doc §5.2). Phone ≤600, tablet 600–1024 (same nav
     chrome as phone), desktop ≥1024. The navigation shell (Brief 089) swaps
     the bottom tab bar (≤1024) for the top-nav (≥1024) at --kfe-bp-desktop.
     NOTE: CSS custom properties CANNOT be used inside `@media` conditions, so
     every `@media (min-width: …)` for these breakpoints must hardcode the SAME
     pixel value declared here. These vars are the single documented source so
     the §5 layout brief and any JS matchMedia checks reuse them and can't
     drift from the CSS. If you change a value here, grep for the hardcoded
     px in component @media blocks and update them together. */
  --kfe-bp-phone:   600px;
  --kfe-bp-desktop: 1024px;

  /* L2B image card — transparent-PNG line drawings need a light cell behind
     them or they vanish on the dark theme. iOS canon: white image cell
     (KFEContentsView.m:268 KFELTBDragImageView; KFESelfRecordingVC.xib
     contentImageView), aspect-fit, no border, no corner radius (square cells,
     5pt grid spacing). The web port keeps a rounded card consistent with the
     rest of the dark-theme UI. HAAI .jpg photos are opaque and never use these.
     Background stays light regardless of any future light theme — the drawings
     need contrast against the figure, not the surrounding chrome (Brief 061). */
  --kfe-l2b-image-bg:      #ffffff;
  --kfe-l2b-image-radius:  var(--kfe-radius);  /* iOS cells are square; web rounds */
  --kfe-l2b-image-padding: 0.5rem;             /* iOS SR/grid use 0; small web inset */

  color-scheme: dark;
}

/* Safe-area inset support for iOS standalone PWA */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}