@layer base, tokens, components, utilities;

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

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

@layer tokens {
  :root {
    --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;

    --color-surface:         var(--primitive-paper);
    --color-on-surface:      var(--primitive-ink);

    --color-surface-dark:    var(--primitive-ink);
    --color-surface-dark-2:  var(--primitive-ink-2);
    --color-on-surface-dark: var(--primitive-white);

    --color-primary:         var(--primitive-orange);
    --color-primary-shadow:  var(--primitive-orange-shadow);
    --color-on-primary:      var(--primitive-white);
    --color-on-primary-ink:  var(--primitive-ink);

    --color-accent:          var(--primitive-volt);
    --color-on-accent:       var(--primitive-ink);

    --color-border:          var(--primitive-line);
    --color-muted:           var(--primitive-muted);

    --color-placeholder:     color-mix(in oklab, var(--color-muted) 55%, var(--color-surface) 45%);

    --color-surface-warm-tint: #efe9e0;
    --color-surface-lifted:    #d9d2c7;

    --color-surface-dashboard: #FAFAF8;

    --color-field-surface:     var(--primitive-white);

    --color-on-surface-dim:  #4a443b;
    --color-on-ink-dim:      #cdc6bb;

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

    --color-shadow-ink: color-mix(in srgb, #000000 60%, transparent);

    --color-focus:           var(--primitive-orange);
    --color-error:           #c0392b;
    --color-success:         var(--primitive-success);

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

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

    --font-display:           'Anton', sans-serif;
    --font-body:              'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:              ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

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

    --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-fineprint-size:   0.6875rem;
    --type-fineprint-lh:     1.4;

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

    --bs-body-font-family:   var(--font-body);
    --bs-font-sans-serif:    var(--font-body);

    --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-sm:   4px;
    --radius-md:   6px;
    --radius-lg:   10px;
    --radius-xl:   16px;
    --radius-full: 50rem;

    --elevation-shadow-hard: 0 8px 0 var(--color-primary-shadow);
    --elevation-shadow-hard-pressed: 0 4px 0 var(--color-primary-shadow);

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

    --elevation-focus-ring:  0 0 0 3px color-mix(in oklab, var(--color-focus) 40%, transparent);
    --elevation-focus-ring-ink: 0 0 0 3px color-mix(in oklab, var(--primitive-ink) 45%, transparent);

    --elevation-volt-highlight-bg: var(--primitive-volt);
    --elevation-volt-highlight-color: var(--primitive-ink);

    --elevation-primary-highlight-bg: color-mix(in srgb, var(--color-primary) 30%, transparent);

    --elevation-rim-accent:  8px solid var(--color-primary);

    --elevation-shadow-ink-hard:         0 8px 0 var(--color-shadow-ink);
    --elevation-shadow-ink-hard-pressed: 0 4px 0 var(--color-shadow-ink);

    --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-curve-breathe:  cubic-bezier(0.45, 0.05, 0.55, 0.95);

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

    --motion-loader-cycle: 3600ms;

    --motion-highlight-fade: 2000ms;

    --size-accent-bar-w: 46px;
    --size-accent-bar-h: 5px;

    --size-tap-min: 44px;

    --size-send-days-week-max-w: 34rem;

    --size-sidebar-expanded:  220px;
    --size-sidebar-collapsed: 56px;
    --size-sidebar-toggle:    28px;
    --size-dropdown-max-height: 60vh;

    --size-thumb-bar-height:     56px;
    --size-thumb-label-size:     0.5625rem;
    --size-thumb-primary-height: 72px;
    --size-phone-context-h:      48px;

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

    --size-modal-dialog-max-w: 520px;

    --size-share-link-min: 16rem;

    --size-outreach-mute-note: 22rem;
    --size-outreach-contact-identity: 16rem;
    --size-outreach-notes-col: 20rem;

    --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. */
    --size-doc-panel-max-w: 52rem;
    --size-plan-body-max-h: 70vh;
    --size-plan-pdf-h: 75vh;

    --size-plan-date-input: 11rem;
    --size-plan-kebab-menu: 15rem;

    --size-plan-preview-w: 1040px;

    --size-week-editor-time-edit: 240px;
    --size-week-editor-when: 80px;

    --size-editable-field-input: 9rem;

    --size-attention-actions-w: 7rem;

    --size-outreach-queue-who: 18rem;
    --size-outreach-queue-actions: 20rem;

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

    --size-outreach-step-dot: 24px;
    --size-outreach-row-rim: 3px;
    --size-outreach-compose-preview-h: 42vh;

    --size-loader-fold-max: 6ch;

    --size-onb-thread-max-w: 720px;
    --size-onb-bubble-max-w: 82%;
    --size-onb-panel-max-h: 70vh;
    --size-sched-chat-chrome: 24rem;
    --size-sched-chat-chrome-sm: 26rem;
    --size-sched-chat-min-h: 16rem;
    --size-sched-week-chat-h: 26rem;
    --size-onb-page-h: calc(100dvh - var(--space-32) - var(--space-48));
    --size-onb-avatar: var(--space-32);
    --size-onb-composer-max-h: 9rem;
    --size-conversation-scroll-max-h: 65vh;

    --size-outreach-reading-column: 640px;

    --size-outreach-preview-h: 26rem;
    --size-outreach-side-w: 15rem;
    --size-outreach-progress-h: 6px;
    --size-door-card-min: 17rem;

    --color-surface-acey:     var(--primitive-ink-2);
    --type-acey-headline-tracking: 0.05em;
    --color-on-acey:          var(--color-on-ink-dim);

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

@layer base {
  *:focus-visible {
    outline: none;
    box-shadow: var(--elevation-focus-ring);
  }

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