/* ============================================================
 * 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.
 * ============================================================ */

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

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