/* ============================================================
 * Axismundi — tokens.comp.css
 * v3.6.1 — Token Architecture Refactor Phase 1A
 *
 * Component, semantic alias, and layout tokens. Non-mode system
 * tokens moved to tokens.sys.core.css.
 *
 * ── Omphalos admission policy ──────────────────────────────
 * This file is the runtime component-token layer Omphalos ships and enqueues.
 * A token belongs here when EITHER:
 *   (1) it is referenced by active Omphalos CSS (blocks/prose/foundation) or
 *       theme.json, OR
 *   (2) it backs an active Omphalos registered block-style / component contract.
 *
 * Tokens defined but only meaningful to lab / app-shell / future component work
 * are isolation candidates: kept for now (no deletion), tracked in
 * docs/TOKENS-COMP-AUDIT.md, and migrated to tokens.comp.future.css (or dropped
 * from the Omphalos copy) per-phase as each contract settles — never big-bang.
 * As of the latest audit, --comp-card-padding / --comp-card-radius (blocks.css §8
 * core/group Card) and --comp-button-height / --comp-button-radius (blocks.css §9
 * + theme.json button) are consumed; the rest await their block contract (e.g.
 * the button size matrix, icon sizes). See the audit for the table.
 * ============================================================ */

/* ============================================================
 * §9 Component tokens (prompt-v2 §3.3)
 *
 * Hybrid layer: per-component sizing/radius handles that
 * compose system tokens. Extension policy — add when a value
 * would otherwise be hard-coded across multiple component
 * files. Don't add for one-off literals.
 * ============================================================ */
:root {
  /* Card */
  --comp-card-padding: var(--space-md);
  --comp-card-radius:  var(--md-sys-shape-corner-medium);

  /* Button (M3 small button default) */
  --comp-button-height: 40px;
  --comp-button-radius: calc(var(--comp-button-height) / 2);

  /* Button family size matrix (v3.5.13 BACKLOG #32) */
  --comp-button-height-xs: 32px;
  --comp-button-height-s:  40px;
  --comp-button-height-m:  56px;
  --comp-button-height-l:  96px;
  --comp-button-height-xl: 136px;

  --comp-button-padding-inline-xs: 12px;
  --comp-button-padding-inline-s:  16px;
  --comp-button-padding-inline-m:  24px;
  --comp-button-padding-inline-l:  48px;
  --comp-button-padding-inline-xl: 64px;

  --comp-button-icon-size-xs: 20px;
  --comp-button-icon-size-s:  20px;
  --comp-button-icon-size-m:  24px;
  --comp-button-icon-size-l:  32px;
  --comp-button-icon-size-xl: 40px;

  --comp-button-outline-width-xs: 1px;
  --comp-button-outline-width-s:  1px;
  --comp-button-outline-width-m:  1px;
  --comp-button-outline-width-l:  2px;
  --comp-button-outline-width-xl: 3px;

  /* Icon button family size matrix (M3 Expressive —
   * m3.material.io/components/icon-buttons/specs). The icon-button contract that
   * core/social-links' icon cluster, the theme-switcher segment, the core/search
   * icon submit, and any future standalone icon button converge on. WP
   * social-links sizes map small/normal(default)/large/huge → XS/S/M/L (see
   * docs/ICON-BUTTON-ROUTE.md). Stored now, consumed when that contract lands
   * (isolation candidate — see docs/TOKENS-COMP-AUDIT.md). Raw dimensions are
   * literal dp; every shape references the sys corner scale, and the pressed /
   * selected shape morph reuses the sys fast-spatial spring. */

  /* container height (dp) */
  --comp-icon-button-height-xs: 32px;
  --comp-icon-button-height-s:  40px;   /* default */
  --comp-icon-button-height-m:  56px;
  --comp-icon-button-height-l:  96px;
  --comp-icon-button-height-xl: 136px;

  /* icon glyph size (dp) */
  --comp-icon-button-icon-size-xs: 20px;
  --comp-icon-button-icon-size-s:  24px;
  --comp-icon-button-icon-size-m:  24px;
  --comp-icon-button-icon-size-l:  32px;
  --comp-icon-button-icon-size-xl: 40px;

  /* leading/trailing inline space — symmetric; width variants narrow / (default) / wide */
  --comp-icon-button-space-xs-narrow: 4px;
  --comp-icon-button-space-xs:        6px;
  --comp-icon-button-space-xs-wide:   10px;
  --comp-icon-button-space-s-narrow:  4px;
  --comp-icon-button-space-s:         8px;
  --comp-icon-button-space-s-wide:    14px;
  --comp-icon-button-space-m-narrow:  12px;
  --comp-icon-button-space-m:         16px;
  --comp-icon-button-space-m-wide:    24px;
  --comp-icon-button-space-l-narrow:  16px;
  --comp-icon-button-space-l:         32px;
  --comp-icon-button-space-l-wide:    48px;
  --comp-icon-button-space-xl-narrow: 32px;
  --comp-icon-button-space-xl:        48px;
  --comp-icon-button-space-xl-wide:   72px;

  /* outline width (outlined variant, dp) */
  --comp-icon-button-outline-width-xs: 1px;
  --comp-icon-button-outline-width-s:  1px;
  --comp-icon-button-outline-width-m:  1px;
  --comp-icon-button-outline-width-l:  2px;
  --comp-icon-button-outline-width-xl: 3px;

  /* shape — resting round = Circular (full); square + pressed-morph + selected
   * reference the sys corner scale (dp noted for provenance). */
  --comp-icon-button-shape-round:     var(--md-sys-shape-corner-full);
  --comp-icon-button-shape-square-xs: var(--md-sys-shape-corner-medium);      /* 12 */
  --comp-icon-button-shape-square-s:  var(--md-sys-shape-corner-medium);      /* 12 */
  --comp-icon-button-shape-square-m:  var(--md-sys-shape-corner-large);       /* 16 */
  --comp-icon-button-shape-square-l:  var(--md-sys-shape-corner-extra-large); /* 28 */
  --comp-icon-button-shape-square-xl: var(--md-sys-shape-corner-extra-large); /* 28 */

  --comp-icon-button-shape-pressed-xs: var(--md-sys-shape-corner-small);  /* 8 */
  --comp-icon-button-shape-pressed-s:  var(--md-sys-shape-corner-small);  /* 8 */
  --comp-icon-button-shape-pressed-m:  var(--md-sys-shape-corner-medium); /* 12 */
  --comp-icon-button-shape-pressed-l:  var(--md-sys-shape-corner-large);  /* 16 */
  --comp-icon-button-shape-pressed-xl: var(--md-sys-shape-corner-large);  /* 16 */

  /* selected: round variant morphs to a rounded square; square variant morphs to Circular */
  --comp-icon-button-shape-selected-round-xs: var(--md-sys-shape-corner-medium);      /* 12 */
  --comp-icon-button-shape-selected-round-s:  var(--md-sys-shape-corner-medium);      /* 12 */
  --comp-icon-button-shape-selected-round-m:  var(--md-sys-shape-corner-large);       /* 16 */
  --comp-icon-button-shape-selected-round-l:  var(--md-sys-shape-corner-extra-large); /* 28 */
  --comp-icon-button-shape-selected-round-xl: var(--md-sys-shape-corner-extra-large); /* 28 */
  --comp-icon-button-shape-selected-square:   var(--md-sys-shape-corner-full);        /* Circular */

  /* pressed / selected shape-morph spring — reuse the sys fast-spatial spring (0.6 / 800) */
  --comp-icon-button-morph-spring-damping:   var(--md-sys-motion-spring-fast-spatial-damping);
  --comp-icon-button-morph-spring-stiffness: var(--md-sys-motion-spring-fast-spatial-stiffness);

  /* Feed */
  --comp-feed-gap: var(--space-sm);
  --comp-feed-max: 640px;

  /* Avatar */
  --comp-avatar-size:   40px;
  --comp-avatar-radius: var(--md-sys-shape-corner-full);

  /* Navigation */
  --comp-rail-width:    96px;   /* collapsed nav rail default */
  --comp-rail-narrow:   80px;
  --comp-rail-expanded: 220px;

  /* Icon sizing — for buttons, icon buttons, app bar, nav, card icons */
  --comp-icon-size-sm: 20px;  /* button XS/S, chip, menu item */
  --comp-icon-size-md: 24px;  /* button M, icon button, app bar, nav, card */
  --comp-icon-size-lg: 28px;  /* medium FAB, button L */
  --comp-icon-size-xl: 32px;  /* large FAB, button XL */

  /* Touch target minimum (a11y) */
  --comp-touch-target: 48px;
}

