/* tokens.css — brand design tokens for PIM */
:root{
  /* Brand Colors */
  --primary:#0c91a4; /* teal - brand */
  --navy:#0b2e3a;    /* deep navy */
  --accent:#e94f37;  /* coral - optional pop */
  --yellow:#fbbf24;  /* highlight */

  /* Neutral Colors */
  --text:#1f2937;    /* dark gray */
  --muted:#6b7280;   /* cool gray */
  --bg:#ffffff;
  --light:#f7fafc;   /* off-white */

  /* Spacing & Layout */
  --max:1200px;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.08);

  /* Typography */
  --font-base: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  /* Themeable surfaces & borders (new) */
  --surface-1:#ffffff;       /* cards / menus / white backgrounds */
  --surface-2:#eef6f7;       /* subtle buttons / surfaces */
  --surface-2-hover:#d8eef1; /* hover for subtle buttons */
  --border:#e5e7eb;          /* header & sheet borders */
  --submenu-border:#e5eef2;  /* dropdown border */
  --feature-border:#e7eef0;  /* feature card borders */
  --chip-border:#bfe9ef;     /* events chip border */
  --divider:#eef3f6;         /* subtle separators (mobile menu) */
  --navy-900:#061c24;        /* deep navy for gradients */
}