/* 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) */
  --kfe-node-fill:        #1a1a1a;     /* same as bg, plus white border */
  --kfe-node-border:      #ffffff;
  --kfe-node-text:        #ffffff;     /* default number colour */
  --kfe-node-completed:   #8cc63f;     /* lime number for a COMPLETED node — iOS kPassedTextColor RGB(140,198,63); Brief 153 (was --kfe-node-current/#a4cb39, keyed off the current node) */
  --kfe-line-stage:       #f89b25;     /* orange — stage-level squiggle */
  --kfe-line-lesson:      #23a4d9;     /* cyan — lesson-level squiggle */
  --kfe-locked-opacity:   0.35;        /* applied to whole node + leading path */

  /* Star milestone */
  --kfe-star-fill:    #a89476;     /* gold/tan */
  --kfe-star-stroke:  #ffffff;

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