/*
 * css/tokens.css
 * Design tokens — single source of truth for the entire UI.
 * All values are CSS custom properties on :root.
 */

:root {
  /* ── Colour palette ─────────────────────────────────────── */
  --clr-brand-50:   #edfaf4;
  --clr-brand-100:  #d2f4e5;
  --clr-brand-200:  #a7e9cc;
  --clr-brand-400:  #3ec98a;
  --clr-brand-500:  #17b26a;   /* primary */
  --clr-brand-600:  #0e9458;
  --clr-brand-700:  #0a7444;
  --clr-brand-800:  #075c36;
  --clr-brand-900:  #053d24;

  --clr-neutral-0:   #ffffff;
  --clr-neutral-50:  #f9fafb;
  --clr-neutral-100: #f3f4f6;
  --clr-neutral-200: #e5e7eb;
  --clr-neutral-300: #d1d5db;
  --clr-neutral-400: #9ca3af;
  --clr-neutral-500: #6b7280;
  --clr-neutral-600: #4b5563;
  --clr-neutral-700: #374151;
  --clr-neutral-800: #1f2937;
  --clr-neutral-900: #111827;

  --clr-error-50:  #fef2f2;
  --clr-error-200: #fecaca;
  --clr-error-500: #ef4444;
  --clr-error-700: #b91c1c;

  --clr-warn-50:   #fffbeb;
  --clr-warn-300:  #fcd34d;
  --clr-warn-500:  #f59e0b;
  --clr-warn-700:  #b45309;

  --clr-success-50:  #f0fdf4;
  --clr-success-500: #22c55e;
  --clr-success-700: #15803d;

  /* ── Semantic aliases ────────────────────────────────────── */
  --color-bg:          var(--clr-neutral-50);
  --color-surface:     var(--clr-neutral-0);
  --color-border:      var(--clr-neutral-200);
  --color-border-focus:var(--clr-brand-500);

  --color-text-primary:   var(--clr-neutral-900);
  --color-text-secondary: var(--clr-neutral-500);
  --color-text-disabled:  var(--clr-neutral-400);
  --color-text-inverse:   var(--clr-neutral-0);
  --color-text-brand:     var(--clr-brand-700);

  --color-btn-primary-bg:      var(--clr-brand-500);
  --color-btn-primary-bg-hover:var(--clr-brand-600);
  --color-btn-primary-text:    var(--clr-neutral-0);

  --color-btn-ghost-bg:        transparent;
  --color-btn-ghost-bg-hover:  var(--clr-neutral-100);
  --color-btn-ghost-text:      var(--clr-neutral-700);

  --color-error-bg:    var(--clr-error-50);
  --color-error-border:var(--clr-error-200);
  --color-error-text:  var(--clr-error-700);

  --color-success-bg:    var(--clr-success-50);
  --color-success-border:var(--clr-success-500);
  --color-success-text:  var(--clr-success-700);

  --color-info-bg:    var(--clr-brand-50);
  --color-info-border:var(--clr-brand-200);
  --color-info-text:  var(--clr-brand-700);

  /* ── Spacing scale (4px base) ────────────────────────────── */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */

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

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:  0.375rem;  /*  6px */
  --radius-md:  0.75rem;   /* 12px */
  --radius-lg:  1rem;      /* 16px */
  --radius-xl:  1.25rem;   /* 20px */
  --radius-full:9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);

  /* Brand tinted shadow for CTA buttons */
  --shadow-brand: 0 4px 14px 0 rgb(23 178 106 / 0.35);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   120ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;

  /* ── Z-index layers ──────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-loader:  400;
}