/*
 * Steady Thread — Token System (P0-29)
 * One source of truth for all color, typography, spacing, radius,
 * elevation, and motion values. Components reference semantic aliases
 * only, never raw primitives.
 *
 * Cascade layer order: base < tokens < components < utilities
 * Bootstrap is imported into the `base` layer so our tokens sit above it.
 *
 * This file is plain CSS (no Sass). It is loaded by the asset pipeline
 * alongside application.bootstrap.scss (which imports Bootstrap into @layer base
 * and then references these tokens via --bs-* overrides).
 *
 * YAML token names are 1:1 with CSS custom property names:
 *   colors.primary        <-> --color-primary
 *   spacing.spacing-4     <-> --space-4
 *   radius.md             <-> --radius-md
 *   elevation.shadow-hard <-> --elevation-shadow-hard
 *   motion.fast           <-> --motion-fast
 */

/* =========================================================================
   1. Layer declaration order (must appear before any @layer blocks)
   ========================================================================= */
@layer base, tokens, components, utilities;

/* =========================================================================
   2. @font-face declarations (NOT inside a layer - fonts must be global)
      Self-hosted fonts from app/assets/fonts/. No Google Fonts CDN.
   ========================================================================= */

/* Anton - Display font (Latin subset) */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/Anton-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter - Body/UI font (Latin variable, weights 400-900 in one file) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/Inter-Regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   3. Token definitions
   ========================================================================= */
