/* BehaviorDash — design foundations (v171)
 *
 * Tokens only. No component styles, no layout. Loaded before admin.css and
 * collect.css so surfaces can adopt tokens progressively rather than in one
 * risky sweep.
 *
 * Derived from the RECORDER, not invented. collect.css already had a coherent
 * system: 25 type sizes with 27% under 12px and real 38–56px touch targets,
 * against admin.css's 55 sizes with 68% under 12px and no touch targets at all.
 * The recorder's working band (12/13/14) anchors the scale below.
 *
 * Apple's HIG shapes the structure: semantic roles over literal hex, dark mode
 * as dimming rather than inversion, an 8pt grid, springs instead of canned
 * easing, and reduced-motion / contrast / transparency treated as real modes.
 * BehaviorDash keeps its own identity — navy and the green accent are unchanged.
 */

:root {
  /* ---------------------------------------------------------------------
   * TYPE
   * One scale. Every size in the product must be a step on it.
   * Named by role, so a component asks for --fs-body, never a number.
   * ------------------------------------------------------------------ */
  --font-brand: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Dense UI text uses the system stack: it is hinted for small sizes in a way
   * geometric faces are not, which is most of why Apple interfaces stay legible
   * at 11–13px. Poppins stays for brand and display. */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  --fs-micro:      11px;  /* uppercase labels ONLY, never sentence text */
  --fs-caption:    12px;
  --fs-footnote:   13px;

  /* CONTROL TEXT IS ITS OWN CONCEPT (V251 C5).
   *
   * Every interactive component in primitives.css used to ask for
   * --fs-footnote: the button, the form control, the search field, the tab,
   * the popover item, the row. On THIS presentation that reads 13px and looked
   * settled. On the Gentelella shell --fs-footnote is 11px - a deliberate
   * density choice for supporting text, recorded in _bd-transplanted.scss -
   * so every control inherited a footnote's size by accident, and an 11px
   * input on a classroom iPad is not a decision anybody made.
   *
   * Measured across all 35 built pages before this: control text rendered at
   * 11px, 12px, 13px AND 14px, and 27 rules in the transplant sheet set eight
   * different literal sizes between 10px and 14px.
   *
   * Two steps, and they are the whole intentional scale for anything a person
   * clicks or types into:
   *   --fs-control     the default
   *   --fs-control-sm  the DECLARED dense variant (button.sm, a compact
   *                    toolbar, pagination) - never a one-off
   * Supporting text keeps --fs-footnote, and the two presentations may
   * legitimately differ there in a way they must not for a control. */
  --fs-control:    13px;
  --fs-control-sm: 12px;
  --fs-body:       14px;  /* admin default */
  --fs-body-lg:    16px;  /* recorder default — read at arm's length */
  --fs-headline:   17px;
  --fs-title-3:    20px;
  --fs-title-2:    24px;
  --fs-title-1:    32px;
  --fs-display:    40px;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* Apple tracks tight text looser and large text tighter. */
  --tracking-micro:   .06em;
  --tracking-body:    0;
  --tracking-display: -.02em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ---------------------------------------------------------------------
   * SPACE — 8pt grid, 4pt half-steps
   * ------------------------------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  --r-sm: 6px;  --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Minimum hit areas. Pointer devices may go denser; touch may not. */
  --target-touch: 44px;
  --target-dense: 32px;

  /* ---------------------------------------------------------------------
   * COLOR — semantic roles, never raw hex at the call site.
   * Light is the default. Dark dims and re-layers; it does not invert.
   * ------------------------------------------------------------------ */
  --bg-base:      #F4F8F7;  /* app ground */
  --bg-raised:    #FFFFFF;  /* cards, panels */
  --bg-sunken:    #EDF2F1;  /* wells, table headers */
  --bg-inset:     #F7FAF9;

  --ink-primary:   #10243E;  /* 15.6:1 on raised */
  --ink-secondary: #46586A;  /* 7.9:1  — replaces #718394 / #718191 */
  --ink-tertiary:  #5C6B78;  /* 5.5:1  — the floor for any real text */
  --ink-on-accent: #FFFFFF;

  --line-subtle: #E3EAE8;
  --line-default:        #D2DCDA;
  --line-strong: #B6C4C1;

  /* --accent-primary and --line-default carry the -primary/-default suffix
   * because admin.css and collect.css already define --accent and --line and
   * load after this file. Same names here would be silently shadowed, which is
   * the exact failure this token layer exists to prevent. Legacy names retire
   * as each surface migrates. */
  --accent-primary:            #123D73;  /* BehaviorDash navy */
  --accent-hover:      #0E3160;
  --accent-soft:       #E7EEF6;
  --accent-on-soft:    #0E3160;

  --success:      #1F6F4A;  --success-soft: #E6F2EB;
  --warning:      #9A5412;  --warning-soft: #FDF0E2;
  --danger:       #9F1239;  --danger-soft:  #FCE9EE;
  --info:         #1B5A80;  --info-soft:    #E4F0F7;

  --focus-ring:   #2E7DD1;
  --sidebar-bg:   #10243E;
  --sidebar-ink:  #C9D6E4;
  --sidebar-ink-active: #FFFFFF;
  /* --sidebar-accent removed with the edge marker it existed for.
   * Do not reintroduce an accent sliver on the active nav item. */
  --sidebar-ink-dim: #7D93AC;  /* group labels on the navy rail */

  /* The orange that starts an appointment. The brand orange #FF7A22 carries
   * white text at 2.61:1 and cannot be a button fill; this is the same family
   * stepped down to 5.18:1 (hover 6.9:1). Kept as a token because it is now a
   * product colour, not a one-off override. */
  --action-orange: #C2410C;
  --action-orange-hover: #9A3412;

  /* The focus glow that sits under the 2px ring on text inputs. Derived from
   * the brand navy; a token because it was being retyped as a literal at
   * every field. */
  --focus-glow: 0 0 0 3px rgba(18,61,115,.12);

  /* Elevation: Apple layers with light, not heavy drop shadows. */
  --elev-1: 0 1px 2px rgba(16,36,62,.06);
  --elev-2: 0 2px 8px rgba(16,36,62,.08);
  --elev-3: 0 8px 24px rgba(16,36,62,.12);
  --elev-4: 0 20px 48px rgba(16,36,62,.18);

  /* ---------------------------------------------------------------------
   * MOTION
   * Curves are real spring solutions (response + dampingFraction), sampled
   * into linear(). Utility surfaces get a <=300ms budget, so these settle at
   * 220ms and 252ms. Animate transform and opacity only.
   * ------------------------------------------------------------------ */
  --ease-snappy: linear(0.000, 0.048, 0.153, 0.278, 0.402, 0.515, 0.614, 0.696, 0.763, 0.817, 0.859, 0.893, 0.919, 0.939, 0.954, 0.965, 0.974, 0.981, 0.986, 0.989, 1.000);
  --ease-smooth: linear(0.000, 0.038, 0.127, 0.238, 0.353, 0.463, 0.562, 0.648, 0.721, 0.781, 0.831, 0.870, 0.901, 0.925, 0.944, 0.959, 0.970, 0.978, 0.984, 0.989, 1.000);
  --ease-exit:   cubic-bezier(.4,0,1,1);

  --dur-instant: 90ms;    /* press feedback */
  --dur-quick:   160ms;   /* hover, colour */
  --dur-snappy:  220ms;   /* the default: menus, chips, inline reveals */
  --dur-smooth:  252ms;   /* sheets, drawers, panels */

  --lift-press: 0.97;     /* scale on :active */
  --lift-hover: -1px;     /* translateY on hover */

  --z-sticky: 20; --z-drawer: 60; --z-modal: 80; --z-toast: 100;
}

