/* ============================================================
   ALLABOUTLOCAL BUSINESS MANAGER — DESIGN TOKENS
   Bridges app --color-* / --font-* / --space-* naming to the
   ConnectLocal design system (--cl-* vars in design-tokens.css).
   Requires design-tokens.css to be loaded first.
   ============================================================ */

:root {
  /* --- Core Brand --- */
  --color-primary:        var(--cl-primary);
  --color-primary-hover:  #1a1a55;
  --color-primary-soft:   rgba(34,34,102,0.08);

  --color-secondary:      var(--cl-accent);
  --color-secondary-hover:#e08800;
  --color-secondary-soft: rgba(255,153,51,0.12);

  --color-success:        var(--cl-success);
  --color-success-soft:   rgba(119,221,85,0.15);
  --color-success-text:   #1a7a20;

  --color-warning:        var(--cl-warning);
  --color-warning-soft:   rgba(255,153,51,0.15);
  --color-warning-text:   #8a5000;

  --color-info:           var(--cl-info);
  --color-info-soft:      rgba(34,34,102,0.08);
  --color-info-text:      var(--cl-primary);

  --color-danger:         var(--cl-danger);
  --color-danger-soft:    rgba(238,51,68,0.10);

  /* --- Surfaces --- */
  --color-bg:             #f0f1f5;
  --color-surface:        var(--cl-surface);
  --color-border:         var(--cl-border);
  --color-border-focus:   var(--cl-primary);

  /* --- Text --- */
  --color-text-primary:   var(--cl-heading);
  --color-text-secondary: var(--cl-fg2);
  --color-text-inverse:   var(--cl-white);
  --color-text-link:      var(--cl-link);

  /* --- Sidebar --- */
  --sidebar-bg:           var(--cl-primary);
  --sidebar-text:         rgba(255,255,255,0.65);
  --sidebar-text-active:  #ffffff;
  --sidebar-accent:       var(--cl-accent);
  --sidebar-width:        240px;

  /* --- Typography --- */
  --font-family:          var(--cl-font-sans);
  --font-size-xs:         var(--cl-text-11);
  --font-size-sm:         var(--cl-text-13);
  --font-size-base:       var(--cl-font-size-base);
  --font-size-md:         var(--cl-text-15);
  --font-size-lg:         var(--cl-text-18);
  --font-size-xl:         var(--cl-text-21);
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:    1.3;
  --line-height-base:     var(--cl-line-height);

  /* --- Spacing (base-4 scale) --- */
  --space-1:  var(--cl-space-1);
  --space-2:  var(--cl-space-2);
  --space-3:  var(--cl-space-3);
  --space-4:  var(--cl-space-4);
  --space-5:  var(--cl-space-5);
  --space-6:  var(--cl-space-6);
  --space-8:  var(--cl-space-8);
  --space-10: var(--cl-space-10);

  /* --- Radius --- */
  --radius-sm:   var(--cl-radius-sm);
  --radius-md:   var(--cl-radius-md);
  --radius-lg:   var(--cl-radius-lg);
  --radius-xl:   var(--cl-radius-xl);
  --radius-full: var(--cl-radius-pill);

  /* --- Shadows --- */
  --shadow-sm:  var(--cl-shadow-card);
  --shadow-md:  var(--cl-shadow);
  --shadow-lg:  var(--cl-shadow-lg);

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