/*
 * Design tokens for GetRemote.
 * Modern slate-based palette with amber as a brand-highlight accent.
 * Loaded BEFORE styles.css so component CSS can reference these.
 *
 * Conventions:
 *   - --gr-*    site-wide tokens (use these in components)
 *   - --gr-slate-*  raw scale (use sparingly, prefer semantic tokens)
 */

:root {
  /* -- Slate scale (neutral) -- */
  --gr-slate-50:   #f8fafc;
  --gr-slate-100:  #f1f5f9;
  --gr-slate-200:  #e2e8f0;
  --gr-slate-300:  #cbd5e1;
  --gr-slate-400:  #94a3b8;
  --gr-slate-500:  #64748b;
  --gr-slate-600:  #475569;
  --gr-slate-700:  #334155;
  --gr-slate-800:  #1e293b;
  --gr-slate-900:  #0f172a;

  /* -- Semantic neutrals -- */
  --gr-bg:           var(--gr-slate-50);
  --gr-surface:      #ffffff;
  --gr-surface-alt:  var(--gr-slate-100);

  --gr-text:         var(--gr-slate-900);
  --gr-text-strong:  var(--gr-slate-900);
  --gr-text-muted:   var(--gr-slate-600);
  --gr-text-subtle:  var(--gr-slate-500);
  --gr-text-faint:   var(--gr-slate-400);

  --gr-border:        var(--gr-slate-200);
  --gr-border-strong: var(--gr-slate-300);

  /* -- Primary (indigo - interactive, links, active states, default CTA) -- */
  --gr-primary:        #4f46e5;     /* indigo-600 */
  --gr-primary-hover:  #4338ca;     /* indigo-700 */
  --gr-primary-soft:   #eef2ff;     /* indigo-50  - selected filter, active page */
  --gr-primary-on:     #ffffff;

  /* -- Secondary (cyan - featured-job accent, info pills) -- */
  --gr-secondary:        #06b6d4;   /* cyan-500 */
  --gr-secondary-hover:  #0891b2;   /* cyan-600 */
  --gr-secondary-soft:   #ecfeff;   /* cyan-50 */
  --gr-secondary-on:     #ffffff;

  /* -- Brand accent (amber - reserved for premium / offer CTAs) -- */
  --gr-brand:          #f59e0b;     /* amber-500 */
  --gr-brand-hover:    #d97706;     /* amber-600 */
  --gr-brand-soft:     #fef3c7;     /* amber-100 */
  --gr-brand-on:       var(--gr-slate-900);

  /* -- Accent (alias kept for backwards compat; points at primary) -- */
  --gr-accent:         var(--gr-primary);
  --gr-accent-hover:   var(--gr-primary-hover);
  --gr-accent-soft:    var(--gr-primary-soft);

  /* -- Status (soft + strong pairs) -- */
  --gr-success:      #059669;
  --gr-success-soft: #ecfdf5;
  --gr-warning:      #d97706;
  --gr-warning-soft: #fffbeb;
  --gr-danger:       #dc2626;
  --gr-danger-soft:  #fef2f2;
  --gr-info:         #0284c7;
  --gr-info-soft:    #f0f9ff;

  /* -- Job listing priority accents -- */
  --gr-priority-sponsor:   var(--gr-brand);       /* amber  - paid placement */
  --gr-priority-featured:  var(--gr-secondary);   /* cyan   - editorial pick */
  --gr-priority-regular:   var(--gr-slate-200);

  /* -- Focus ring (indigo tint) -- */
  --gr-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.20);

  /* -- Radii (refined: tighter than before) -- */
  --gr-radius-xs:    4px;
  --gr-radius-sm:    6px;
  --gr-radius-md:    8px;
  --gr-radius-lg:    12px;
  --gr-radius-xl:    16px;
  --gr-radius-pill:  999px;

  /* -- Shadows (refined: subtler, with shorter offsets) -- */
  --gr-shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --gr-shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.05);
  --gr-shadow-md:    0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --gr-shadow-lg:    0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);

  /* -- Spacing (4px base) -- */
  --gr-space-0:   0;
  --gr-space-1:   4px;
  --gr-space-2:   8px;
  --gr-space-3:   12px;
  --gr-space-4:   16px;
  --gr-space-5:   20px;
  --gr-space-6:   24px;
  --gr-space-8:   32px;
  --gr-space-10:  40px;
  --gr-space-12:  48px;
  --gr-space-16:  64px;

  /* -- Type scale -- */
  --gr-text-xs:   0.75rem;     /* 12 - captions, footnotes */
  --gr-text-sm:   0.875rem;    /* 14 - metadata, secondary */
  --gr-text-base: 1rem;        /* 16 - body */
  --gr-text-md:   1.0625rem;   /* 17 - body emphasized */
  --gr-text-lg:   1.125rem;    /* 18 - h4 */
  --gr-text-xl:   1.25rem;     /* 20 - h3 */
  --gr-text-2xl:  1.5rem;      /* 24 - h2 / page section */
  --gr-text-3xl:  1.875rem;    /* 30 - h1 small */
  --gr-text-4xl:  2.25rem;     /* 36 - h1 display */

  --gr-leading-tight:   1.2;
  --gr-leading-snug:    1.35;
  --gr-leading-normal:  1.5;
  --gr-leading-relaxed: 1.65;

  --gr-weight-regular:  400;
  --gr-weight-medium:   500;
  --gr-weight-semibold: 600;
  --gr-weight-bold:     700;

  /* -- Fonts -- */
  --gr-font-sans:    'Inter', 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gr-font-display: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;

  /* -- Transitions -- */
  --gr-transition-fast:   120ms ease;
  --gr-transition-base:   180ms ease;
}