/* Dark mode: surfaces get LIGHTER as they rise, matching Apple's elevation
 * staircase. Not an inversion — the navy identity survives.
 *
 * Deliberately gated to an explicit data-theme="dark" stamp only, NOT to
 * prefers-color-scheme. admin.css and collect.css define --bg / --surface /
 * --ink / --line unconditionally in light values and load after this file,
 * so an OS-dark machine would otherwise get a half-flipped app: the
 * converted surfaces would paint near-white --ink-primary text onto the
 * still-white admin.css cards. Honouring the OS preference would therefore
 * ship unreadable text today.
 *
 * To be precise about what the stamp does and does not do: setting
 * data-theme="dark" right now swaps THESE tokens only. admin.css and
 * collect.css still define --bg / --surface / --ink / --line unconditionally
 * light and load afterwards, so the page stays light and only the converted
 * surfaces move. A working dark theme needs those four legacy tokens moved
 * under the same stamp first — it is a real piece of work, not a one-line
 * flip. The steps below are validated and waiting for it.
 * The chart palette in shared_charts.js has light-surface values only for
 * the same reason - dark chart steps land with the theme, not before it. */
:root[data-theme="dark"] {
  --bg-base:#0C161D; --bg-raised:#14212C; --bg-sunken:#0F1B23; --bg-inset:#182833;
  --ink-primary:#EDF2F1; --ink-secondary:#B4C3C9; --ink-tertiary:#93A5AD;
  --line-subtle:#1E2E39; --line-default:#2A3D49; --line-strong:#3A5060;
  --accent-primary:#6FA8E8; --accent-hover:#8CBCF0; --accent-soft:#17293A; --accent-on-soft:#A9CCF3;
  --success:#6FC298; --success-soft:#12281E; --warning:#E0A264; --warning-soft:#2B1D0F;
  --danger:#F2879F; --danger-soft:#2C1420; --info:#7FBBDD; --info-soft:#102733;
  --focus-ring:#63A6EA; --sidebar-bg:#0A1520; --sidebar-ink-dim:#6E8299;
  --action-orange:#E27A4D; --action-orange-hover:#EE9068;
  --focus-glow:0 0 0 3px rgba(99,166,234,.22);
  --elev-1:0 1px 2px rgba(0,0,0,.45); --elev-2:0 2px 8px rgba(0,0,0,.50);
  --elev-3:0 8px 24px rgba(0,0,0,.55); --elev-4:0 20px 48px rgba(0,0,0,.60);
}

/* One focus ring for the whole product. Applies to anything focusable that has
 * not opted out, which is the opposite of today: 11 focus rules covering only
 * calendar widgets, and nothing on nav or buttons. */
:where(a, button, [role="button"], [role="tab"], input, select, textarea,
       summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Reduce Motion is a real mode, not a nicety. Transforms and travel are
 * removed; opacity changes stay so state is still legible. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant:1ms; --dur-quick:1ms; --dur-snappy:1ms; --dur-smooth:1ms;
          --lift-press:1; --lift-hover:0px; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Increase Contrast strengthens lines and lifts secondary text. */
@media (prefers-contrast: more) {
  :root {
    --ink-secondary: var(--ink-primary);
    --ink-tertiary:  #3B4A57;
    --line-default: var(--line-strong);
  }
}