/* ============================================================
   GLAZAIR DESIGN SYSTEM — Colors & Typography
   Source: Glazair Design System.fig + brand assets
   ============================================================ */

/* ── Google Fonts import (Inter) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */
:root {
  /* Primary (Blue) */
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;  /* Button default */
  --color-primary-600: #2563EB;
  --color-primary-700: #1E40AF;  /* color_primary_700 */
  --color-primary-800: #1E3A8A;
  --color-primary-900: #1D4ED8;  /* Hover state */

  /* Neutral (Gray) */
  --color-neutral-50:  #F9FAFB;  /* Page background */
  --color-neutral-100: #F3F4F6;  /* color_neutral_100 / stroke */
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;  /* color_neutral_500 / input border */
  --color-neutral-600: #4B5563;  /* color_neutral_600 / placeholder text */
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;  /* color_neutral_900 / body text */

  /* Semantic */
  --color-success-500: #10B981;  /* color_success_500 */
  --color-warning-500: #F59E0B;  /* color_warning_500 */
  --color-error-500:   #EF4444;
  --color-info-500:    #3B82F6;

  /* Accent */
  --color-accent-purple: #8A38F5;  /* Used as dashed border / accent */

  /* Surface */
  --color-surface-bg:      #F9FAFB;
  --color-surface-white:   #FFFFFF;
  --color-surface-overlay: rgba(217, 217, 217, 0.4);

  /* Shadow base */
  --color-shadow: rgba(217, 217, 217, 0.8);
}

/* ============================================================
   SEMANTIC COLOR ALIASES
   ============================================================ */
:root {
  --fg-primary:    var(--color-neutral-900);
  --fg-secondary:  var(--color-neutral-600);
  --fg-tertiary:   var(--color-neutral-500);
  --fg-inverse:    #FFFFFF;
  --fg-link:       var(--color-primary-500);
  --fg-link-hover: var(--color-primary-900);

  --bg-page:       var(--color-neutral-50);
  --bg-surface:    var(--color-surface-white);
  --bg-muted:      var(--color-neutral-100);

  --border-default: var(--color-neutral-500);
  --border-subtle:  var(--color-neutral-100);
  --border-focus:   var(--color-neutral-500);

  --btn-primary-bg:       var(--color-primary-500);
  --btn-primary-hover:    var(--color-primary-900);
  --btn-primary-text:     #FFFFFF;

  --status-success: var(--color-success-500);
  --status-warning: var(--color-warning-500);
  --status-error:   var(--color-error-500);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;

  /* Scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;

  /* Weights */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;

  /* Line heights */
  --leading-tight:  1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;

  /* Letter spacing */
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */

/* Headings */
.h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
  letter-spacing: var(--tracking-normal);
}

.h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

/* Body */
.body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

/* Labels */
.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--fg-primary);
}

.label-sm {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--fg-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Caption */
.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

/* Link */
.link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--fg-link);
  text-decoration: none;
}
.link:hover { color: var(--fg-link-hover); text-decoration: underline; }

/* ============================================================
   SPACING & RADIUS TOKENS
   ============================================================ */
:root {
  --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;

  --radius-sm:  4px;
  --radius-md:  8px;   /* Default: buttons, inputs */
  --radius-lg:  12px;  /* Cards, swatches */
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(217,217,217,0.5);
  --shadow-md:  0 4px 24px rgba(217,217,217,0.8);  /* Drop shadow 100 */
  --shadow-lg:  0 8px 32px rgba(107,114,128,0.2);

  /* Blur */
  --blur-md: 24px;  /* backdrop-filter blur */
}