// =============================================================================
// APUS ADMIN PANEL - DESIGN TOKENS
// =============================================================================
// Este archivo contiene todas las variables de diseño del sistema de
// administración de APU México.
//
// Uso:
// @import 'design-tokens-apus-admin';
// =============================================================================

// =============================================================================
// COLORES
// =============================================================================

// Navy Brand Colors
// -----------------------------------------------------------------------------
$color-navy-dark: #0E2337;        // Fondo principal, headers
$color-navy-primary: #1e3a5f;     // Títulos, bordes importantes
$color-navy-light: #2c5282;       // Variaciones secundarias

// Orange Accent Colors
// -----------------------------------------------------------------------------
$color-orange-primary: #FF8600;   // Acción primaria, iconos destacados
$color-orange-hover: #FF6B35;     // Hover states
$color-orange-light: #FFB800;     // Badges, alerts suaves

// Neutral Colors
// -----------------------------------------------------------------------------
$color-neutral-50: #f8f9fa;       // Fondo general del body
$color-neutral-100: #e9ecef;      // Bordes, separadores
$color-neutral-200: #dee2e6;      // Bordes sutiles
$color-neutral-600: #495057;      // Texto principal
$color-neutral-700: #6c757d;      // Texto secundario
$color-neutral-900: #212529;      // Texto muy oscuro

// Semantic Colors
// -----------------------------------------------------------------------------
$color-success: #28a745;          // Acciones exitosas
$color-danger: #dc3545;           // Errores, acciones destructivas
$color-warning: #ffc107;          // Advertencias
$color-info: #17a2b8;             // Información

// Background Colors
// -----------------------------------------------------------------------------
$bg-body: $color-neutral-50;
$bg-card: #ffffff;
$bg-header: linear-gradient(135deg, $color-navy-dark 0%, $color-navy-primary 100%);

// =============================================================================
// TIPOGRAFÍA
// =============================================================================

// Font Family
// -----------------------------------------------------------------------------
$font-family-base: 'Poppins', sans-serif;

// Font Sizes
// -----------------------------------------------------------------------------
$font-size-base: 1rem;            // 16px
$font-size-sm: 0.875rem;          // 14px (labels, small text)
$font-size-xs: 0.75rem;           // 12px (hints, badges)

$font-size-h1: 2rem;              // 32px
$font-size-h2: 1.75rem;           // 28px
$font-size-h3: 1.5rem;            // 24px (título principal del tab)
$font-size-h4: 1.25rem;           // 20px (subtítulos grandes)
$font-size-h5: 1rem;              // 16px (títulos de cards)
$font-size-h6: 0.875rem;          // 14px

// Font Weights
// -----------------------------------------------------------------------------
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// Line Heights
// -----------------------------------------------------------------------------
$line-height-base: 1.5;
$line-height-tight: 1.2;          // Para títulos
$line-height-relaxed: 1.6;

// =============================================================================
// ESPACIADO
// =============================================================================

// Spacing Scale (rem)
// -----------------------------------------------------------------------------
$spacing-0: 0;
$spacing-1: 0.25rem;              // 4px
$spacing-2: 0.5rem;               // 8px
$spacing-3: 1rem;                 // 16px
$spacing-4: 1.5rem;               // 24px
$spacing-5: 3rem;                 // 48px

// Specific Usage
// -----------------------------------------------------------------------------
$spacing-field-margin: $spacing-2;          // mb-2 en campos
$spacing-card-margin: $spacing-3;           // mb-3 en cards
$spacing-header-margin: $spacing-4;         // mb-4 en headers
$spacing-icon-margin: $spacing-2;           // me-2 en iconos grandes
$spacing-icon-small-margin: $spacing-1;     // me-1 en iconos pequeños
$spacing-card-padding: $spacing-3;          // p-3 en card-body
$spacing-container-padding: $spacing-4;     // py-4 en container

// =============================================================================
// LAYOUT
// =============================================================================

// Container
// -----------------------------------------------------------------------------
$container-max-width: 1400px;
$container-padding-x: 0.75rem;

// Grid
// -----------------------------------------------------------------------------
$grid-gutter-width: 1.5rem;
$grid-gutter-sm: 1rem;            // g-3
$grid-gutter-xs: 0.5rem;          // g-2

// Breakpoints
// -----------------------------------------------------------------------------
$breakpoint-xs: 0;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;            // Punto de quiebre principal
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// =============================================================================
// BORDES
// =============================================================================

// Border Width
// -----------------------------------------------------------------------------
$border-width-thin: 1px;
$border-width-thick: 4px;