/* ============================================================
 * §10 Semantic aliases (prompt-v2 §8.1)
 *
 * Sit between sys tokens and component CSS. Components prefer
 * aliases first; sys tokens only as fallback. All aliases
 * reference var(--md-sys-color-*) directly — never rgb() wrap.
 * ============================================================ */
:root {
  /* --- Surface roles (by use, not by M3 name) --- */
  --site-bg:       var(--md-sys-color-background);
  --feed-bg:       var(--md-sys-color-surface-container-lowest);
  --card-bg:       var(--md-sys-color-surface-container);
  --card-bg-hover: var(--md-sys-color-surface-container-high);
  --modal-bg:      var(--md-sys-color-surface-container-high);

  /* --- Navigation roles --- */
  --nav-rail-bg:        var(--md-sys-color-surface);            /* collapsed standalone */
  --nav-rail-bg-modal:  var(--md-sys-color-surface-container);  /* expanded modal */
  --nav-bar-bg:         var(--md-sys-color-surface-container);
  --nav-item-active:    var(--md-sys-color-secondary-container);
  --nav-on-item-active: var(--md-sys-color-on-secondary-container);

  /* --- Action roles --- */
  --action-primary-bg:   var(--md-sys-color-primary);
  --action-primary-fg:   var(--md-sys-color-on-primary);
  --action-secondary-bg: var(--md-sys-color-secondary-container);
  --action-secondary-fg: var(--md-sys-color-on-secondary-container);
}

/* ============================================================
 * §11 Layout tokens (prompt-v2 §9)
 *
 * Replaces Phase-1's hardcoded 640/320. Templates may override
 * any of these in a more specific selector.
 * ============================================================ */
:root {
  --layout-content-max:        640px;  /* feed surface, articles */
  --layout-rail-width:         96px;   /* collapsed nav rail */
  --layout-rail-narrow:        80px;   /* narrow rail variant */
  --layout-rail-expanded:      220px;  /* expanded rail min-width */
  --layout-rail-expanded-max:  360px;
  --layout-feed-max:           640px;  /* feed timeline */
  --layout-aside-max:          320px;  /* right column on wide layout */
  --layout-modal-max:          560px;  /* basic dialog */
  --layout-bottom-sheet-max:   640px;
}

