/* =====================================================================
   SAI RAM CRM — Design Tokens
   Light SaaS system. Every colour, radius and shadow in the app comes
   from this file. Nothing else defines a raw hex value.
   ===================================================================== */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --bg:              #F8FAFC;
  --surface:         #FFFFFF;
  --surface-alt:     #F1F5F9;
  --surface-hover:   #F8FAFC;
  --sidebar-bg:      #FFFFFF;
  --topbar-bg:       #FFFFFF;

  /* ── Borders ──────────────────────────────────────────────────── */
  --border:          #E2E8F0;
  --border-strong:   #CBD5E1;
  --border-light:    #F1F5F9;

  /* ── Text ─────────────────────────────────────────────────────── */
  --text:            #0F172A;
  --text-secondary:  #475569;
  --text-muted:      #64748B;
  --text-faint:      #94A3B8;
  --text-invert:     #FFFFFF;

  /* ── Brand ────────────────────────────────────────────────────── */
  --primary:         #2563EB;
  --primary-hover:   #1D4ED8;
  --primary-active:  #1E40AF;
  --primary-soft:    #EFF6FF;
  --primary-border:  #BFDBFE;

  /* ── Semantic ─────────────────────────────────────────────────── */
  --success:         #10B981;
  --success-soft:    #ECFDF5;
  --success-border:  #A7F3D0;

  --warning:         #F59E0B;
  --warning-soft:    #FFFBEB;
  --warning-border:  #FDE68A;

  --info:            #3B82F6;
  --info-soft:       #EFF6FF;
  --info-border:     #BFDBFE;

  --danger:          #EF4444;
  --danger-soft:     #FEF2F2;
  --danger-border:   #FECACA;

  --muted:           #94A3B8;
  --muted-soft:      #F1F5F9;
  --muted-border:    #E2E8F0;

  /* ── Plot status (locked by spec — used by map + legend + badges) */
  --plot-available:  #10B981;
  --plot-hold:       #F59E0B;
  --plot-booked:     #3B82F6;
  --plot-sold:       #EF4444;
  --plot-blocked:    #94A3B8;

  /* ── Radius ───────────────────────────────────────────────────── */
  --radius-sm:       6px;
  --radius:          10px;
  --radius-lg:       14px;
  --radius-pill:     999px;

  /* ── Shadow ───────────────────────────────────────────────────── */
  --shadow-xs:       0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm:       0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md:       0 4px 12px rgba(15, 23, 42, .08);
  --shadow-lg:       0 12px 28px rgba(15, 23, 42, .12);
  --shadow-focus:    0 0 0 3px rgba(37, 99, 235, .15);

  /* ── Typography ───────────────────────────────────────────────── */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

  --fs-xs:   0.6875rem;   /* 11px — table meta, captions          */
  --fs-sm:   0.75rem;     /* 12px — labels, badges                */
  --fs-base: 0.8125rem;   /* 13px — body, tables, forms           */
  --fs-md:   0.875rem;    /* 14px — emphasised body               */
  --fs-lg:   1rem;        /* 16px — card titles                   */
  --fs-xl:   1.25rem;     /* 20px — page titles                   */
  --fs-2xl:  1.5rem;      /* 24px — stat values                   */
  --fs-3xl:  1.875rem;    /* 30px — hero numbers                  */

  /* ── Layout ───────────────────────────────────────────────────── */
  --sidebar-w:           244px;
  --sidebar-collapsed-w: 68px;
  --topbar-h:            60px;
  --content-pad:         24px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --transition: 160ms cubic-bezier(.4, 0, .2, 1);
  --z-sidebar:  1030;
  --z-topbar:   1020;
  --z-overlay:  1029;
  --z-toast:    1080;
}

/* Respect the user's motion preference. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}