/* tokens.css — Bypass Assist design tokens (Figma-aligned)
   Premium black/white wellness aesthetic. Pure additive — does not affect
   styles.css. Consumed by page-specific stylesheets that opt-in via a body
   class. Mirrors the variable structure in Figma file LgNjjolIDzpltM2xmr1SMV. */
:root {
    /* Grayscale primitives */
    --c-gray-0:    #ffffff;
    --c-gray-50:   #fafafa;
    --c-gray-100:  #f5f5f5;
    --c-gray-200:  #eaeaea;
    --c-gray-300:  #dbdbdb;
    --c-gray-400:  #b3b3b3;
    --c-gray-500:  #8c8c8c;
    --c-gray-600:  #666666;
    --c-gray-700:  #454545;
    --c-gray-800:  #292929;
    --c-gray-900:  #111111;
    --c-gray-1000: #000000;

    /* Semantic — backgrounds */
    --bg-canvas:   var(--c-gray-0);
    --bg-surface:  var(--c-gray-0);
    --bg-muted:    var(--c-gray-50);
    --bg-raised:   var(--c-gray-100);
    --bg-inverse:  var(--c-gray-900);

    /* Semantic — borders */
    --border-subtle:  var(--c-gray-200);
    --border-default: var(--c-gray-300);
    --border-strong:  var(--c-gray-700);

    /* Semantic — text */
    --text-primary:   var(--c-gray-900);
    --text-secondary: var(--c-gray-600);
    --text-tertiary:  var(--c-gray-500);
    --text-disabled:  var(--c-gray-400);
    --text-inverse:   var(--c-gray-0);

    /* Semantic — actions */
    --action-primary:        var(--c-gray-900);
    --action-primary-hover:  var(--c-gray-800);
    --action-secondary:      var(--c-gray-100);
    --action-secondary-hover:var(--c-gray-200);

    /* Spacing — 8pt grid (with 2/4 micro-steps) */
    --s-0:  0;
    --s-1:  2px;
    --s-2:  4px;
    --s-3:  8px;
    --s-4:  12px;
    --s-5:  16px;
    --s-6:  20px;
    --s-7:  24px;
    --s-8:  32px;
    --s-9:  40px;
    --s-10: 48px;
    --s-11: 64px;
    --s-12: 80px;
    --s-13: 96px;

    /* Radius scale */
    --r-none: 0;
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   18px;     /* button */
    --r-2xl:  22px;     /* input / modal */
    --r-3xl:  24px;     /* card */
    --r-4xl:  28px;
    --r-full: 999px;

    /* Elevation — subtle, monochrome */
    --shadow-xs:    0 1px 4px rgba(0,0,0,.04);
    --shadow-sm:    0 2px 8px rgba(0,0,0,.05);
    --shadow-md:    0 4px 16px rgba(0,0,0,.06);
    --shadow-lg:    0 8px 24px rgba(0,0,0,.08);
    --shadow-xl:    0 16px 40px rgba(0,0,0,.10);
    --shadow-modal: 0 20px 60px rgba(0,0,0,.18);

    /* Typography — Inter, fallbacks for offline / pre-load */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --t-display-xl:  600 44px/52px var(--font-sans);
    --t-h1:          600 36px/44px var(--font-sans);
    --t-h2:          600 28px/36px var(--font-sans);
    --t-h3:          500 22px/30px var(--font-sans);
    --t-h4:          500 18px/26px var(--font-sans);
    --t-body-lg:     400 18px/28px var(--font-sans);
    --t-body:        400 16px/24px var(--font-sans);
    --t-body-sm:     400 14px/22px var(--font-sans);
    --t-label:       500 14px/20px var(--font-sans);
    --t-caption:     400 13px/18px var(--font-sans);
    --t-overline:    500 11px/16px var(--font-sans);
    --t-numeric-hero:600 48px/56px var(--font-sans);
    --t-numeric-stat:600 28px/32px var(--font-sans);
}