@layer tokens {
  :root {
    /* ---------------------------------------------------------------------
       Color primitives (raw palette; components do NOT reference these)
       --------------------------------------------------------------------- */
    --primitive-orange:        #FF4D2E;
    --primitive-orange-shadow: #B9301A;
    --primitive-volt:          #D6FB52;
    --primitive-ink:           #14110D;
    --primitive-ink-2:         #211C16;
    --primitive-paper:         #F5F2EC;
    --primitive-muted:         #8A8175;
    --primitive-line:          #322B22;
    --primitive-white:         #ffffff;
    --primitive-success:       #2d8a4e;

    /* ---------------------------------------------------------------------
       Semantic color aliases (what components reference)
       --------------------------------------------------------------------- */

    /* Surface: the background a component sits on */
    --color-surface:         var(--primitive-paper);
    /* on-surface: text/icon color on the surface */
    --color-on-surface:      var(--primitive-ink);

    /* Surface variants */
    --color-surface-dark:    var(--primitive-ink);
    --color-surface-dark-2:  var(--primitive-ink-2);
    --color-on-surface-dark: var(--primitive-white);

    /* Primary: brand action color */
    --color-primary:         var(--primitive-orange);
    --color-primary-shadow:  var(--primitive-orange-shadow);
    --color-on-primary:      var(--primitive-white);
    /* Ink on an orange fill. White on orange is 3.31:1, which only clears AA
       for large text (>= 14px bold), so it is right for a button label and
       wrong for anything smaller or lighter. Ink on the same orange is 5.70:1
       and clears AA at any size. Use this on small orange-filled controls
       (the day chips); buttons keep --color-on-primary. */
    --color-on-primary-ink:  var(--primitive-ink);

    /* Accent: high-energy secondary (use sparingly) */
    --color-accent:          var(--primitive-volt);
    --color-on-accent:       var(--primitive-ink);

    /* Structural */
    --color-border:          var(--primitive-line);
    --color-muted:           var(--primitive-muted);

    /* Placeholder text (R8, client-profile typography fix): distinctly
       LIGHTER than both entered input text (--color-on-surface) and helper
       text (--color-muted) so an empty field never reads as pre-filled.
       Lightened by mixing --color-muted toward the surface tone. */
    --color-placeholder:     color-mix(in oklab, var(--color-muted) 55%, var(--color-surface) 45%);

    /* Surface tint variants (warm lifted tones used in marketing sections) */
    --color-surface-warm-tint: #efe9e0;
    --color-surface-lifted:    #d9d2c7;

    /* Dashboard surface: near-white for the coach dashboard (scoped override).
       Ken finds the warm paper (#F5F2EC) too beige on the coach dashboard.
       This token is applied only to the coach layout body; it does NOT change
       the global --color-surface so login and marketing keep the warm paper. */
    --color-surface-dashboard: #FAFAF8;

    /* Form field surface: crisp near-white ground for text inputs, selects, and
       checkboxes/radios so a field or empty box stands out from the warm paper
       card behind it (feedback wave 4, items C+D). White reads cleanly against
       --color-surface (#F5F2EC) on every surface, site-wide. */
    --color-field-surface:     var(--primitive-white);

    /* Dim text variants (body copy on contrasting grounds) */
    --color-on-surface-dim:  #4a443b;
    --color-on-ink-dim:      #cdc6bb;

    /* Scrim / overlay tokens (used by gradient overlays on photo sections) */
    --color-scrim-55:  color-mix(in srgb, var(--color-surface-dark) 55%, transparent);
    --color-scrim-35:  color-mix(in srgb, var(--color-surface-dark) 35%, transparent);
    --color-scrim-92:  color-mix(in srgb, var(--color-surface-dark) 92%, transparent);
    --color-scrim-86:  color-mix(in srgb, var(--color-surface-dark) 86%, transparent);
    --color-scrim-50:  color-mix(in srgb, var(--color-surface-dark) 50%, transparent);

    /* Ink button shadow (used on ink CTA button on orange background) */
    --color-shadow-ink: color-mix(in srgb, #000000 60%, transparent);

    /* Interactive states */
    --color-focus:           var(--primitive-orange);
    --color-error:           #c0392b;
    --color-success:         var(--primitive-success);

    /* Bootstrap semantic bridge (components use --bs-*, which read from our tokens) */
    --bs-primary:            var(--primitive-orange);
    --bs-primary-rgb:        255, 77, 46;
    --bs-secondary:          var(--primitive-volt);
    --bs-dark:               var(--primitive-ink);
    --bs-light:              var(--primitive-paper);
    --bs-body-bg:            var(--primitive-paper);
    --bs-body-color:         var(--primitive-ink);
    --bs-link-color:         var(--primitive-orange);
    --bs-link-color-rgb:     255, 77, 46;

    /* Reskin hard: eliminate boxy Bootstrap borders; use elevation instead */
    --bs-border-width:       0;
    --bs-border-radius:      var(--radius-md);
    --bs-border-radius-sm:   var(--radius-sm);
    --bs-border-radius-lg:   var(--radius-lg);
    --bs-border-radius-pill: var(--radius-full);

    /* ---------------------------------------------------------------------
       Typography tokens
       --------------------------------------------------------------------- */
    --font-display:           'Anton', sans-serif;
    --font-body:              'Inter', system-ui, -apple-system, sans-serif;
    /* Monospace stack for verbatim document/plan-text preview (<pre>). */
    --font-mono:              ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Named type levels (family / weight / size / line-height / tracking) */
    --type-display-family:   var(--font-display);
    --type-display-weight:   400;
    --type-display-size:     clamp(3rem, 8vw, 6rem);
    --type-display-lh:       0.92;
    --type-display-tracking: -0.01em;

    --type-h1-family:        var(--font-display);
    --type-h1-weight:        400;
    --type-h1-size:          clamp(2rem, 5vw, 3.5rem);
    --type-h1-lh:            0.95;
    --type-h1-tracking:      -0.01em;

    --type-h2-family:        var(--font-display);
    --type-h2-weight:        400;
    --type-h2-size:          clamp(1.5rem, 3.5vw, 2.5rem);
    --type-h2-lh:            1.0;
    --type-h2-tracking:      0;

    /* Wordmark: STEADY/THREAD text mark in auth + future reuse contexts */
    --type-wordmark-family:  var(--font-display);
    --type-wordmark-weight:  400;
    --type-wordmark-size:    1.75rem;
    --type-wordmark-lh:      1.0;
    --type-wordmark-tracking: 0.02em;

    --type-label-family:     var(--font-body);
    --type-label-weight:     800;
    --type-label-size:       0.875rem;
    --type-label-lh:         1.2;
    --type-label-tracking:   0.06em;

    --type-body-family:      var(--font-body);
    --type-body-weight:      400;
    --type-body-size:        1rem;
    --type-body-lh:          1.6;
    --type-body-tracking:    0;

    --type-small-family:     var(--font-body);
    --type-small-weight:     400;
    --type-small-size:       0.8125rem;
    --type-small-lh:         1.5;
    --type-small-tracking:   0;

    /* Fine print: legal/PHI caution lines, the smallest legible step
       (Ken live review 2026-07-09: PHI notices read too loud at small). */
    --type-fineprint-size:   0.6875rem;
    --type-fineprint-lh:     1.4;

    /* Rendered-Markdown heading steps (body font, for MarkdownRenderer output
       in the plan-doc preview). Distinct from the display-font h1/h2 above so
       document prose does not shout in Anton. h3-h6 use --type-body-size. */
    --type-md-h1-size:       1.5rem;
    --type-md-h2-size:       1.25rem;

    --type-stat-family:      var(--font-display);
    --type-stat-weight:      400;
    --type-stat-size:        clamp(3rem, 10vw, 8rem);
    --type-stat-lh:          0.9;
    --type-stat-tracking:    -0.01em;

    /* Bootstrap typography bridge */
    --bs-body-font-family:   var(--font-body);
    --bs-font-sans-serif:    var(--font-body);

    /* ---------------------------------------------------------------------
       Spacing (4px grid)
       --------------------------------------------------------------------- */
    --space-2:    2px;
    --space-4:    4px;
    --space-8:    8px;
    --space-12:   12px;
    --space-16:   16px;
    --space-24:   24px;
    --space-32:   32px;
    --space-48:   48px;
    --space-72:   72px;
    --space-96:   96px;

    /* ---------------------------------------------------------------------
       Radius
       --------------------------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   16px;
    --radius-full: 50rem;

    /* ---------------------------------------------------------------------
       Elevation (replaces Bootstrap borders as the structural layer)
       --------------------------------------------------------------------- */

    /* Hard drop-shadow (primary button signature look) */
    --elevation-shadow-hard: 0 8px 0 var(--color-primary-shadow);
    --elevation-shadow-hard-pressed: 0 4px 0 var(--color-primary-shadow);

    /* Soft lift (cards, elevated surfaces) */
    --elevation-shadow-sm:   0 1px 3px rgba(20, 17, 13, 0.12),
                             0 1px 2px rgba(20, 17, 13, 0.08);
    --elevation-shadow-md:   0 4px 12px rgba(20, 17, 13, 0.16),
                             0 2px 6px rgba(20, 17, 13, 0.10);
    --elevation-shadow-lg:   0 8px 24px rgba(20, 17, 13, 0.20),
                             0 4px 10px rgba(20, 17, 13, 0.12);

    /* Focus ring: orange glow (WCAG AA compliant) */
    --elevation-focus-ring:  0 0 0 3px color-mix(in oklab, var(--color-focus) 40%, transparent);
    /* Focus ring for VOLT-FILLED controls: volt + orange edging is banned
       (style guide Do Not, Ken 2026-07-15); volt surfaces focus in ink. */
    --elevation-focus-ring-ink: 0 0 0 3px color-mix(in oklab, var(--primitive-ink) 45%, transparent);

    /* Volt highlight: inline text accent */
    --elevation-volt-highlight-bg: var(--primitive-volt);
    --elevation-volt-highlight-color: var(--primitive-ink);

    /* Post-fill row highlight (Task 4.4, R12): orange, consistent with the
       "will be replaced" orange rim in the fill-the-week modal (row-check
       state above matches this fade-in highlight after the fill lands). */
    --elevation-primary-highlight-bg: color-mix(in srgb, var(--color-primary) 30%, transparent);

    /* Card bottom accent rim */
    --elevation-rim-accent:  8px solid var(--color-primary);

    /* Ink CTA button shadow (on orange section, needs pure-black drop not orange) */
    --elevation-shadow-ink-hard:         0 8px 0 var(--color-shadow-ink);
    --elevation-shadow-ink-hard-pressed: 0 4px 0 var(--color-shadow-ink);

    /* ---------------------------------------------------------------------
       Motion
       --------------------------------------------------------------------- */
    --motion-curve-brand:    cubic-bezier(0.15, 0.83, 0.66, 1);
    --motion-curve-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
    --motion-curve-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Symmetric ease-in-out for looping motion that has to read as travel in
       BOTH directions. --motion-curve-brand is a hard ease-out: it covers 86%
       of the distance in the first half of a leg, which reads as a pop, not a
       movement. That is fine for a one-shot entrance and wrong for a loop like
       the brand loader's collapse/expand. */
    --motion-curve-breathe:  cubic-bezier(0.45, 0.05, 0.55, 0.95);

    --motion-instant:  80ms;
    --motion-fast:     200ms;
    --motion-standard: 300ms;
    --motion-slow:     500ms;

    /* Brand loader breathing cycle (BrandLoaderComponent): full wordmark
       collapses to "ST", holds with a slash spin, expands back, loops. */
    --motion-loader-cycle: 3600ms;

    /* Fill-the-week replace modal (Task 4.4, R12): post-fill row highlight
       fade -- a changed day briefly highlights, then fades back over ~2s. */
    --motion-highlight-fade: 2000ms;

    /* Component-specific decorative sizes (not on 4px grid; kept as named tokens) */
    --size-accent-bar-w: 46px;
    --size-accent-bar-h: 5px;

    /* Minimum tap target on touch surfaces (Client Creation Entry Screen,
       20260820.01). 44px is the size a thumb reliably hits. */
    --size-tap-min: 44px;

    /* Widest the seven-day send-days chip row grows on a desktop card. */
    --size-send-days-week-max-w: 34rem;

    /* Coach sidebar (BETA-coach-nav Phase 1) */
    --size-sidebar-expanded:  220px;
    --size-sidebar-collapsed: 56px;
    --size-sidebar-toggle:    28px;
    --size-dropdown-max-height: 60vh;

    /* Phone shell (client creation entry screen, 20260820.01): below the
       coach shell's one breakpoint the sidebar becomes a bottom tab bar and
       the page's primary action sits directly above it.
       - thumb-bar-height: the fixed bar; one label line plus the active rim.
         Labels are nowrap and capped at eight characters, so a second line is
         not a case the bar has to hold.
       - thumb-primary-height: the lifted primary row, when a page fills it.
       - tap-min: the minimum comfortable touch target (Apple HIG / WCAG 2.5.5). */
    --size-thumb-bar-height:     56px;
    --size-thumb-label-size:     0.5625rem;
    --size-thumb-primary-height: 72px;
    --size-phone-context-h:      48px;
    /* --size-tap-min lives above, with the other cross-surface sizes. Two tasks
       in this feature each needed it and each defined it; the second definition
       won by cascade, so editing the first would have silently done nothing. */

    /* The phone's home-indicator strip. On every iPhone since the X the bottom
       band of the screen belongs to the system swipe-up gesture, so a bar fixed
       at bottom:0 puts its labels inside it and a tap near a tab's centre
       competes with the gesture.

       The 0px fallback is the whole safety story: a browser with no notch
       resolves this to zero, so every calc() that adds it is arithmetically
       identical to what shipped, on desktop and on non-notched phones alike.
       env() also reads zero unless the page opts into an edge-to-edge viewport
       (viewport-fit=cover); with the default viewport iOS insets the layout
       viewport itself, and either way the bar clears the indicator. */
    --size-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* CUX-homepage: Early-access modal */
    --size-modal-dialog-max-w: 520px;

    /* Plan-doc share link input: min width before it wraps under the copy button */
    --size-share-link-min: 16rem;

    /* Outreach contact page: the mute control's caption wraps to a readable
       column instead of stretching across the header. */
    --size-outreach-mute-note: 22rem;
    /* Outreach contact page: how much room the name block asks for before the
       header wraps the action underneath it. */
    --size-outreach-contact-identity: 16rem;
    /* Outreach contacts index: the notes column stops widening and wraps. */
    --size-outreach-notes-col: 20rem;

    /* Plan-doc preview modal: max height of the scrollable extracted-text panel
       before it scrolls internally (vh so it tracks the viewport, not a fixed px). */
    --size-plan-preview-max-h: 55vh;
    /* The client plan page: how tall the rendered body and the PDF viewer
       frame stand before they scroll internally. Viewport-relative so a
       phone gets a readable pane without the page itself growing. */
    /* Reading width for a plan page. The auth shell's own panel is a sign-in
       form width, which leaves a training plan and its tables in a column on
       a desktop. */
    --size-doc-panel-max-w: 52rem;
    --size-plan-body-max-h: 70vh;
    --size-plan-pdf-h: 75vh;

    /* Plan timeline: width of the inline start-date input, so the field sits
       next to its Save button instead of stretching across the card. */
    --size-plan-date-input: 11rem;
    --size-plan-kebab-menu: 15rem;

    /* Plan-doc preview modal: readability cap on the (otherwise ~88vw) wide
       dialog so rendered Markdown/tables get room without stretching too far on
       large screens. */
    --size-plan-preview-w: 1040px;

    /* Week editor: reschedule popover breaks out of the narrow time column */
    --size-week-editor-time-edit: 240px;
    /* Week editor: the left "when" column (day + date + time) */
    --size-week-editor-when: 80px;

    /* Editable field (click-to-edit): the min width one input keeps before the
       send window's two time pickers wrap to their own lines. */
    --size-editable-field-input: 9rem;

    /* Needs-Your-Attention card: fixed-width action column so the stacked
       Handled + Dismiss buttons share one width instead of sizing to labels. */
    --size-attention-actions-w: 7rem;

    /* Outreach follow-up queue row: the identity column and the action column
       are fixed so every row's three verbs line up down the page, and only the
       middle column (what happened) flexes.

       The identity column holds a name over an email address. The old width was
       narrower than a routine address, so a row broke one mid-word. The action
       column is narrower than the signal column on purpose: the row is about a
       person and what they did, and the button tray is not the content. The row
       picks its column count from its OWN width (a container query), not the
       viewport's, because a rail sits beside it. */
    --size-outreach-queue-who: 18rem;
    --size-outreach-queue-actions: 20rem;

    /* Week grid (calendar-week view of scheduled messages) */
    /* Canvas height spans the default 16h window (6am-10pm) at ~55px/hour. */
    --size-week-grid-canvas-h:  880px;
    --size-week-grid-axis-w:    56px;
    --size-week-grid-day-min-w: 116px;
    --size-week-grid-block-min-h: 44px;

    /* Outreach portal, new-campaign flow: the step-number dot, the rim on a row
       that needs a decision, and the height of the sandboxed email preview. */
    --size-outreach-step-dot: 24px;
    --size-outreach-row-rim: 3px;
    /* The compose-step preview. Its own token: the send queue's preview
       (--size-outreach-preview-h, below) is a different surface with a
       different job, and one name for both silently gave this one the
       queue's height. */
    --size-outreach-compose-preview-h: 42vh;

    /* BrandLoaderComponent: max width of a folding wordmark segment
       ("TEADY" / "HREAD"); collapses to 0 to leave "S / T". ch-based so it
       tracks the glyph count, not a fixed pixel width. */
    --size-loader-fold-max: 6ch;

    /* Acey chat onboarding (20260714.01): thread column width, message-bubble
       max width, and the scroll window height of the chat panel. */
    --size-onb-thread-max-w: 720px;
    --size-onb-bubble-max-w: 82%;
    --size-onb-panel-max-h: 70vh;
    /* Design-polish pass (microspec_design_polish, Task A): the page-variant
       panel fills the viewport minus the coach main padding (--space-32 top +
       bottom); the avatar mirrors the dashboard Meet-Acey icon at a smaller
       chat scale; the composer textarea caps at ~6 lines before it scrolls. */
    --size-onb-page-h: calc(100dvh - var(--space-32) - var(--space-48));
    --size-onb-avatar: var(--space-32);
    --size-onb-composer-max-h: 9rem;
    /* CONV-order-latest-bottom (Task 2.1): conversation thread scroll region.
       vh-based so "bottom" tracks the viewport rather than a fixed px. */
    --size-conversation-scroll-max-h: 65vh;

    /* The outreach portal's reading column. Six separate blocks in
       outreach.css had independently written the same 640px, one per builder,
       which is how the queue's header ended up 260px wider than the card under
       it. One number, one name. */
    --size-outreach-reading-column: 640px;

    /* Outreach send queue (20260818.01, Task 2.3) */
    /* The preview iframe: tall enough to read a whole short outreach email
       without scrolling, and it scrolls internally when one runs long. */
    --size-outreach-preview-h: 26rem;
    /* The queue-position column beside the focus card. */
    --size-outreach-side-w: 15rem;
    /* The progress bar above the pass. */
    --size-outreach-progress-h: 6px;
    /* Client Creation Entry Screen (20260820.01): the narrowest a door card may
       be before the auto-fit grid drops to fewer columns. This one value is
       what makes the chooser responsive with no media query: the cards stack on
       a phone and sit side by side on a desktop, and a third card can arrive
       without a CSS change. */
    --size-door-card-min: 17rem;

    /* CUX-38: Acey welcome banner */
    /* Softer ink surface so body text does not sit on pure black */
    --color-surface-acey:     var(--primitive-ink-2);
    /* Headline letter-spacing: Anton uppercase at h5 scale needs breathing room */
    --type-acey-headline-tracking: 0.05em;
    /* Body text on the banner: warm off-white dim instead of pure white */
    --color-on-acey:          var(--color-on-ink-dim);

    /* Convenience combos used by components */
    --motion-btn-press:   transform var(--motion-instant) var(--motion-curve-brand),
                          box-shadow var(--motion-instant) var(--motion-curve-brand);
    --motion-hover:       background-color var(--motion-fast) var(--motion-curve-ease-out),
                          color var(--motion-fast) var(--motion-curve-ease-out),
                          border-color var(--motion-fast) var(--motion-curve-ease-out);
    --motion-focus:       box-shadow var(--motion-fast) var(--motion-curve-ease-out);
  }

  /* -----------------------------------------------------------------------
     Reduced-motion collapse (required boilerplate per playbook section 3)
     ----------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
    }
  }
}

/* =========================================================================
   4. Global interactive baseline (in @layer base order after tokens load)
      Focus rings on every interactive element.
   ========================================================================= */
@layer base {
  *:focus-visible {
    outline: none;
    box-shadow: var(--elevation-focus-ring);
  }

  /* Headings use display font by default */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    text-transform: uppercase;
  }

  h1, .h1 {
    font-size: var(--type-h1-size);
    line-height: var(--type-h1-lh);
    letter-spacing: var(--type-h1-tracking);
  }

  h2, .h2 {
    font-size: var(--type-h2-size);
    line-height: var(--type-h2-lh);
    letter-spacing: var(--type-h2-tracking);
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-surface);
    color: var(--color-on-surface);
  }

  a {
    color: var(--color-primary);
  }

  a:focus-visible {
    border-radius: var(--radius-sm);
  }
}