// Border Radius
// -----------------------------------------------------------------------------
$border-radius-sm: 0.25rem;       // 4px
$border-radius: 0.375rem;         // 6px (default Bootstrap)
$border-radius-lg: 0.5rem;        // 8px

// Border Colors
// -----------------------------------------------------------------------------
$border-color: $color-neutral-200;
$border-color-card: $color-navy-primary;
$border-color-preview: $color-orange-primary;

// =============================================================================
// SOMBRAS
// =============================================================================

$shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
$shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
$shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);

// =============================================================================
// COMPONENTES
// =============================================================================

// Cards
// -----------------------------------------------------------------------------
$card-border-width: 0;
$card-border-left-width: $border-width-thick;
$card-border-radius: $border-radius;
$card-shadow: $shadow-sm;
$card-padding: $spacing-card-padding;
$card-margin: $spacing-card-margin;

// Buttons
// -----------------------------------------------------------------------------
$btn-border-radius: $border-radius;
$btn-padding-y: 0.375rem;
$btn-padding-x: 0.75rem;
$btn-padding-y-sm: 0.25rem;
$btn-padding-x-sm: 0.5rem;

// Inputs
// -----------------------------------------------------------------------------
$input-border-radius: $border-radius;
$input-border-color: $color-neutral-300;
$input-focus-border-color: $color-orange-primary;
$input-padding-y: 0.375rem;
$input-padding-x: 0.75rem;
$input-padding-y-sm: 0.25rem;
$input-padding-x-sm: 0.5rem;

// Badges
// -----------------------------------------------------------------------------
$badge-font-size: 0.65rem;
$badge-padding-y: 0.25rem;
$badge-padding-x: 0.5rem;

// Progress Bar
// -----------------------------------------------------------------------------
$progress-height: 3px;
$progress-bar-bg: $color-orange-primary;
$progress-bar-warning: $color-warning;
$progress-bar-danger: $color-danger;

// =============================================================================
// TRANSICIONES
// =============================================================================

$transition-base: all 0.3s ease-in-out;
$transition-fast: all 0.15s ease-in-out;
$transition-slow: all 0.5s ease-in-out;

// =============================================================================
// Z-INDEX
// =============================================================================

$z-index-notification: 9999;
$z-index-modal: 1050;
$z-index-dropdown: 1000;
$z-index-sticky: 1020;

// =============================================================================
// MIXINS
// =============================================================================

// Media Query Mixins
// -----------------------------------------------------------------------------
@mixin media-xs {
    @media (max-width: #{$breakpoint-sm - 1px}) {
        @content;
    }
}

@mixin media-sm {
    @media (min-width: $breakpoint-sm) {
        @content;
    }
}

@mixin media-md {
    @media (min-width: $breakpoint-md) {
        @content;
    }
}

@mixin media-lg {
    @media (min-width: $breakpoint-lg) {
        @content;
    }
}

@mixin media-xl {
    @media (min-width: $breakpoint-xl) {
        @content;
    }
}

@mixin media-xxl {
    @media (min-width: $breakpoint-xxl) {
        @content;
    }
}

// Component Mixins
// -----------------------------------------------------------------------------
@mixin card-base {
    border: $card-border-width;
    border-radius: $card-border-radius;
    box-shadow: $card-shadow;
    background-color: $bg-card;
    margin-bottom: $card-margin;
}

@mixin card-border-left($color: $border-color-card) {
    border-left: $border-width-thick solid $color;
}

@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin center-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

// =============================================================================
// UTILITY CLASSES (Opcional - si no usas Bootstrap utilities)
// =============================================================================

// Solo descomentar si necesitas clases que no están en Bootstrap

/*
.text-navy {
    color: $color-navy-primary;
}

.text-orange {
    color: $color-orange-primary;
}

.bg-navy {
    background-color: $color-navy-primary;
}

.bg-orange {
    background-color: $color-orange-primary;
}

.border-navy {
    border-color: $color-navy-primary !important;
}

.border-orange {
    border-color: $color-orange-primary !important;
}
*/

// =============================================================================
// EJEMPLO DE USO
// =============================================================================

/*
// En tu archivo SCSS:
@import 'design-tokens-apus-admin';

.custom-header {
    background: $bg-header;
    color: white;
    padding: $spacing-card-padding;
    border-left: $border-width-thick solid $color-orange-primary;

    h1 {
        font-size: $font-size-h3;
        font-weight: $font-weight-bold;
        margin-bottom: $spacing-1;
    }
}

.custom-card {
    @include card-base;
    @include card-border-left($color-navy-primary);

    &.preview {
        @include card-border-left($color-orange-primary);
    }
}

.responsive-text {
    font-size: $font-size-sm;

    @include media-lg {
        font-size: $font-size-base;
    }
}
*/