/**
 * Teacher Dashboard - CSS Variables & Design Tokens
 * M4 Europe Brand Guidelines
 *
 * This file defines all shared design tokens used across the plugin.
 * Import this file first in any component stylesheet.
 */

:root {
    /* ===================================
       M4 Brand Colors
       =================================== */

    /* Primary Colors */
    --td-color-ivory: #FAFAF0;
    --td-color-black: #333333;
    --td-color-blue: #82A5E4;
    --td-color-blue-dark: #627CAB;
    --td-color-teal: #4E8E8E;
    --td-color-ocre: #D29453;
    --td-color-red: #FE5E41;
    --td-color-red-light: #FE7E67;
    --td-color-red-dark: #7F2F21;

    /* Neutral Colors */
    --td-color-gray-50: #f9f9f9;
    --td-color-gray-100: #f5f5f0;
    --td-color-gray-200: #e0e0e0;
    --td-color-gray-300: #d0d0d0;
    --td-color-gray-400: #b0b0b0;
    --td-color-gray-500: #999999;
    --td-color-gray-600: #666666;
    --td-color-gray-700: #4a4a4a;

    /* ===================================
       Semantic Colors
       =================================== */

    /* Status Colors */
    --td-color-success: var(--td-color-teal);
    --td-color-warning: var(--td-color-ocre);
    --td-color-danger: var(--td-color-red);
    --td-color-info: var(--td-color-blue);

    /* Background Colors */
    --td-bg-primary: var(--td-color-ivory);
    --td-bg-secondary: var(--td-color-gray-100);
    --td-bg-hover: var(--td-color-gray-100);

    /* Text Colors */
    --td-text-primary: var(--td-color-black);
    --td-text-secondary: var(--td-color-gray-600);
    --td-text-muted: var(--td-color-gray-500);
    --td-text-inverse: var(--td-color-ivory);

    /* Border Colors */
    --td-border-color: var(--td-color-gray-200);
    --td-border-color-light: #f0f0f0;
    --td-border-color-focus: var(--td-color-blue);

    /* Link Colors */
    --td-link-color: var(--td-color-blue);
    --td-link-hover: var(--td-color-blue-dark);

    /* ===================================
       Typography
       =================================== */

    --td-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font Sizes */
    --td-font-size-xs: 11px;
    --td-font-size-sm: 13px;
    --td-font-size-base: 14px;
    --td-font-size-md: 16px;
    --td-font-size-lg: 18px;
    --td-font-size-xl: 20px;
    --td-font-size-2xl: 24px;
    --td-font-size-3xl: 32px;

    /* Font Weights */
    --td-font-weight-normal: 400;
    --td-font-weight-medium: 500;
    --td-font-weight-semibold: 600;
    --td-font-weight-bold: 700;

    /* Line Heights */
    --td-line-height-tight: 1.2;
    --td-line-height-normal: 1.4;
    --td-line-height-relaxed: 1.6;

    /* Letter Spacing */
    --td-letter-spacing-tight: -0.01em;
    --td-letter-spacing-normal: 0;
    --td-letter-spacing-wide: 0.5px;

    /* ===================================
       Spacing
       =================================== */

    --td-space-xs: 4px;
    --td-space-sm: 8px;
    --td-space-md: 12px;
    --td-space-lg: 16px;
    --td-space-xl: 20px;
    --td-space-2xl: 24px;
    --td-space-3xl: 30px;
    --td-space-4xl: 40px;

    /* ===================================
       Border Radius
       =================================== */

    --td-radius-sm: 4px;
    --td-radius-md: 6px;
    --td-radius-lg: 8px;
    --td-radius-xl: 12px;
    --td-radius-full: 9999px;

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

    --td-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --td-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
    --td-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.12);
    --td-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.15);
    --td-shadow-focus: 0 0 0 3px rgba(130, 165, 228, 0.15);

    /* ===================================
       Transitions
       =================================== */

    --td-transition-fast: 0.15s ease;
    --td-transition-base: 0.2s ease;
    --td-transition-slow: 0.3s ease;

    /* ===================================
       Z-Index Scale
       =================================== */

    --td-z-dropdown: 100;
    --td-z-sticky: 200;
    --td-z-modal-backdrop: 900;
    --td-z-modal: 1000;
    --td-z-tooltip: 1100;

    /* ===================================
       Component-Specific Tokens
       =================================== */

    /* Cards */
    --td-card-bg: var(--td-bg-primary);
    --td-card-border: var(--td-border-color);
    --td-card-radius: var(--td-radius-lg);
    --td-card-shadow: var(--td-shadow-md);
    --td-card-padding: var(--td-space-2xl);

    /* Tables */
    --td-table-header-bg: var(--td-bg-secondary);
    --td-table-row-hover: var(--td-bg-hover);
    --td-table-border: var(--td-border-color);
    --td-table-cell-padding: var(--td-space-md) var(--td-space-lg);

    /* Forms */
    --td-input-bg: var(--td-bg-primary);
    --td-input-border: var(--td-color-gray-300);
    --td-input-focus-border: var(--td-color-blue);
    --td-input-radius: var(--td-radius-md);
    --td-input-padding: var(--td-space-sm) var(--td-space-md);

    /* Buttons */
    --td-btn-primary-bg: var(--td-color-blue);
    --td-btn-primary-hover: var(--td-color-blue-dark);
    --td-btn-primary-text: var(--td-color-ivory);
    --td-btn-radius: var(--td-radius-md);
    --td-btn-padding: var(--td-space-sm) var(--td-space-xl);

    /* Badges */
    --td-badge-radius: var(--td-radius-sm);
    --td-badge-padding: var(--td-space-xs) 10px;
    --td-badge-font-size: var(--td-font-size-xs);

    /* Container */
    --td-container-max-width: 1400px;
    --td-container-padding: var(--td-space-xl);
}

/* ===================================
   Dark Mode Support (Future)
   =================================== */

@media (prefers-color-scheme: dark) {
    :root.td-dark-mode {
        /* Override variables for dark mode when implemented */
    }
}