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

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

    --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);

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

    --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;

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

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

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

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

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

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

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