/* ==========================================================================
   VORZEP JOBS - MODERN LUXURY THEME SYSTEM
   --------------------------------------------------------------------------
   Palette: Deep Navy (#14232B), Teal (#0F766E), Gold (#C99A2E)
   Fully responsive, accessible, high-performance design tokens.
   ========================================================================== */

:root {
  /* ==========================================================================
     1. DEEP NAVY PALETTE (Brand Foundation & Typography)
     ========================================================================== */
  --navy-950: #0B1419;         /* Darkest navy for high-contrast elements */
  --navy-900: #14232B;         /* Primary Deep Navy - Headings, text, footer */
  --navy-850: #182B35;         /* Card dark backgrounds / hover states */
  --navy-800: #1E3440;         /* Secondary navy surface */
  --navy-700: #294656;         /* Slate navy */
  --navy-600: #3E5E71;         /* Muted navy text */
  --navy-500: #57778B;         /* Subdued text */
  --navy-100: #E2E8EC;         /* Light navy tint */
  --navy-50:  #F1F5F8;         /* Subtle navy wash */

  /* Semantic Mappings for Navy */
  --ink: var(--navy-900);
  --ink-soft: var(--navy-600);
  --ink-muted: #64748B;
  --surface-dark: var(--navy-900);
  --surface-dark-soft: var(--navy-850);
  --secondary: var(--navy-900);
  --dark: var(--navy-900);

  /* ==========================================================================
     2. TEAL PALETTE (Primary Action, Trust & Growth)
     ========================================================================== */
  --teal-900: #083330;
  --teal-800: #0B4A45;
  --teal-700: #0D5D57;         /* Deep Teal for hover states */
  --teal-600: #0F766E;         /* Primary Teal - Brand Main Color */
  --teal-500: #14B8A6;         /* Vibrant Teal for gradients & highlights */
  --teal-400: #2DD4BF;         /* Bright Teal */
  --teal-300: #5EEAD4;         /* Soft Teal */
  --teal-200: #99F6E4;         /* Light Teal badge background */
  --teal-100: #CCFBF1;         /* Very soft Teal tint */
  --teal-50:  #F0FDFA;         /* Ultra-light Teal wash */

  /* Semantic Mappings for Teal */
  --primary: var(--teal-600);
  --primary-deep: var(--teal-700);
  --primary-tint: var(--teal-100);
  --primary-soft: var(--teal-200);
  --primary-light: var(--teal-400);
  --primary-dark: var(--teal-700);

  /* Legacy aliases */
  --blue: var(--primary);
  --blue-deep: var(--primary-deep);
  --blue-tint: var(--primary-tint);

  /* ==========================================================================
     3. GOLD PALETTE (Luxury Accent, Value & Prestige)
     ========================================================================== */
  --gold-900: #5A430F;
  --gold-800: #7A5B14;
  --gold-700: #8C6718;         /* Deep rich Gold for high-contrast text */
  --gold-600: #A77C1E;         /* Hover state for gold buttons */
  --gold-500: #C99A2E;         /* Primary Gold - CTA, Featured, Highlights */
  --gold-400: #E0B038;         /* Vibrant warm Gold for gradients */
  --gold-300: #F3CA65;         /* Soft bright Gold */
  --gold-200: #FCE59F;         /* Light Gold border */
  --gold-100: #FEF3C7;         /* Soft Gold badge background */
  --gold-50:  #FFFDF5;         /* Ultra-light warm Gold wash */

  /* Semantic Mappings for Gold */
  --accent: var(--gold-500);
  --accent-deep: var(--gold-600);
  --accent-soft: var(--gold-100);
  --accent-dark: var(--gold-700);
  --amber: var(--accent);
  --amber-soft: var(--accent-soft);
  --amber-dark: var(--accent-deep);

  /* ==========================================================================
     4. NEUTRALS & CANVASES
     ========================================================================== */
  --paper: #F8FAFC;            /* Clean light page background */
  --paper-raised: #FFFFFF;     /* Elevated pure white card */
  --paper-subtle: #F1F5F9;     /* Subtle section background */
  --line: #E2E8F0;             /* Standard border / line */
  --line-strong: #CBD5E1;      /* High contrast border */
  --line-gold: rgba(201, 154, 46, 0.25); /* Subtle luxury gold divider */
  --line-teal: rgba(15, 118, 110, 0.2);  /* Subtle teal divider */
  --white: #FFFFFF;
  --light: var(--paper);
  --gray: var(--ink-soft);
  --light-gray: var(--line);
  --border: var(--line);
  --on-dark: #F8FAFC;

  /* ==========================================================================
     5. STATUS & SYSTEM FEEDBACK
     ========================================================================== */
  --green: #059669;            /* Success */
  --green-deep: #047857;
  --green-tint: #D1FAE5;
  --success: var(--green);

  --red: #E11D48;              /* Error / Danger */
  --red-deep: #BE123C;
  --red-tint: #FFE4E6;
  --danger: var(--red);

  --warning: #D97706;          /* Warning */
  --warning-tint: #FEF3C7;

  /* ==========================================================================
     6. LUXURY GRADIENTS
     ========================================================================== */
  --grad-hero: linear-gradient(145deg, #14232B 0%, #1A2E39 45%, #0F766E 100%);
  --grad-hero-light: radial-gradient(circle at 85% 15%, rgba(201, 154, 46, 0.08) 0%, transparent 40%),
                     radial-gradient(circle at 15% 85%, rgba(15, 118, 110, 0.08) 0%, transparent 40%),
                     linear-gradient(165deg, #F8FAFC 0%, #F0FDFA 50%, #FFFDF5 100%);
  --grad-teal: linear-gradient(135deg, #0F766E 0%, #14B8A6 100%);
  --grad-teal-deep: linear-gradient(135deg, #0A4B46 0%, #0F766E 100%);
  --grad-gold: linear-gradient(135deg, #C99A2E 0%, #E0B038 100%);
  --grad-gold-rich: linear-gradient(135deg, #A77C1E 0%, #C99A2E 50%, #E5B842 100%);
  --grad-navy: linear-gradient(135deg, #14232B 0%, #1E3440 100%);
  --grad-accent-line: linear-gradient(90deg, #0F766E 0%, #14B8A6 40%, #C99A2E 75%, #E0B038 100%);

  /* ==========================================================================
     7. TYPOGRAPHY
     ========================================================================== */
  --font-display: "Sora", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ==========================================================================
     8. BORDER RADII
     ========================================================================== */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --radius: var(--radius-sm);

  /* ==========================================================================
     9. ELEVATION & SHADOWS
     ========================================================================== */
  --shadow-sm: 0 2px 5px rgba(20, 35, 43, 0.04), 0 1px 2px rgba(20, 35, 43, 0.03);
  --shadow-md: 0 10px 24px -6px rgba(20, 35, 43, 0.08), 0 4px 8px -3px rgba(20, 35, 43, 0.04);
  --shadow-lg: 0 20px 36px -10px rgba(20, 35, 43, 0.12), 0 8px 16px -6px rgba(20, 35, 43, 0.06);
  --shadow-xl: 0 28px 56px -14px rgba(20, 35, 43, 0.18);
  --shadow-teal: 0 8px 24px -6px rgba(15, 118, 110, 0.35);
  --shadow-gold: 0 8px 24px -6px rgba(201, 154, 46, 0.35);
  --shadow-hover: var(--shadow-md);
  --shadow-light: var(--shadow-sm);
  --shadow: var(--shadow-sm);

  /* ==========================================================================
     10. TRANSITIONS & FOCUS
     ========================================================================== */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: all 0.25s var(--ease);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.25);
  --focus-ring-gold: 0 0 0 3px rgba(201, 154, 46, 0.25);

  /* ==========================================================================
     11. LAYOUT DIMENSIONS
     ========================================================================== */
  --header-height: 72px;
  --site-container-max: 1240px;
}