/* ==========================================================================
   tokens.css — MSCON v10 design tokens (TeamOffice palette per D62)
   --------------------------------------------------------------------------
   Single source of truth for colour, spacing, type and layout primitives.
   Every component in components.css and every restyled page (Track C) MUST
   consume these variables instead of hardcoding values.

   Brand tokens (--brand-*) are OVERRIDABLE PER TENANT (D61): the header
   partial injects a tenant's brand_primary_color as an inline :root override
   (Track E / Task 263). Everything else is constant across tenants (D62).

   Task 201 (Track A). Forbidden files: none (foundation task, runs first).
   ========================================================================== */

:root {
  /* --- Brand (overridable per tenant via D61) --------------------------- */
  --brand-primary: #7C5CFB;          /* purple — header, active nav, links   */
  --brand-primary-hover: #6B4FE0;    /* hover/active state of primary        */
  --brand-primary-on: #FFFFFF;       /* text/icon colour on a primary bg     */

  /* --- Functional (constant across all tenants per D62) ----------------- */
  --color-success: #22C55E;          /* save buttons, positive state         */
  --color-success-hover: #16A34A;
  --color-warning: #F97316;          /* exit/cancel buttons, caution state   */
  --color-warning-hover: #EA580C;
  --color-info: #0EA5E9;             /* edit buttons, informational state    */
  --color-info-hover: #0284C7;
  --color-danger: #EF4444;           /* delete buttons, destructive state    */
  --color-danger-hover: #DC2626;
  --color-teal: #14B8A6;             /* info accents, secondary stat cards   */
  --color-pink: #EC4899;             /* deactive stat card accent            */

  /* --- Surface ---------------------------------------------------------- */
  --bg-page: #F3F4F6;                /* app background behind cards          */
  --bg-card: #FFFFFF;                /* card / panel surface                 */
  --bg-sidebar: #FFFFFF;             /* left nav surface                     */
  --bg-header: var(--brand-primary); /* top bar — follows brand primary      */

  /* --- Text ------------------------------------------------------------- */
  --text-primary: #111827;           /* headings, body copy                  */
  --text-secondary: #6B7280;         /* muted/secondary copy, captions       */
  --text-on-header: #FFFFFF;         /* text on the brand-coloured header    */

  /* --- Border + shadow -------------------------------------------------- */
  --border-default: #E5E7EB;         /* default hairline borders             */
  --border-strong: #D1D5DB;          /* emphasised borders, input focus ring */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);     /* resting card shadow   */
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);/* modals, dropdowns     */

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm: 4px;                  /* inputs, small chips                  */
  --radius-md: 6px;                  /* buttons, cards                       */
  --radius-lg: 10px;                 /* modals, large panels                 */

  /* --- Spacing scale ---------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* --- Typography ------------------------------------------------------- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-xs: 12px;              /* badges, fine print                   */
  --font-size-sm: 13px;              /* table cells, secondary copy          */
  --font-size-md: 14px;              /* default body                         */
  --font-size-lg: 16px;              /* sub-headings                         */
  --font-size-xl: 20px;              /* page section titles                  */
  --font-size-2xl: 28px;            /* page H1 / stat numbers               */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* --- Layout ----------------------------------------------------------- */
  --header-height: 56px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
}

/* --------------------------------------------------------------------------
   Dark-mode stub (D62 hook). v10 does NOT ship dark mode — values mirror the
   light theme for now so the [data-theme="dark"] selector and any
   token-driven component keep working the day dark mode lands. Override these
   with real dark values in a future batch; do not delete the hook.
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  /* Brand */
  --brand-primary: #7C5CFB;
  --brand-primary-hover: #6B4FE0;
  --brand-primary-on: #FFFFFF;

  /* Functional */
  --color-success: #22C55E;
  --color-success-hover: #16A34A;
  --color-warning: #F97316;
  --color-warning-hover: #EA580C;
  --color-info: #0EA5E9;
  --color-info-hover: #0284C7;
  --color-danger: #EF4444;
  --color-danger-hover: #DC2626;
  --color-teal: #14B8A6;
  --color-pink: #EC4899;

  /* Surface */
  --bg-page: #F3F4F6;
  --bg-card: #FFFFFF;
  --bg-sidebar: #FFFFFF;
  --bg-header: var(--brand-primary);

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-on-header: #FFFFFF;

  /* Border + shadow */
  --border-default: #E5E7EB;
  --border-strong: #D1D5DB;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08);
}