:root {
  /* -------------------------------------------------------------------------
   * Color palette — ported from the AFood mobile app's Flutter ColorScheme.
   * Green primary, soft Apple-ish surfaces. The semantic names kept for
   * backwards compatibility with existing selectors; new code should prefer
   * the explicit --af-* tokens below.
   * ------------------------------------------------------------------------- */

  /* Brand — green */
  --color-primary:          #28c86b;   /* AFood emerald */
  --color-primary-light:    #4fd683;
  --color-primary-dark:     #02a816;   /* hover / pressed */
  --color-primary-text:     #ffffff;   /* onPrimary */
  --color-primary-soft:     #cafddd;   /* tertiary — backgrounds, pills */
  --color-primary-soft-text:#212a21;   /* onTertiary */

  /* Status — kept as conventional */
  --color-success:  #28c86b;  /* same as primary — positive KPIs */
  --color-warning:  #f59e0b;
  --color-danger:   #ef4444;
  --color-info:     #3b82f6;

  /* Neutrals — Apple-ish cool grey */
  --color-bg:               #f5f5f7;   /* app background */
  --color-surface:          #ffffff;   /* cards, modals, dropdowns */
  --color-surface-bright:   #fbfbfb;   /* pressed / alt surface */
  --color-surface-subtle:   #f9fafb;   /* muted panels */
  --color-sidebar:          #13121e;   /* onSurface inverse for dark sidebar */
  --color-sidebar-hover:    #1f1e2d;
  --color-sidebar-active:   #28c86b;
  --color-text:             #13121e;   /* onSurface */
  --color-text-secondary:   #313036;   /* onSurfaceVariant */
  --color-text-muted:       #8b8a93;
  --color-text-sidebar:     #a1a7b3;
  --color-border:           #e5e6eb;
  --color-border-light:     #f0f1f3;
  --color-border-strong:    #d1d5db;

  /* Primary RGB triples for rgba() focus rings (CSS can't slice a hex). */
  --color-primary-rgb:    40, 200, 107;
  --color-danger-rgb:     239, 68, 68;

  /* -------------------------------------------------------------------------
   * Spacing — unchanged scale, explicit rhythm.
   * ------------------------------------------------------------------------- */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;

  /* -------------------------------------------------------------------------
   * Typography — Nunito from Google Fonts (rounded, friendly, Apple-adjacent).
   * ------------------------------------------------------------------------- */
  --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-family-mono: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   24px;
  --font-size-2xl:  32px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extra:    800;

  /* -------------------------------------------------------------------------
   * Border radius — Apple-ish semi-rounded. Bumped up across the board so
   * cards, buttons and inputs feel softer without looking like pills.
   * ------------------------------------------------------------------------- */
  --radius-xs:    6px;
  --radius-sm:    8px;
  --radius-md:   12px;   /* buttons, inputs */
  --radius-lg:   16px;   /* cards */
  --radius-xl:   20px;   /* modals, sheets */
  --radius-2xl:  24px;   /* feature surfaces */
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
   * Shadows — softer, more diffused. Using cool slate instead of pure black.
   * ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 14px 40px rgba(15, 23, 42, 0.10);
  --shadow-xl: 0 22px 60px rgba(15, 23, 42, 0.14);

  /* -------------------------------------------------------------------------
   * Layout
   * ------------------------------------------------------------------------- */
  --sidebar-width:     240px;
  --sidebar-collapsed:  64px;
  --topbar-height:      56px;
  --mobile-nav-height:  56px;  /* reserved for future bottom tab bar */

  /* -------------------------------------------------------------------------
   * Motion
   * ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}