/**
 * PLAIDWORX GLOBAL THEME VARIABLES
 * "Soft Steel" Light Theme Refresh
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700;900&display=swap');

/* 51North Pro - Local Font Reference */
@font-face {
  font-family: '51North Pro';
  src: url('fonts/51north-pro.woff2') format('woff2'),
    url('fonts/51north-pro.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* PRIMARY: Steel Blue (#5e7a98) */
  --color-primary:                   #5e7a98;
  --color-on-primary:                #e6e8e9;
  --color-primary-container:         #758fab;
  --color-on-primary-container:      #e6e8e9;
  --color-primary-fixed:             #a5b3c3;
  --color-primary-fixed-dim:         #758fab;
  --color-on-primary-fixed:          #5e7a98;
  --color-on-primary-fixed-variant:  #e6e8e9;

  /* SECONDARY: Slate Blue (#758fab) */
  --color-secondary:                 #758fab;
  --color-on-secondary:              #e6e8e9;
  --color-secondary-container:       #a5b3c3;
  --color-on-secondary-container:    #5e7a98;
  --color-secondary-fixed:           #5e7a98;
  --color-secondary-fixed-dim:       #758fab;
  --color-on-secondary-fixed:        #e6e8e9;
  --color-on-secondary-fixed-variant:#a5b3c3;

  /* TERTIARY: Muted Blue-Grey (#a5b3c3) */
  --color-tertiary:                  #a5b3c3;
  --color-on-tertiary:               #5e7a98;
  --color-tertiary-container:        #e6e8e9;
  --color-on-tertiary-container:     #5e7a98;
  --color-tertiary-fixed:            #758fab;
  --color-tertiary-fixed-dim:        #a5b3c3;
  --color-on-tertiary-fixed:         #e6e8e9;
  --color-on-tertiary-fixed-variant: #5e7a98;

  /* ERROR */
  --color-error:                     #b00020;
  --color-on-error:                  #ffffff;
  --color-error-container:           #f9dedc;
  --color-on-error-container:        #410e0b;

  /* SURFACES: Soft Grey (#e6e8e9) */
  --color-surface:                   #e6e8e9;
  --color-on-surface:                #5e7a98;
  --color-surface-variant:           #cbd5e0;
  --color-on-surface-variant:        #758fab;
  --color-surface-dim:               #d1d5db;
  --color-surface-bright:            #f8fafc;

  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f1f5f9;
  --color-surface-container:         #e6e8e9;
  --color-surface-container-high:    #cbd5e0;
  --color-surface-container-highest: #a5b3c3;
  --color-surface-tint:              #5e7a98;

  /* INVERSE */
  --color-inverse-surface:           #5e7a98;
  --color-inverse-on-surface:        #e6e8e9;
  --color-inverse-primary:           #a5b3c3;

  /* BORDERS */
  --color-outline:                   #a5b3c3;
  --color-outline-variant:           #cbd5e0;

  /* BACKGROUND */
  --color-background:                #e6e8e9;
  --color-on-background:             #5e7a98;
}

.dark {
  /* DARK CYBER PALETTE */
  --color-primary:                   #f0f0f0; /* Neon Pulse White */
  --color-on-primary:                #0a0a0a;
  --color-primary-container:         #333333;
  --color-on-primary-container:      #f0f0f0;
  
  --color-secondary:                 #5e7a98; /* Plaidworx Steel Blue */
  --color-on-secondary:              #ffffff;
  --color-secondary-container:       #1a1a1a;
  --color-on-secondary-container:    #5e7a98;
  
  --color-surface:                   #0a0a0a;
  --color-on-surface:                #f0f0f0;
  --color-surface-variant:           #1a1a1a;
  --color-on-surface-variant:        #969696;
  
  --color-surface-container-lowest:  #000000;
  --color-surface-container-low:     #0e0e0e;
  --color-surface-container:         #131313;
  --color-surface-container-high:    #1a1a1a;
  --color-surface-container-highest: #353535;
  
  --color-outline:                   #353535;
  --color-outline-variant:           #1a1a1a;

  --color-background:                #0a0a0a;
  --color-on-background:             #f0f0f0;
}

/* ─── GLASS UTILITIES ───────────────────────────────────── */
.glass {
  background: rgba(230, 232, 233, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(94, 122, 152, 0.15);
}

.glass-dark {
  background: rgba(94, 122, 152, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(94, 122, 152, 0.20);
}

.glass-light {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.30);
}
/* FROSTED GLITCH GLASS - specifically for blending with moving backgrounds */
.glass-glitch {
  background: rgba(10, 10, 10, 0.25) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.text-glow {
  text-shadow: 0 0 15px rgba(94, 122, 152, 0.4);
}