/* ================================================================
   FreelanceCalc — Design Tokens v1.0  (July 2026)
   Load BEFORE styles.css. Use semantic tokens (--fc-*) in
   components. Primitive palette is reference-only.
   ================================================================ */

:root {

  /* ─── Primitive palette (reference only) ─────────────────────── */

  /* Indigo */
  --indigo-50:  #EEF2FF;  --indigo-100: #E0E7FF;  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;  --indigo-400: #818CF8;  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;  --indigo-700: #4338CA;  --indigo-800: #3730A3;
  --indigo-900: #312E81;  --indigo-950: #1E1B4B;

  /* Emerald */
  --emerald-50:  #ECFDF5;  --emerald-100: #D1FAE5;  --emerald-200: #A7F3D0;
  --emerald-500: #10B981;  --emerald-600: #059669;  --emerald-700: #047857;

  /* Slate */
  --slate-50:  #F8FAFC;  --slate-100: #F1F5F9;  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;  --slate-400: #94A3B8;  --slate-500: #64748B;
  --slate-600: #475569;  --slate-700: #334155;  --slate-800: #1E293B;
  --slate-900: #0F172A;  --slate-950: #020617;

  /* State primitives */
  --red-50:    #FEF2F2;  --red-200:    #FECACA;  --red-500:    #EF4444;  --red-600:    #DC2626;
  --amber-50:  #FFFBEB;  --amber-200:  #FDE68A;  --amber-500:  #F59E0B;  --amber-600:  #D97706;
  --sky-50:    #F0F9FF;  --sky-200:    #BAE6FD;  --sky-500:    #0EA5E9;  --sky-600:    #0284C7;

  /* ─── Semantic color tokens ──────────────────────────────────── */

  /* Brand */
  --fc-brand:         #4338CA;
  --fc-brand-hover:   #3730A3;
  --fc-brand-mid:     #4F46E5;
  --fc-brand-surface: #EEF2FF;
  --fc-brand-border:  #C7D2FE;

  /* Accent */
  --fc-accent:         #059669;
  --fc-accent-hover:   #047857;
  --fc-accent-surface: #ECFDF5;
  --fc-accent-border:  #A7F3D0;

  /* Surfaces */
  --fc-bg:      #F8FAFC;
  --fc-surface: #FFFFFF;
  --fc-subtle:  #F1F5F9;
  --fc-muted:   #E2E8F0;

  /* Borders */
  --fc-border:        #E2E8F0;
  --fc-border-strong: #CBD5E1;

  /* Text */
  --fc-text:   #0F172A;
  --fc-text-2: #334155;
  --fc-text-3: #64748B;
  --fc-text-4: #94A3B8;

  /* State */
  --fc-danger:           #DC2626;
  --fc-danger-surface:   #FEF2F2;
  --fc-danger-border:    #FECACA;
  --fc-warning:          #D97706;
  --fc-warning-surface:  #FFFBEB;
  --fc-warning-border:   #FDE68A;
  --fc-success:          #059669;
  --fc-success-surface:  #ECFDF5;
  --fc-success-border:   #A7F3D0;
  --fc-info:             #0284C7;
  --fc-info-surface:     #F0F9FF;
  --fc-info-border:      #BAE6FD;

  /* ─── Spacing ─────────────────────────────────────────────────── */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3:  12px; --sp-4:  16px;
  --sp-5:  20px; --sp-6:  24px; --sp-7:  28px; --sp-8:  32px;
  --sp-9:  36px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px;
  --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ─── Type scale ──────────────────────────────────────────────── */
  --t-xs:   0.75rem;   /* 12px */
  --t-sm:   0.875rem;  /* 14px */
  --t-base: 1rem;      /* 16px */
  --t-lg:   1.125rem;  /* 18px */
  --t-xl:   1.25rem;   /* 20px */
  --t-2xl:  1.5rem;    /* 24px */
  --t-3xl:  1.875rem;  /* 30px */
  --t-4xl:  2.25rem;   /* 36px */
  --t-5xl:  3rem;      /* 48px */

  --fw-normal: 400;  --fw-medium: 500;  --fw-semi: 600;  --fw-bold: 700;

  --lh-tight:   1.15;  --lh-snug:   1.3;  --lh-normal: 1.5;  --lh-loose:  1.65;
  --ls-tight:  -.02em; --ls-snug: -.015em; --ls-wide:  .025em;

  /* ─── Radius ──────────────────────────────────────────────────── */
  --rr-sm:   4px;
  --rr-md:   8px;
  --rr-lg:   12px;
  --rr-xl:   16px;
  --rr-2xl:  24px;
  --rr-full: 9999px;

  /* ─── Elevation / shadows ─────────────────────────────────────── */
  --sh-xs:    0 1px 2px rgba(0,0,0,.05);
  --sh-sm:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh-md:    0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.04);
  --sh-lg:    0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.03);
  --sh-xl:    0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.03);
  --sh-brand: 0 6px 24px rgba(67,56,202,.28);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --dur-fast:   100ms;
  --dur-normal: 150ms;
  --dur-slow:   250ms;
  --ease-out:   cubic-bezier(0, 0, .2, 1);

  /* ─── Layout ──────────────────────────────────────────────────── */
  --max-w:  1120px;
  --nav-h:  64px;
  --z-nav:  100;
}