/* ========================================
   TamRank Design Tokens
   Single source of truth — brand guide v1.0
   ======================================== */

:root {
    /* Colors - Primary (Emerald) */
    --tr-color-primary: #10b981;
    --tr-color-primary-hover: #059669;
    --tr-color-primary-light: #d1fae5;

    /* Colors - Backgrounds */
    --tr-color-base: #F5F4F2;
    --tr-color-surface: #ECEAE7;
    --tr-color-white: #ffffff;

    /* Colors - Slate Palette */
    --tr-color-slate-900: #0f172a;
    --tr-color-slate-800: #1e293b;
    --tr-color-slate-700: #334155;
    --tr-color-slate-600: #475569;
    --tr-color-slate-500: #64748b;
    --tr-color-slate-400: #94a3b8;
    --tr-color-slate-300: #cbd5e1;
    --tr-color-slate-200: #e2e8f0;
    --tr-color-slate-100: #f1f5f9;

    /* Colors - Status */
    --tr-color-success: #22c55e;
    --tr-color-success-hover: #16a34a;
    --tr-color-success-light: #dcfce7;
    --tr-color-success-bg: rgba(34, 197, 94, 0.1);

    --tr-color-warning: #f59e0b;
    --tr-color-warning-hover: #d97706;
    --tr-color-warning-light: #fef3c7;
    --tr-color-warning-bg: rgba(245, 158, 11, 0.1);

    --tr-color-error: #ef4444;
    --tr-color-error-hover: #dc2626;
    --tr-color-error-light: #fee2e2;
    --tr-color-error-bg: rgba(239, 68, 68, 0.1);

    --tr-color-info: #3b82f6;
    --tr-color-info-hover: #2563eb;
    --tr-color-info-light: #dbeafe;
    --tr-color-info-bg: rgba(59, 130, 246, 0.1);

    /* Colors - Status Scores (dashboard specific) */
    --tr-color-status-excellent: #10b981;
    --tr-color-status-good: #14b8a6;
    --tr-color-status-attention: #f59e0b;
    --tr-color-status-improve: #ef4444;

    /* Typography */
    --tr-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --tr-text-xs: 0.75rem;
    --tr-text-sm: 0.8125rem;
    --tr-text-base: 0.9375rem;
    --tr-text-lg: 1.125rem;
    --tr-text-xl: 1.25rem;
    --tr-text-2xl: 1.5rem;
    --tr-text-3xl: 2rem;
    --tr-text-4xl: 2.5rem;
    --tr-text-5xl: 3rem;

    --tr-font-regular: 400;
    --tr-font-medium: 500;
    --tr-font-semibold: 600;
    --tr-font-bold: 700;
    --tr-font-extrabold: 800;

    /* Line Heights */
    --tr-leading-tight:   1.25;
    --tr-leading-normal:  1.5;
    --tr-leading-relaxed: 1.625;

    /* Spacing */
    --tr-space-1: 4px;
    --tr-space-2: 8px;
    --tr-space-3: 12px;
    --tr-space-4: 16px;
    --tr-space-5: 20px;
    --tr-space-6: 24px;
    --tr-space-8: 32px;
    --tr-space-10: 40px;
    --tr-space-12: 48px;
    --tr-space-16: 64px;
    --tr-space-20: 80px;
    --tr-space-24: 96px;

    /* Global Spacing Scale (Alias) */
    --tr-spacing-xs: var(--tr-space-2);
    --tr-spacing-sm: var(--tr-space-3);
    --tr-spacing-md: var(--tr-space-4);
    --tr-spacing-lg: var(--tr-space-6);
    --tr-spacing-xl: var(--tr-space-8);

    /* Section Spacing */
    --tr-container-max: 1200px;
    --tr-spacing-section: 100px;
    --tr-spacing-section-mobile: 60px;

    /* Radius */
    --tr-radius-sm: 4px;
    --tr-radius-md: 8px;
    --tr-radius-lg: 12px;
    --tr-radius-xl: 16px;
    --tr-radius-2xl: 24px;
    --tr-radius-full: 9999px;

    /* Shadow */
    --tr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --tr-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --tr-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
    --tr-shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
    --tr-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.1);
    --tr-shadow-primary-hover: 0 4px 16px rgba(16, 185, 129, 0.3);
    --tr-shadow-info-hover: 0 6px 14px rgba(59, 130, 246, 0.3);
    --tr-shadow-warning-hover: 0 6px 14px rgba(245, 158, 11, 0.3);
    --tr-shadow-error-hover: 0 6px 14px rgba(239, 68, 68, 0.3);
    --tr-shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.2);
    --tr-shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.2);

    /* Transition */
    --tr-transition-fast: 150ms ease;
    --tr-transition-base: 200ms ease;
    --tr-transition-slow: 300ms ease;

    /* Z-index */
    --tr-z-dropdown:  100;
    --tr-z-sticky:    200;
    --tr-z-modal-bg:  300;
    --tr-z-modal:     400;
    --tr-z-popover:   500;
    --tr-z-tooltip:   600;
    --tr-z-toast:     700;

    /* Component tokens - Buttons */
    --tr-btn-height-sm: 32px;
    --tr-btn-height-md: 40px;
    --tr-btn-height-lg: 48px;
    --tr-btn-padding-sm: 0 12px;
    --tr-btn-padding-md: 0 16px;
    --tr-btn-padding-lg: 0 24px;
    --tr-btn-border-width: 1px;

    /* Component tokens - Inputs */
    --tr-input-height:  40px;
}