/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+Pro:wght@400;600;700&display=swap');

/* ==========================================================
   COREGRID CMMS — DESIGN TOKENS
   The single source of truth for colors, typography,
   spacing, and other design primitives.
   ========================================================== */

:root {

    /* ----------------------------------------------------
       BRAND COLORS — CoreGrid identity
       ---------------------------------------------------- */
    --cg-navy:        #0E1B26;  /* Deep Navy — primary dark */
    --cg-teal:        #1B5276;  /* Medium Teal — primary brand */
    --cg-cerulean:    #004F8C;  /* Bright Cerulean — links, focus */
    --cg-steel:       #6B747C;  /* Steel Gray — neutral / borders */

    /* ----------------------------------------------------
       SEMANTIC COLORS — assigned roles
       ---------------------------------------------------- */
    --color-primary:           var(--cg-teal);
    --color-primary-dark:      #15405d;
    --color-primary-light:     #2570a3;

    --color-accent:            var(--cg-cerulean);
    --color-accent-dark:       #003a6a;

    --color-text:              #0F172A;
    --color-text-muted:        #475569;
    --color-text-soft:         #64748B;
    --color-text-on-dark:      #F1F5F9;
    --color-text-on-dark-muted: #94A3B8;

    --color-bg:                #F8FAFC;  /* page background */
    --color-bg-elevated:       #FFFFFF;  /* cards, panels */
    --color-bg-sidebar:        var(--cg-navy);
    --color-bg-subtle:         #F1F5F9;  /* subtle highlights */

    --color-border:            #E2E8F0;
    --color-border-strong:     #CBD5E1;
    --color-border-focus:      var(--cg-cerulean);

    /* Status colors */
    --color-success:           #16A34A;
    --color-success-bg:        #F0FDF4;
    --color-success-border:    #BBF7D0;

    --color-warning:           #F59E0B;
    --color-warning-bg:        #FFFBEB;
    --color-warning-border:    #FDE68A;

    --color-danger:            #DC2626;
    --color-danger-bg:         #FEF2F2;
    --color-danger-border:     #FECACA;

    --color-info:              var(--cg-cerulean);
    --color-info-bg:           #EFF6FF;
    --color-info-border:       #BFDBFE;

    /* Status badge colors (preserved from existing system) */
    --status-new:              #6B7280;
    --status-approved:         #0891B2;
    --status-planned:          var(--cg-teal);
    --status-scheduled:        #7C3AED;
    --status-in-progress:      #F59E0B;
    --status-completed:        #16A34A;
    --status-closed:           #111827;
    --status-cancelled:        #DC2626;

    /* Priority colors */
    --priority-low:            #16A34A;
    --priority-medium:         #F59E0B;
    --priority-high:           #DC2626;
    --priority-urgent:         #7F1D1D;

    /* Role colors */
    --role-admin:              #7C3AED;
    --role-manager:            var(--cg-teal);
    --role-technician:         #16A34A;
    --role-requester:          #6B7280;

    /* ----------------------------------------------------
       TYPOGRAPHY
       ---------------------------------------------------- */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-serif:   'Source Serif Pro', 'Georgia', serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Monaco, Consolas, monospace;

    --text-xs:   12px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  34px;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:   1.2;
    --leading-normal:  1.5;
    --leading-relaxed: 1.6;

    /* ----------------------------------------------------
       SPACING — 4px base
       ---------------------------------------------------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ----------------------------------------------------
       SIZING — fixed elements
       ---------------------------------------------------- */
    --sidebar-width:           260px;
    --sidebar-width-collapsed: 64px;
    --header-height:           56px;
    --container-max-width:     1400px;

    /* ----------------------------------------------------
       BORDERS & RADIUS
       ---------------------------------------------------- */
    --radius-sm:   4px;
    --radius:      6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    --border-width:        1px;
    --border-width-strong: 2px;

    /* ----------------------------------------------------
       SHADOWS — subtle, modern
       ---------------------------------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 8px 10px rgba(15, 23, 42, 0.04);

    /* Focus ring (accessibility) */
    --focus-ring: 0 0 0 3px rgba(0, 79, 140, 0.25);

    /* ----------------------------------------------------
       TRANSITIONS
       ---------------------------------------------------- */
    --transition-fast:   100ms ease;
    --transition:        180ms ease;
    --transition-slow:   300ms ease;

    /* ----------------------------------------------------
       Z-INDEX SCALE
       ---------------------------------------------------- */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-fixed:      300;
    --z-modal:      400;
    --z-popover:    500;
    --z-toast:      600;
}