/**
 * File: /shared/css/tokens.css
 * Purpose: Shared platform design tokens.
 *
 * Defines semantic UI values that are consistent across all brands.
 * Brand-specific values must not be defined in this file.
 *
 * Shared component CSS should consume these tokens rather than
 * repeating hard-coded platform UI values.
 *
 * This file must not contain:
 * - Brand-specific colors
 * - Brand-specific imagery
 * - Component-specific styling
 * - Page-specific values
 */

 :root {
    /* ==========================================
       Text
       ========================================== */

    --color-text: #222222;
    --color-text-secondary: #333333;
    --color-text-muted: #555555;
    --color-text-subtle: #666666;
    --color-text-placeholder: #888888;


    /* ==========================================
       Surfaces
       ========================================== */

    --color-surface: #ffffff;
    --color-surface-muted: #f8f9fa;
    --color-skeleton: #eeeeee;


    /* ==========================================
       Borders
       ========================================== */

    --color-border: #dcdcdc;
    --color-border-hover: #b5b5b5;
    --color-border-dark: #000000;


    /* ==========================================
       Semantic States
       ========================================== */

    --color-error: #dc3545;
    --color-disabled: #b0b0b0;


    /* ==========================================
       Focus
       ========================================== */

    --color-focus: #0066cc;


    /* ==========================================
       Shadows
       ========================================== */

    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.05);


    /* ==========================================
       Overlay Colors
       ========================================== */

    --color-overlay-light: rgba(255, 255, 255, 0.50);
    --color-overlay-dark: rgba(0, 0, 0, 0.60);


    /* ==========================================
       Layout
       ========================================== */

    --navbar-height: 80px;
}