/* ─────────────────────────────────────────────────────────────────────
   COMPONENT TOKENS (Layer 3 of token graph)
   Component-scoped names that compose from primitives + semantic tokens.
   Component selectors should consume these (or semantic tokens).
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Layout ─────────────────────────────────────────────────────── */
  --c-content-max:           var(--width-content);
  --c-post-hero-max:         var(--width-post-hero);
  --c-post-body-max:         var(--width-post-body);
  --c-post-sidebar-w:        var(--width-sidebar);
  --c-section-scroll-margin: 80px;

  /* ── Nav ────────────────────────────────────────────────────────── */
  --c-nav-height: 64px;
  --c-nav-px:     var(--space-12);
  --c-nav-gap:    var(--space-7);

  /* ── Monogram ───────────────────────────────────────────────────── */
  --c-mono-size: 24px;

  /* ── Theme toggle ───────────────────────────────────────────────── */
  --c-toggle-pad:    var(--space-0-5);
  --c-toggle-btn-px: var(--space-2-5);
  --c-toggle-btn-py: 5px;

  /* ── Hero ───────────────────────────────────────────────────────── */
  --c-hero-gap:          var(--space-12);
  --c-hero-portrait-max: 380px;
  --c-hero-lede-border:  2px solid var(--color-border-default);

  /* ── Status dot ─────────────────────────────────────────────────── */
  --c-status-dot-size: 8px;

  /* ── Social ─────────────────────────────────────────────────────── */
  --c-social-size: 38px;
  --c-social-icon: 16px;
  --c-social-radius: var(--radius-sharp);

  /* ── Section head ───────────────────────────────────────────────── */
  --c-section-head-mb: var(--space-7);
  --c-section-bar-w:   24px;

  /* ── Card ───────────────────────────────────────────────────────── */
  --c-card-radius:  var(--radius-sm);
  --c-card-pad:     var(--space-6);
  --c-card-min-h:   300px;
  --c-card-head-mb: var(--space-5-5);

  /* ── Pill ───────────────────────────────────────────────────────── */
  --c-pill-radius: var(--radius-sharp);
  --c-pill-pad:    5px 11px;

  /* ── Tag pill ───────────────────────────────────────────────────── */
  --c-tag-pad:    3px var(--space-2);

  /* ── Button (outline) ───────────────────────────────────────────── */
  --c-btn-radius: var(--radius-sm);
  --c-btn-pad:    var(--space-3) var(--space-5);

  /* ── Blockquote ─────────────────────────────────────────────────── */
  --c-blockquote-pad: var(--space-1) var(--space-4);

  /* Body links */
  --c-link-underline-offset: 3px;

  /* ── Writing item ───────────────────────────────────────────────── */
  --c-writing-py:  var(--space-5-5);
  --c-writing-col: 110px;

  /* ── Newsletter ─────────────────────────────────────────────────── */
  --c-newsletter-radius: var(--radius-sm);
  --c-newsletter-pad:    var(--space-2-5) var(--space-3);

  /* ── sq-mark ────────────────────────────────────────────────────── */
  --c-sq-mark:    var(--space-2-5);
  --c-sq-mark-sm: var(--space-1-5);

  /* ── Post layout ────────────────────────────────────────────────── */
  --c-post-margin-hr:  var(--space-9);
  --c-portrait-bottom: var(--space-5);

  /* ── Admin (--c-adm-*) ──────────────────────────────────────────── */
  --c-adm-card-radius:       var(--radius-sm);
  --c-adm-card-pad:          var(--space-8);
  --c-adm-card-shadow:       0 24px 60px -30px rgba(var(--color-shadow-rgb), 0.4);
  --c-adm-rail-w:            72px;
  --c-adm-rail-item-size:    48px;
  --c-adm-rail-item-radius:  var(--radius-sm);
  --c-adm-rail-brand-size:   40px;
  --c-adm-pin-input-w:       56px;
  --c-adm-pin-input-h:       64px;
  --c-adm-picker-panel-w:    480px;
  --c-adm-picker-list-h:     320px;
  --c-adm-input-pad-y:       11px;
  --c-adm-chip-dot-size:     7px;
  --c-adm-avatar-size:       56px;
  --c-adm-switch-w:          44px;
  --c-adm-switch-h:          24px;
  --c-adm-switch-knob:       18px;
  --c-adm-md-min-h:          480px;
  --c-adm-md-max-h:          640px;
  --c-adm-main-max:          1100px;
  --c-adm-login-max:         440px;
  --c-adm-login-h1-size:     22px;
  --c-adm-tooltip-shadow:    0 12px 32px -16px rgba(var(--color-shadow-rgb), 0.5);

  /* ── Chat (lib/components/chat_bubble.dart) ─────────────────────── */
  /* Floating launcher (FAB) — squarish like every other button on the site */
  --c-chat-bubble-size:      56px;
  --c-chat-bubble-size-sm:   54px; /* mobile shrink */
  --c-chat-bubble-radius:    var(--radius-sm);
  --c-chat-bubble-shadow:    0 8px 24px -6px rgba(var(--color-shadow-rgb), 0.5);
  --c-chat-bubble-bottom:    var(--space-5);
  --c-chat-bubble-side:      var(--space-5);

  /* Panel container */
  --c-chat-panel-w:          380px;
  --c-chat-panel-h:          640px;
  --c-chat-panel-radius:     var(--radius-lg);
  --c-chat-panel-shadow:     0 24px 60px -16px rgba(var(--color-shadow-rgb), 0.55);

  /* Header */
  --c-chat-header-pad-y:     var(--space-3);
  --c-chat-header-pad-x:     var(--space-3-5);
  --c-chat-header-gap:       var(--space-3);
  --c-chat-avatar-size:      44px;
  --c-chat-avatar-size-sm:   48px;
  /* Note: avatar online indicator dot removed in favour of the teal
     ring around the avatar — see --border-accent on .chat-header__avatar. */

  /* Feed */
  --c-chat-feed-pad:         var(--space-3);
  --c-chat-feed-gap:         var(--space-2);

  /* Message bubbles */
  --c-chat-msg-radius:       var(--radius-md);
  --c-chat-msg-radius-tail:  var(--radius-sharp);
  --c-chat-msg-pad-y:        var(--space-2);
  --c-chat-msg-pad-x:        var(--space-3);
  --c-chat-msg-max-w:        85%;
  --c-chat-msg-font:         var(--text-base);

  /* Choice chips — share the button radius so they read as part of the
     same clickable family as the FAB, send, and submit buttons. */
  --c-chat-chip-radius:      var(--radius-sm);
  --c-chat-chip-pad-y:       var(--space-2);
  --c-chat-chip-pad-x:       var(--space-3-5);

  /* Bottom input bar (floating card) — radius matches the send button it
     wraps so they read as one cohesive control, not two competing shapes. */
  --c-chat-input-radius:     var(--radius-sm);
  --c-chat-input-pad:        var(--space-1-5);
  --c-chat-input-gap:        var(--space-1-5);
  --c-chat-input-margin-y:   var(--space-2);
  --c-chat-input-margin-x:   var(--space-2-5);
  --c-chat-input-shadow:     0 6px 18px -10px rgba(var(--color-shadow-rgb), 0.5);
  --c-chat-textarea-pad-y:   var(--space-2);
  --c-chat-textarea-pad-x:   var(--space-3);
  --c-chat-textarea-max-h:   120px;

  /* Send button (squarish, matches site button language) */
  --c-chat-send-size:        38px;
  --c-chat-send-radius:      var(--radius-sm);

  /* Country code chip */
  --c-chat-cc-radius:        var(--radius-pill);
  --c-chat-cc-pad-y:         var(--space-2);
  --c-chat-cc-pad-x:         var(--space-2-5);
  --c-chat-cc-menu-radius:   var(--radius-md);

  /* Runtime-set variables — declared so audit_css_tokens recognises them
     as intentional. JS writes the actual values on the .chat-panel:
       --chat-vh : window.visualViewport.height (px), for mobile keyboard tracking
       --drift   : per-confetti random x-velocity, for the success animation */
  --chat-vh: 100dvh;
  --drift:   0px;
}