/**
 * tokens.css - CSS Custom Properties (Design Tokens)
 * 
 * Defines CSS variables for values used in the canonical .btn base selector.
 * These tokens provide a single source of truth for button styling values.
 */

:root {
    /* Button Base - Display & Layout */
    --btn-display: inline-block;
    --btn-font-weight: 400;
    --btn-text-align: center;
    --btn-white-space: nowrap;
    --btn-vertical-align: middle;
    --btn-user-select: none;
    
    /* Button Base - Border */
    --btn-border-width: 1px;
    --btn-border-style: solid;
    --btn-border-color: transparent;
    
    /* Button Base - Spacing */
    --btn-padding-y: 0.375rem;
    --btn-padding-x: 0.75rem;
    
    /* Button Base - Typography */
    --btn-font-size: 1rem;
    --btn-line-height: 1.5;
    
    /* Button Base - Border Radius */
    --btn-border-radius: 0.25rem;
    
    /* Button Base - Transitions */
    --btn-transition-duration: 0.15s;
    --btn-transition-timing: ease-in-out;
    
    /* Button Base - Cursor */
    --btn-cursor: pointer;
    
    /* Button Primary - Colors */
    --btn-primary-color: #fff;
    --btn-primary-bg: #007bff;
    --btn-primary-border: #007bff;
}