/* ==========================================================================
   PERKESO MyFutureJobs — Design Tokens
   Single source of styling truth. Values extracted faithfully from the
   original Anima Design System export.
   ========================================================================== */

:root {
  /* ---- Brand: Navy ---- */
  --mfj-navy-50:  #E9EEF7;
  --mfj-navy-600: #1E4488;
  --mfj-navy-700: #16336B;
  --mfj-navy-800: #122B57;
  --mfj-navy-900: #0E2347;

  /* ---- Brand: Blue (primary) ---- */
  --mfj-blue-50:  #EAF1FC;
  --mfj-blue-100: #D6E4FA;
  --mfj-blue-500: #3A78E0;
  --mfj-blue-600: #2563C9;
  --mfj-blue-700: #1E50A8;

  /* ---- Brand: Orange (accent) ---- */
  --mfj-orange-50:  #FEF3E2;
  --mfj-orange-100: #FCE2C2;
  --mfj-orange-500: #F7941E;
  --mfj-orange-600: #E07A12;
  --mfj-orange-700: #C96A0E;

  /* ---- Brand: Teal (secondary / success) ---- */
  --mfj-teal-50:  #E4F5F0;
  --mfj-teal-500: #18A689;
  --mfj-teal-600: #138A6F;
  --mfj-teal-700: #0F7A63;

  /* ---- Slate neutrals ---- */
  --slate-50:  #F5F8FC;
  --slate-100: #E8EDF3;
  --slate-200: #D7DEE7;
  --slate-300: #B6C2D0;
  --slate-400: #8696A8;
  --slate-500: #5B6B80;
  --slate-600: #45566D;
  --slate-700: #2A3A4F;
  --slate-800: #1C2A3E;
  --slate-900: #0F1B2D;
  --white: #FFFFFF;

  /* ---- Feedback base hues ---- */
  --green-500: #18A689;
  --amber-500: #F7941E;
  --red-500:   #D6453D;
  --red-50:    #FBE9E8;
  --info-500:  #2563C9;

  /* ---- Semantic: surfaces ---- */
  --surface-page:       var(--slate-50);
  --surface-card:       var(--white);
  --surface-brand:      var(--mfj-navy-700);
  --surface-brand-soft: var(--mfj-navy-50);
  --surface-accent-soft:var(--mfj-orange-50);
  --surface-info-soft:  var(--mfj-blue-50);

  /* ---- Semantic: borders ---- */
  --border-default: var(--slate-200);
  --border-strong:  var(--slate-300);
  --border-brand:   var(--mfj-blue-600);
  --border-focus:   var(--mfj-blue-500);

  /* ---- Semantic: actions (navy = primary, orange = secondary) ---- */
  --action-primary:        var(--mfj-navy-900);
  --action-primary-hover:  var(--mfj-navy-700);
  --action-primary-press:  var(--mfj-navy-900);
  --action-accent:         var(--mfj-orange-500);
  --action-accent-hover:   var(--mfj-orange-600);
  --action-accent-press:   var(--mfj-orange-700);
  --action-ghost-hover:    var(--slate-100);

  /* ---- Subtle mesh gradients (soft, blended — not flat linear) ---- */
  --grad-primary:
    radial-gradient(90% 130% at 0% 0%, rgba(58,120,224,.22), transparent 60%),
    radial-gradient(90% 130% at 100% 100%, rgba(242,109,33,.18), transparent 60%),
    var(--mfj-navy-900);
  --grad-accent:
    radial-gradient(95% 130% at 0% 0%, rgba(255,255,255,.40), transparent 62%),
    radial-gradient(100% 130% at 100% 100%, rgba(255,184,92,.45), transparent 62%),
    var(--mfj-orange-500);
  --grad-brand:
    radial-gradient(90% 70% at 80% 0%, rgba(58,120,224,.28), transparent 55%),
    linear-gradient(165deg, var(--mfj-navy-700), var(--mfj-navy-900));
  --grad-soft:    linear-gradient(180deg, #ffffff, var(--slate-50));

  /* ---- Semantic: feedback ---- */
  --feedback-success:      var(--green-500);
  --feedback-success-soft: var(--mfj-teal-50);
  --feedback-warning:      var(--amber-500);
  --feedback-warning-soft: var(--mfj-orange-50);
  --feedback-danger:       var(--red-500);
  --feedback-danger-soft:  var(--red-50);
  --feedback-info:         var(--info-500);
  --feedback-info-soft:    var(--mfj-blue-50);

  /* ---- Text ---- */
  --text-strong:  var(--slate-900);
  --text-default: var(--slate-700);
  --text-muted:   var(--slate-500);
  --text-faint:   var(--slate-400);
  --text-on-brand:var(--white);
  --text-link:    var(--mfj-blue-600);

  /* ---- Typography ---- */
  /* Urbanist for headings/display, Inter for body & UI text. */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Urbanist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  --fs-display: 56px;
  --fs-h1: 42px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-lg: 18px;
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-eyebrow: 12px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-0: 0;
  --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;
  --space-20: 80px;
  --space-24: 96px;

  --gutter: 24px;
  --container-max: 1200px;
  --container-narrow: 760px;

  /* ---- Radii (shadcn scale: --radius is the anchor, others derive) ---- */
  --radius: 10px;
  --radius-xs: 4px;
  --radius-sm: calc(var(--radius) - 4px);  /* 6px  */
  --radius-md: calc(var(--radius) - 2px);  /* 8px  */
  --radius-lg: var(--radius);              /* 10px */
  --radius-xl: calc(var(--radius) + 4px);  /* 14px */
  --radius-pill: 999px;

  /* ---- Shadows (subtle, tinted to the navy background hue — no glows) ---- */
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06), 0 1px 3px rgba(15, 27, 45, 0.05);
  --shadow-md: 0 2px 4px rgba(15, 27, 45, 0.05), 0 4px 12px rgba(15, 27, 45, 0.07);
  --shadow-lg: 0 4px 8px rgba(15, 27, 45, 0.05), 0 12px 28px rgba(15, 27, 45, 0.10);
  --shadow-brand: 0 8px 20px rgba(22, 51, 107, 0.16);
  --shadow-accent: 0 8px 18px rgba(247, 148, 30, 0.20);
  /* shadcn-style focus ring: a subtle offset halo against the page */
  --ring-color: var(--mfj-blue-500);
  --ring: 0 0 0 2px var(--white), 0 0 0 4px color-mix(in srgb, var(--ring-color) 55%, transparent);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---- shadcn semantic layer (maps the PERKESO brand onto shadcn's
         background / foreground / card / muted / primary / … contract) ---- */
  --background:            var(--slate-50);
  --foreground:            var(--slate-900);
  --card:                  var(--white);
  --card-foreground:       var(--slate-900);
  --popover:               var(--white);
  --popover-foreground:    var(--slate-900);
  --primary:               var(--mfj-navy-900);
  --primary-foreground:    var(--white);
  --secondary:             var(--slate-100);
  --secondary-foreground:  var(--slate-800);
  --muted:                 var(--slate-100);
  --muted-foreground:      var(--slate-500);
  --accent:                var(--slate-100);   /* subtle hover surface (shadcn `accent`) */
  --accent-foreground:     var(--slate-900);
  --brand-accent:          var(--mfj-orange-500); /* the loud CTA accent */
  --destructive:           var(--red-500);
  --destructive-foreground:var(--white);
  --border:                var(--slate-200);
  --input:                 var(--slate-300);
}