/*
 * JobReady Global Design System - Color Tokens
 * EXACT values from Figma design system PDFs
 * Sources: Color Palette - Scale.pdf, Color Semantics 1&2.pdf, Color Scheme.pdf
 */

:root {
  /* ===========================
     BRAND COLORS (Base 500)
     =========================== */
  --color-blue-500:       #2682f9;
  --color-klein-blue-500: #002fa7;
  --color-orange-500:     #fca624;
  --color-neutral-500:    #40454f;
  --color-cyan-500:       #0dc0ff;
  --color-green-500:      #16a34a;
  --color-yellow-500:     #f5b70b;
  --color-red-500:        #dc2626;

  /* ===========================
     BLUE SCALE (Primary Color)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-blue-50:  #ebf4fe;
  --color-blue-100: #d2e5fe;
  --color-blue-200: #abcefd;
  --color-blue-300: #7eb5fb;
  --color-blue-400: #519bfa;
  --color-blue-500: #2682f9;
  --color-blue-600: #0665df;
  --color-blue-700: #054ca9;
  --color-blue-800: #033472;
  --color-blue-900: #021937;

  /* ===========================
     KLEIN BLUE SCALE (Secondary Color)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-klein-blue-50:  #dbe5ff;
  --color-klein-blue-100: #bdcfff;
  --color-klein-blue-200: #759cff;
  --color-klein-blue-300: #336cff;
  --color-klein-blue-400: #0042eb;
  --color-klein-blue-500: #002fa7;
  --color-klein-blue-600: #002585;
  --color-klein-blue-700: #001d66;
  --color-klein-blue-800: #001342;
  --color-klein-blue-900: #000a24;

  /* ===========================
     ORANGE SCALE (Accent Color)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-orange-50:  #fff7eb;
  --color-orange-100: #feedd2;
  --color-orange-200: #fedca9;
  --color-orange-300: #fdca7c;
  --color-orange-400: #fdb74f;
  --color-orange-500: #fca624;
  --color-orange-600: #e28903;
  --color-orange-700: #ab6802;
  --color-orange-800: #744602;
  --color-orange-900: #372201;

  /* ===========================
     NEUTRAL SCALE
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-neutral-50:  #ebedef;
  --color-neutral-100: #d8dadf;
  --color-neutral-200: #adb2bd;
  --color-neutral-300: #868e9d;
  --color-neutral-400: #606776;
  --color-neutral-500: #40454f;
  --color-neutral-600: #32363e;
  --color-neutral-700: #272a30;
  --color-neutral-800: #191b1f;
  --color-neutral-900: #0e0f11;

  /* ===========================
     CYAN SCALE (Highlight / Tertiary)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-cyan-50:  #e5f8ff;
  --color-cyan-100: #d1f3ff;
  --color-cyan-200: #9ee6ff;
  --color-cyan-300: #70daff;
  --color-cyan-400: #3dcdff;
  --color-cyan-500: #0dc0ff;
  --color-cyan-600: #009ed6;
  --color-cyan-700: #0079a3;
  --color-cyan-800: #004f6b;
  --color-cyan-900: #002938;

  /* ===========================
     GREEN SCALE (Success Color)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-green-50:  #e4fbed;
  --color-green-100: #c5f7d7;
  --color-green-200: #8ff0b3;
  --color-green-300: #54e88b;
  --color-green-400: #19d35e;
  --color-green-500: #16a34a;
  --color-green-600: #12823b;
  --color-green-700: #0d632d;
  --color-green-800: #09431f;
  --color-green-900: #041f0e;

  /* ===========================
     YELLOW SCALE (Warning Color)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-yellow-50:  #fef8e7;
  --color-yellow-100: #fdf1ce;
  --color-yellow-200: #fbe29d;
  --color-yellow-300: #f9d46c;
  --color-yellow-400: #f7c53b;
  --color-yellow-500: #f5b70b;
  --color-yellow-600: #c49208;
  --color-yellow-700: #936e06;
  --color-yellow-800: #624904;
  --color-yellow-900: #312502;

  /* ===========================
     RED SCALE (Danger/Error Color)
     Source: Color Palette - Scale.pdf
     =========================== */
  --color-red-50:  #fbe9e9;
  --color-red-100: #f8d3d3;
  --color-red-200: #f1a7a7;
  --color-red-300: #ea7b7b;
  --color-red-400: #e34f4f;
  --color-red-500: #dc2626;
  --color-red-600: #b01c1c;
  --color-red-700: #841515;
  --color-red-800: #580e0e;
  --color-red-900: #2c0707;

  /* ===========================
     SEMANTIC: CONTENT TOKENS (19)
     Source: Color Semantics 2/2.pdf
     =========================== */
  --content-default-strong:     var(--color-klein-blue-500);  /* Secondary/500 */
  --content-default:            var(--color-neutral-700);     /* Neutral/700 */
  --content-muted:              var(--color-neutral-500);     /* Neutral/500 */
  --content-subtle:             var(--color-neutral-300);     /* Neutral/300 */
  --content-default-inverse:    var(--color-neutral-50);      /* Neutral/50 */
  --content-muted-inverse:      var(--color-neutral-400);     /* Neutral/400 */
  --content-disabled:           var(--color-neutral-200);     /* Neutral/200 */
  --content-brand:              var(--color-blue-500);        /* Primary/500 */
  --content-link:               var(--color-blue-500);        /* Primary/500 */
  --content-link-hover:         var(--color-blue-600);        /* Primary/600 */
  --content-link-pressed:       var(--color-blue-700);        /* Primary/700 */
  --content-brand-secondary:    var(--color-klein-blue-500);  /* Secondary/500 */
  --content-accent:             var(--color-orange-500);      /* Accent/500 */
  --content-info:               var(--color-cyan-500);        /* Tertiary/500 */
  --content-info-strong:        var(--color-cyan-600);        /* Tertiary/600 */
  --content-success:            var(--color-green-500);       /* Success/500 */
  --content-success-strong:     var(--color-green-500);       /* Success/500 */
  --content-warning:            var(--color-yellow-500);      /* Warning/500 */
  --content-warning-strong:     var(--color-yellow-600);      /* Warning/600 */
  --content-error:              var(--color-red-500);         /* Error/500 */
  --content-error-strong:       var(--color-red-600);         /* Error/600 */

  /* ===========================
     SEMANTIC: BACKGROUND TOKENS (17)
     Source: Color Semantics 2/2.pdf
     =========================== */
  /* Neutral Backgrounds */
  --bg-canvas:                  var(--color-neutral-50);      /* Neutral/50 */
  --bg-inverse:                 var(--color-neutral-900);     /* Neutral/900 */
  --bg-surface:                 var(--color-neutral-100);     /* Neutral/100 */
  --bg-raised:                  var(--color-neutral-200);     /* Neutral/200 */
  /* Brand Backgrounds */
  --bg-brand:                   var(--color-blue-500);        /* Primary/500 */
  --bg-brand-subtle:            var(--color-blue-50);         /* Primary/50 */
  --bg-brand-strong:            var(--color-blue-600);        /* Primary/600 */
  --bg-brand-hover:             var(--color-blue-600);        /* Primary/600 */
  --bg-brand-pressed:           var(--color-blue-700);        /* Primary/700 */
  --bg-secondary-brand:         var(--color-klein-blue-500);  /* Secondary/500 */
  --bg-secondary-brand-subtle:  var(--color-klein-blue-50);   /* Secondary/50 */
  --bg-secondary-brand-strong:  var(--color-klein-blue-600);  /* Secondary/600 */
  --bg-accent:                  var(--color-orange-500);      /* Accent/500 */
  --bg-accent-subtle:           var(--color-orange-50);       /* Accent/50 */
  --bg-accent-strong:           var(--color-orange-600);      /* Accent/600 */
  /* Status Backgrounds */
  --bg-info:                    var(--color-cyan-500);        /* Tertiary/500 */
  --bg-info-subtle:             var(--color-cyan-50);         /* Tertiary/50 */
  --bg-info-strong:             var(--color-cyan-600);        /* Tertiary/600 */
  --bg-success:                 var(--color-green-500);       /* Success/500 */
  --bg-success-subtle:          var(--color-green-50);        /* Success/50 */
  --bg-success-strong:          var(--color-green-600);       /* Success/600 */
  --bg-warning:                 var(--color-yellow-500);      /* Warning/500 */
  --bg-warning-subtle:          var(--color-yellow-50);       /* Warning/50 */
  --bg-warning-strong:          var(--color-yellow-600);      /* Warning/600 */
  --bg-error:                   var(--color-red-500);         /* Error/500 */
  --bg-error-subtle:            var(--color-red-50);          /* Error/50 */
  --bg-error-strong:            var(--color-red-600);         /* Error/600 */

  /* ===========================
     SEMANTIC: BORDER TOKENS (11+)
     Source: Color Semantics 2/2.pdf
     =========================== */
  /* Neutral Borders */
  --border-default:             var(--color-neutral-200);     /* Neutral/200 */
  --border-strong:              var(--color-neutral-300);     /* Neutral/300 */
  --border-subtle:              var(--color-neutral-100);     /* Neutral/100 */
  --border-disabled:            var(--color-neutral-100);     /* Neutral/100 */
  /* Brand Borders */
  --border-brand:               var(--color-blue-500);        /* Primary/500 */
  --border-brand-subtle:        var(--color-blue-100);        /* Primary/100 */
  --border-brand-strong:        var(--color-blue-700);        /* Primary/700 */
  --border-brand-focus:         var(--color-blue-500);        /* Primary/500 */
  --border-secondary-brand:     var(--color-klein-blue-500);  /* Secondary/500 */
  --border-sec-brand-subtle:    var(--color-klein-blue-100);  /* Secondary/100 */
  --border-sec-brand-strong:    var(--color-klein-blue-700);  /* Secondary/700 */
  --border-accent:              var(--color-orange-500);      /* Accent/500 */
  --border-accent-subtle:       var(--color-orange-100);      /* Accent/100 */
  --border-accent-strong:       var(--color-orange-700);      /* Accent/700 */
  /* Status Borders */
  --border-info:                var(--color-cyan-500);        /* Tertiary/500 */
  --border-info-subtle:         var(--color-cyan-100);        /* Tertiary/100 */
  --border-info-strong:         var(--color-cyan-700);        /* Tertiary/700 */
  --border-success:             var(--color-green-500);       /* Success/500 */
  --border-success-subtle:      var(--color-green-100);       /* Success/100 */
  --border-success-strong:      var(--color-green-700);       /* Success/700 */
  --border-warning:             var(--color-yellow-500);      /* Warning/500 */
  --border-warning-subtle:      var(--color-yellow-100);      /* Warning/100 */
  --border-warning-strong:      var(--color-yellow-700);      /* Warning/700 */
  --border-error:               var(--color-red-500);         /* Error/500 */
  --border-error-subtle:        var(--color-red-100);         /* Error/100 */
  --border-error-strong:        var(--color-red-700);         /* Error/700 */

  /* ===========================
     SEMANTIC: SURFACE TOKENS (7)
     Source: Color Semantics 2/2.pdf
     =========================== */
  --surface-l0:                 #ffffff;   /* Neutral/white */
  --surface-l1:                 #ffffff;
  --surface-l2:                 #ffffff;
  --surface-l3:                 #ffffff;
  --surface-l4:                 #ffffff;
  --surface-l5:                 #ffffff;
  --surface-l6:                 #ffffff;

  /* ===========================
     SEMANTIC: OVERLAY TOKENS (2)
     Source: Color Semantics 2/2.pdf
     =========================== */
  --overlay-50:                 rgba(0, 0, 0, 0.5);    /* Neutral Black@50% */
  --overlay-inverse-50:         rgba(255, 255, 255, 0.5); /* Neutral White@50% */

  /* ===========================
     SEMANTIC: FEEDBACK (legacy aliases)
     =========================== */
  --color-info:    var(--color-blue-500);
  --color-success: var(--color-green-500);
  --color-warning: var(--color-yellow-500);
  --color-error:   var(--color-red-500);
  --color-info-bg:    var(--color-blue-50);
  --color-success-bg: var(--color-green-50);
  --color-warning-bg: var(--color-yellow-50);
  --color-error-bg:   var(--color-red-50);
}