/*  =======================================================
    [tokens-base.css] defines the full atomic design token system.
    It is not responsible for styling any components or layouts.
    All tokens here are referenced by [elements-base.css], [elements-components.css], and individual component stylesheets.
    Bootstrap markup handles layout/grid/spacing directly.
    ======================================================= */

:root {

    /* ===== THR ZONE PILL FALLBACKS (themes override) ===== */
    --pill-zone-z1-bg: #e3f8fc;
    --pill-zone-z1-text: #006699;

    --pill-zone-z2-bg: #daf5e9;
    --pill-zone-z2-text: #198754;

    --pill-zone-z3-bg: #fbe4d0;
    --pill-zone-z3-text: #d4700f;

    --pill-zone-z4-bg: #ffe5e5;
    --pill-zone-z4-text: #a30000;

    /* ======================================================= */
    /* COLORS — NEUTRAL / FUNCTIONAL                       */
    /* ======================================================= */

    --color-white: #ffffff;
    --color-black: #000000;

    /* These now read from theme vars, with safe light-ish fallbacks */
    --color-text-body:   var(--theme-text-body,   #222222);
    --color-text-strong: var(--theme-text-strong, #111111);
    --color-text-muted:  var(--theme-text-muted,  #888888);
    --color-text-light:  var(--theme-text-light,  #ffffff);
    --color-text-dark:   var(--theme-text-dark,   #000000);

    /* Label (used by .label-*, meta-code, table-value, etc.) */
    --color-label:       var(--theme-label,       #475569);

    --color-bg: #ffffff;
    --color-surface: #f9f9f9;
    --color-surface-dark: #f2f2f2;
    --color-surface-light: #fafafa;
    --color-surface-alt: #f5f5f5;
    --color-surface-hover: #f1f1f1;
    --color-surface-primary: var(--color-primary);
    --color-surface-secondary: var(--color-secondary);

    --color-border-default: #dddddd;
    --color-border-light: #eeeeee;
    --color-border-strong: #cccccc;
    --color-border-dark: #888888;

    --color-shadow: rgba(0, 0, 0, 0.05);
    --color-overlay: rgba(0, 0, 0, 0.12);
    --color-backdrop: rgba(0, 0, 0, 0.5);
    --color-backdrop-light: rgba(0, 0, 0, 0.25);

    /* ======================================================= */
    /* COLORS — SEMANTIC TOKENS (INTENT-BASED)            */
    /* ======================================================= */

    --color-primary: var(--color-primary);
    --color-primary-light: var(--color-primary-light);
    --color-primary-dark: var(--color-primary-dark);

    --color-secondary: var(--color-secondary);
    --color-secondary-light: var(--color-secondary-light);
    --color-secondary-dark: var(--color-secondary-dark);

    --color-info: #0dcaf0;
    --color-info-light: #e3f8fc;

    --color-success: #198754;
    --color-success-light: #daf5e9;

    --color-warning: #d4700f;
    --color-warning-light: #fdd9bf;

    --color-danger: #a30000;
    --color-danger-light: #ffe5e5;

    --color-disabled: #cccccc;

    --color-focus: var(--color-primary);
    --color-hover: var(--color-primary-light);
    --color-active: var(--color-primary-dark);

    /* ======================================================= */
    /* TYPOGRAPHY                                          */
    /* ======================================================= */

    --font-family-body: 'Inter', sans-serif;
    --font-family-header: 'Segoe UI', sans-serif;

    --font-size-xxs: 0.60rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;

    --font-size-label-sm: var(--font-size-xs);
    --font-size-body: var(--font-size-md);
    --font-size-header: var(--font-size-lg);
    --font-size-value-lg: var(--font-size-xl);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* ======================================================= */
    /* STAT CARDS                                             */
    /* ======================================================= */

    --stat-bg: var(--color-surface-light);
    --stat-text: var(--color-text-body);
    --stat-shadow: var(--shadow-md);
    --stat-radius: var(--radius-card);

    --stat-title-size: var(--font-size-xs);
    --stat-title-color: var(--color-label);
    --stat-title-transform: uppercase;
    --stat-title-spacing: 0.03em;

    --stat-value-size: var(--font-size-xl);
    --stat-value-weight: var(--font-weight-bold);
    --stat-value-color: var(--color-primary);

    --stat-description-size: var(--font-size-sm);
    --stat-description-color: var(--color-label);

    /* ======================================================= */
    /* LABEL TOKENS                                           */
    /* ======================================================= */

    --label-color-default: var(--color-label);
    --label-color-muted: var(--color-text-muted);
    --label-color-strong: var(--color-text-strong);
    --label-color-success: var(--color-success);
    --label-color-danger: var(--color-danger);
    --label-color-warning: var(--color-warning);

    --label-font-size-sm: var(--font-size-xs);
    --label-font-size-md: var(--font-size-sm);
    --label-font-size-lg: var(--font-size-md);

    /* ======================================================= */
    /* SPACING SYSTEM (GAP / PADDING / MARGIN)             */
    /* ======================================================= */

    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;

    --gap-sm: var(--spacing-sm);
    --gap-md: var(--spacing-md);
    --gap-lg: var(--spacing-lg);

    --padding-xxs: var(--spacing-xxs);
    --padding-xs: var(--spacing-xs);
    --padding-sm: var(--spacing-sm);
    --padding-md: var(--spacing-md);
    --padding-lg: var(--spacing-lg);

    --margin-xxs: var(--spacing-xxs);
    --margin-xs: var(--spacing-xs);
    --margin-sm: var(--spacing-sm);
    --margin-md: var(--spacing-md);
    --margin-lg: var(--spacing-lg);

    /* ======================================================= */
    /* RADIUS                                              */
    /* ======================================================= */

    --radius-xs: 5px;
    --radius-sm: 7px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-pill: 20px;
    --radius-circle: 9999px;

    --radius-card: var(--radius-lg);
    --radius-button: var(--radius-sm);
    --radius-input: var(--radius-md);

    /* ======================================================= */
    /* SHADOWS                                             */
    /* ======================================================= */

    --shadow-xs: 0 1px 2px var(--color-shadow);
    --shadow-sm: 0 2px 4px var(--color-shadow);
    --shadow-md: 0 2px 8px var(--color-shadow);
    --shadow-lg: 0 3px 12px var(--color-overlay);
    --shadow-elevated: var(--shadow-lg);
    --shadow-card: var(--shadow-md);

    /* ======================================================= */
    /* OPACITY                                              */
    /* ======================================================= */

    --opacity-disabled: 0.6;
    --opacity-muted: 0.75;

    /* ======================================================= */
    /* Z-INDEX TOKENS                                     */
    /* ======================================================= */

    --z-index-base: 1;
    --z-index-overlay: 10;
    --z-index-modal: 100;
    --z-index-toast: 999;
    --z-index-tooltip: 1000;

    /* ======================================================= */
    /* TRANSITIONS & TIMING                                */
    /* ======================================================= */

    --transition-fast: 0.15s ease-in-out;
    --transition-default: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* ======================================================= */
    /* GRAYSCALE RAMP                                */
    /* ======================================================= */

    --gray-50:  #f9f9f9;
    --gray-100: #f2f2f2;
    --gray-200: #e0e0e0;
    --gray-300: #cccccc;
    --gray-400: #aaaaaa;
    --gray-500: #888888;
    --gray-600: #666666;
    --gray-700: #444444;
    --gray-800: #222222;
    --gray-900: #111111;

    /* ======================================================= */
    /* COMPONENT COLOR ALIASES                                */
    /* ======================================================= */

    /* === Buttons === */
    --btn-primary: var(--color-primary);
    --btn-secondary: var(--color-secondary);
    --btn-outline: var(--color-bg);
    --btn-text-primary: var(--color-primary-light);
    --btn-border-outline: var(--color-primary);

    /* === Labels === */
    --label-text-default: var(--color-label);
    --label-text-muted: var(--color-text-muted);
    --label-text-success: var(--color-success);
    --label-text-warning: var(--color-warning);
    --label-text-danger: var(--color-danger);

    /* === Pills === */
    --pill-bg: var(--color-primary-light);
    --pill-text: var(--color-primary-dark);
    --pill-border: var(--color-primary);

    --pill-bg-success: var(--color-success-light);
    --pill-text-success: var(--color-success);

    --pill-bg-warning: var(--color-warning-light);
    --pill-text-warning: var(--color-warning);

    --pill-bg-danger: var(--color-danger-light);
    --pill-text-danger: var(--color-danger);

    --pill-bg-outline: transparent;
    --pill-text-outline: var(--color-primary);
    --pill-border-outline: var(--color-primary);

    /* Status pills used in “On Time” etc. */
    --pill-status-green-bg:  var(--color-success);
    --pill-status-green-text: #ffffff;

    --pill-status-yellow-bg: var(--color-warning);
    --pill-status-yellow-text: #ffffff;

    --pill-status-red-bg:    var(--color-danger);
    --pill-status-red-text:  #ffffff;

    /* === Cards === */
    /* sizing */
    --card-radius: var(--radius-card);
    --card-padding: var(--padding-lg);
    --card-shadow: var(--shadow-card);
    --card-hover-shadow: var(--shadow-elevated);
    --card-border-width: 1px;

    /* base */
    --card-default-bg:     var(--color-surface);
    --card-default-text:   var(--color-text-body);
    --card-default-border: var(--color-border-light);

    /* variants (ALL border tokens are COLORS) */
    --card-muted-bg:     var(--color-surface);
    --card-muted-text:   var(--color-label);
    --card-muted-border: var(--color-border-light);

    --card-info-bg:      var(--color-info-light);
    --card-info-text:    var(--color-info);

    --card-success-bg:   var(--color-success-light);
    --card-success-text: var(--color-success);

    --card-warning-bg:   var(--color-warning-light);
    --card-warning-text: var(--color-warning);

    --card-danger-bg:    var(--color-danger-light);
    --card-danger-text:  var(--color-danger);

    /* ====== CHART ACCENTS ====== */
    --chart-color-blue:   #1565c0;
    --chart-color-green:  #198754;
    --chart-color-orange: #ff9800;
    --chart-color-red:    #d32f2f;
    --chart-gridline-color: var(--color-border-light);

    /* === Alerts === */
    --alert-bg-success: var(--color-success-light);
    --alert-bg-warning: var(--color-warning-light);
    --alert-bg-danger: var(--color-danger-light);
    --alert-bg-info: var(--color-info-light);
    --alert-bg-muted: var(--color-border-light);

    --alert-text-success: var(--color-success);
    --alert-text-warning: var(--color-warning);
    --alert-text-danger: var(--color-danger);
    --alert-text-info: var(--color-info);
    --alert-text-muted: var(--color-text-muted);

    /* === Modals === */
    --modal-bg-default: var(--color-surface);
    --modal-border-default: var(--color-border-default);

    /* === Stat Tiles === */
    --stat-tile-bg: var(--color-bg);
    --stat-tile-title-color: var(--color-label);
    --stat-tile-value-color: var(--color-primary);
    --stat-tile-description-color: var(--color-label);

    --tile-min-h: 60px;

    /* === Dividers === */
    --divider-color-default: var(--color-border-light);

    /* === Section Headers === */
    --section-header-color: var(--color-primary);

    /* === Metric Grid === */
    --metric-tile-min: 180px;

    /* Tooling helpers: global defaults for stacked-table chrome */
    --stacked-card-bg: #fff;                           /* mobile stacked row background */
    --stacked-card-border: var(--color-border-light);
    --stacked-card-radius: var(--radius-card);
    --stacked-card-shadow: var(--shadow-card);
    --stacked-card-padding: var(--padding-md);
    --stacked-card-gap: var(--spacing-sm);

    --table-sticky-bg: #fff;                           /* sticky first-col background */

    /* === Chips (choice/filter pills) === */
    --chip-radius: var(--radius-pill);
    --chip-font-size: var(--font-size-sm);
    --chip-gap: var(--spacing-xs);

    /* Size paddings (used by .chip and .chip-lg) */
    --chip-px: 0.75rem;
    --chip-py: 0.30rem;
    --chip-px-lg: 1rem;
    --chip-py-lg: 0.45rem;

    /* Base (neutral) */
    --chip-bg: var(--color-surface);
    --chip-text: var(--color-text-body);
    --chip-border: var(--color-border-default);

    /* Outline variant */
    --chip-bg-outline: transparent;
    --chip-text-outline: var(--color-text-body);
    --chip-border-outline: var(--color-border-default);

    /* Filled (primary) */
    --chip-bg-filled: var(--color-primary);
    --chip-text-filled: var(--color-white);
    --chip-border-filled: var(--color-primary);

    /* Hover / active affordances */
    --chip-hover-bg: var(--color-surface-hover);
    --chip-hover-border: var(--color-border-strong);
    --chip-active-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);

    /* Semantic presets — map to your existing intent colors */
    /* Intensity */
    --chip-beginner-bg: var(--pill-bg-success);
    --chip-beginner-text: var(--pill-text-success);
    --chip-beginner-border: var(--color-success);

    --chip-moderate-bg: var(--pill-bg-warning);
    --chip-moderate-text: var(--pill-text-warning);
    --chip-moderate-border: var(--color-warning);

    --chip-advanced-bg: var(--pill-bg-danger);
    --chip-advanced-text: var(--pill-text-danger);
    --chip-advanced-border: var(--color-danger);

    /* Effort */
    --chip-effort-low-bg: var(--pill-bg-success);
    --chip-effort-low-text: var(--pill-text-success);
    --chip-effort-low-border: var(--color-success);

    --chip-effort-medium-bg: var(--color-primary-light);
    --chip-effort-medium-text: var(--color-primary-dark);
    --chip-effort-medium-border: var(--color-primary);

    --chip-effort-high-bg: var(--pill-bg-danger);
    --chip-effort-high-text: var(--pill-text-danger);
    --chip-effort-high-border: var(--color-danger);

}