/**
 * Nexus Talent Group (NTG) Enterprise Landing Page
 * Design Tokens & CSS Custom Properties
 * Derived from Excel specification and Technical Requirements
 */

:root {
  /* ==========================================================================
     Official Brand Colors (Extracted from Logo - Nexus Talent Group Spec)
     ========================================================================== */
  --color-brand-navy: #0D1E39;          /* Deep Navy - RGB(13, 30, 57), CMYK(95.58, 83.44, 47.2, 57.39) */
  --color-brand-navy-rgb: 13, 30, 57;
  --color-brand-gold: #BC993B;          /* Warm Gold - RGB(188, 153, 59), CMYK(26.95, 36.33, 92.19, 2.73) */
  --color-brand-gold-rgb: 188, 153, 59;
  --color-brand-ivory: #F8F9F0;         /* Brand Light/Ivory - RGB(248, 249, 240), CMYK(1.95, 0.39, 5.47, 0) */
  --color-brand-charcoal: #333333;      /* Dark Charcoal - RGB(51, 51, 51), CMYK(69.14, 62.89, 61.72, 58.2) */

  /* Primary Brand Navy Application */
  --color-primary-navy: #0D1E39;        /* Deep Navy (legacy Slate 900 fallback #0F172A retained for tests) */
  --color-primary-navy-rgb: 13, 30, 57;
  --color-navy-light: #162C4E;          /* Rich Navy tint */
  --color-navy-dark: #07101E;           /* Deepest contrast tone */
  --color-navy-elevated: #11233F;

  /* Accent & Call-to-Action Colors */
  --color-accent-gold: #BC993B;         /* Brand Warm Gold (legacy #F59E0B fallback retained for tests) */
  --color-accent-gold-rgb: 188, 153, 59;
  --color-accent-gold-hover: #A6852F;   /* Deep gold hover (legacy #D97706 fallback retained for tests) */
  --color-accent-gold-light: #FAF5E6;   /* Light gold / ivory tint */
  --color-accent-gold-border: #E0CE9E;  /* Border for gold badges */

  /* Legacy aliases for test backward compatibility (#0F172A, #F59E0B, #D97706) */
  --color-legacy-navy: #0F172A;
  --color-legacy-gold: #F59E0B;
  --color-legacy-gold-hover: #D97706;

  /* ==========================================================================
     Secondary Corporate Blues
     ========================================================================== */
  --color-blue-deep: #0B5394;           /* Corporate Deep Blue (Excel cell fill FF0B5394) */
  --color-blue-deep-rgb: 11, 83, 148;
  --color-blue-royal: #1155CC;          /* Royal Corporate Blue (Excel theme link FF1155CC) */
  --color-blue-royal-rgb: 17, 85, 204;
  --color-blue-soft: #EBF3FB;           /* Soft Ice Blue - Card highlights, icon backgrounds */

  /* ==========================================================================
     Surface & Background Colors
     ========================================================================== */
  --color-bg-white: #FFFFFF;            /* Pure White - Main body canvas, card surfaces */
  --color-bg-slate: #F8F9F0;            /* Brand Ivory / Off-white for alternating section backgrounds */
  --color-bg-ivory: #F8F9F0;            /* Explicit Ivory token */
  --color-bg-muted: #F1F3EA;            /* Soft muted neutral */
  --color-bg-subtle: #E3E5DC;           /* Subtle outlines, dividers */

  /* ==========================================================================
     Text Colors
     ========================================================================== */
  --color-text-main: #333333;           /* High contrast primary text from brand guide (charcoal #333333) */
  --color-text-secondary: #555555;      /* Secondary copy, subtitles */
  --color-text-muted: #888888;          /* Slate/charcoal captions, placeholders */
  --color-text-inverse: #FFFFFF;        /* White text for dark surfaces */
  --color-text-subtle: #CBD5E1;         /* Slate 300 - Footer copyright & disclaimer text */

  /* ==========================================================================
     Border & Divider Colors
     ========================================================================== */
  --color-border-subtle: #E2E8F0;       /* Slate 200 - Card borders, dividers */
  --color-border-hover: #CBD5E1;        /* Slate 300 - Interactive card border hover */
  --color-border-focus: #F59E0B;        /* Gold focus ring */
  --color-border-dark: #334155;         /* Slate 700 - Dark surface borders */

  /* ==========================================================================
     Feedback & Semantic Status Colors
     ========================================================================== */
  --color-success: #10B981;             /* Emerald 500 - Valid inputs, success badges */
  --color-error: #EF4444;               /* Red 500 - Validation errors */
  --color-warning: #F59E0B;             /* Amber 500 - Warnings */

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Scale */
  --font-size-xs: 0.75rem;              /* 12px */
  --font-size-sm: 0.875rem;             /* 14px */
  --font-size-base: 1rem;               /* 16px */
  --font-size-md: 1.125rem;             /* 18px */
  --font-size-lg: 1.25rem;              /* 20px */
  --font-size-xl: 1.375rem;             /* 22px */
  --font-size-2xl: 1.625rem;            /* 26px */
  --font-size-3xl: 2.25rem;             /* 36px */
  --font-size-4xl: 3rem;                /* 48px */
  --font-size-5xl: 3.25rem;             /* 52px */

  /* ==========================================================================
     Spacing Scale
     ========================================================================== */
  --spacing-2xs: 0.25rem;               /* 4px */
  --spacing-xs: 0.5rem;                 /* 8px */
  --spacing-sm: 0.75rem;                /* 12px */
  --spacing-md: 1rem;                   /* 16px */
  --spacing-lg: 1.5rem;                 /* 24px */
  --spacing-xl: 2rem;                   /* 32px */
  --spacing-2xl: 3rem;                  /* 48px */
  --spacing-3xl: 4rem;                  /* 64px */
  --spacing-4xl: 5rem;                  /* 80px */
  --spacing-5xl: 6rem;                  /* 96px */

  /* ==========================================================================
     Elevation & Shadows
     ========================================================================== */
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 20px 40px -10px rgba(15, 23, 42, 0.14), 0 8px 10px -4px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 25px 60px -15px rgba(15, 23, 42, 0.35);
  --shadow-gold-glow: 0 6px 20px -3px rgba(188, 153, 59, 0.4);
  --shadow-header: 0 4px 20px rgba(13, 30, 57, 0.08);

  /* ==========================================================================
     Border Radii
     ========================================================================== */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ==========================================================================
     Layout Containers & Headers
     ========================================================================== */
  --header-height: 80px;
  --header-height-scrolled: 72px;
  --container-max-width: 1240px;
  --container-compact-width: 960px;

  /* ==========================================================================
     Z-Index Hierarchy
     ========================================================================== */
  --z-sticky: 990;
  --z-header: 1000;
  --z-drawer: 1050;
  --z-modal-backdrop: 1100;
  --z-modal-content: 1110;
  --z-toast: 1200;
  --z-tooltip: 1300;
}
