/**
 * Detail Page Design Tokens — 2026-04-07
 * Fastorder Canonical Detail Architecture
 *
 * Load order:
 *   1. color-system.css  (colors — MUST load first)
 *   2. detail-tokens.css (layout/spacing/sizing — this file)
 *   3. detail-page.css   (shared component classes)
 *   4. ai-workflow.css   (AI-specific, load only on AI-capable pages)
 */

:root {
    /* Layout */
    --fo-detail-max-width:         1400px;
    --fo-detail-max-width-narrow:  1200px;
    --fo-detail-max-width-wide:    1600px;
    --fo-detail-padding-x:         20px;
    --fo-detail-padding-y:         30px;

    /* Cards */
    --fo-card-radius:  12px;
    --fo-card-padding: 24px;
    --fo-card-gap:     24px;

    /* Buttons — canonical (content detail sizing) */
    --fo-btn-padding-x:     20px;
    --fo-btn-padding-y:     10px;
    --fo-btn-radius:        8px;
    --fo-btn-font-size:     14px;
    --fo-btn-sm-padding-x:  14px;
    --fo-btn-sm-padding-y:  8px;
    --fo-btn-sm-radius:     6px;
    --fo-btn-sm-font-size:  13px;

    /* Badges */
    --fo-badge-padding-x: 12px;
    --fo-badge-padding-y:  4px;
    --fo-badge-radius:    20px;
    --fo-badge-font-size: 12px;

    /* Tables — canonical: sticky headers */
    --fo-table-cell-padding-x:        16px;
    --fo-table-cell-padding-y:        14px;
    --fo-table-header-font-size:      11px;
    --fo-table-header-letter-spacing: 0.5px;
    --fo-table-body-font-size:        14px;

    /* Typography */
    --fo-font-mono:   'SF Mono', 'Fira Code', 'Consolas', monospace;
    --fo-font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                      'Helvetica Neue', Arial, sans-serif;

    /* Info Grid */
    --fo-info-label-width:     140px;
    --fo-info-label-font-size:  13px;
    --fo-info-value-font-size:  14px;
    --fo-info-row-padding-y:    12px;

    /* Dialogs */
    --fo-dialog-radius:  12px;
    --fo-dialog-padding: 28px;
    --fo-dialog-width:   480px;
    --fo-dialog-overlay: rgba(0, 0, 0, 0.5);

    /* Toggle switches */
    --fo-toggle-width:  36px;
    --fo-toggle-height: 20px;
    --fo-toggle-knob:   14px;
    --fo-toggle-on-bg:  var(--mon-accent-green);
    --fo-toggle-off-bg: #ccc;
}