/**
 * CSS custom properties — design tokens for the SPOT Curator's Assistant.
 * All colours, spacing, and type scale are defined here.
 */

:root {
  /* ── Brand colours ───────────────────────────────────── */
  --colour-primary:        #BE2532;  /* EHU red */
  --colour-primary-dark:   #9C1A27;  /* Darker red — hover states */
  --colour-primary-light:  #D94050;  /* Lighter red — links */
  --colour-accent:         #c8963e;  /* Warm amber — accent use */
  --colour-accent-dark:    #a37430;

  /* ── Semantic status ─────────────────────────────────── */
  --colour-approve:        #22A06B;  /* Green — approve actions */
  --colour-approve-bg:     #E3F8F0;
  --colour-approve-border: #86e8c1;
  --colour-reject:         #BE2532;  /* Matches brand red — reject/destructive */
  --colour-reject-bg:      #fff0f1;
  --colour-reject-border:  #f5b8bc;
  --colour-flag:           #b7791f;
  --colour-flag-bg:        #fffbeb;
  --colour-flag-border:    #f6e05e;
  --colour-pending:        #4a5568;
  --colour-pending-bg:     #f7fafc;

  /* ── Neutrals ────────────────────────────────────────── */
  --colour-white:          #ffffff;
  --colour-grey-50:        #f9fafb;
  --colour-grey-100:       #f3f4f6;
  --colour-grey-200:       #e5e7eb;
  --colour-grey-300:       #d1d5db;
  --colour-grey-400:       #9ca3af;
  --colour-grey-500:       #6b7280;
  --colour-grey-600:       #4b5563;
  --colour-grey-700:       #374151;
  --colour-grey-800:       #1f2937;
  --colour-grey-900:       #111827;

  /* ── Typography ──────────────────────────────────────── */
  --font-family-base:  system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-size-xs:      0.75rem;
  --font-size-sm:      0.875rem;
  --font-size-base:    1rem;
  --font-size-lg:      1.125rem;
  --font-size-xl:      1.25rem;
  --font-size-2xl:     1.5rem;
  --font-size-3xl:     1.875rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold:  700;
  --line-height-tight: 1.25;
  --line-height-base:  1.5;

  /* ── Spacing ─────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── Borders and radii ───────────────────────────────── */
  --border-width:    1px;
  --border-colour:   var(--colour-grey-200);
  --radius-sm:       0.25rem;
  --radius-base:     0.375rem;
  --radius-md:       0.5rem;
  --radius-lg:       0.75rem;
  --radius-full:     9999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* ── Layout ──────────────────────────────────────────── */
  --sidebar-width:     320px;
  --header-height:     48px;
  --content-max-width: 1200px;
  --upload-max-width:  800px;
}