/*
 * Design tokens hand-extracted from the Claude Design wireframe
 * ("Interactive handoff site setup" project, SLG Wireframes.dc.html) —
 * Approach A (manual port), not an automated DesignSync token export: that
 * project has no tokens.json/guidelines.md to sync from, only hardcoded
 * inline styles. Values below are the actual colors/sizes counted across
 * the full 1732-line wireframe, not guessed from a handful of screens, so
 * later phases (Dashboard, Properties, Kanban, etc.) should already have
 * everything they need here rather than adding ad-hoc hex values inline.
 */

:root {
  /* Brand */
  --color-navy: #032849;       /* primary dark surface (sidebar, marketing header) + heading text on light bg */
  --color-accent: #C20142;     /* primary CTA, links, active states — Provider's role accent (matches wireframe's role-dependent accentColor) */
  --color-accent-hover: #8f0130;
  --color-accent-landlord: #0a4a76; /* Landlord's role accent — wireframe's accentColor for role==='landlord' */
  --color-teal: #12939a;       /* secondary accent (e.g. Acquisitions actions) */
  --color-cyan: #42CBD1;       /* tertiary accent (e.g. admin-area links) */

  /* Surfaces */
  --color-white: #fff;
  --color-bg: #F7F6F4;         /* app/page background */
  --color-bg-alt: #f7f6f2;     /* card/panel alt background (progression board, activity lists) */
  --color-bg-subtle: #f1efe9;  /* chip / subtle-fill background */

  /* Borders */
  --color-border: #e2dfd6;     /* default card/section border */
  --color-border-input: #d8d5cc; /* form input / control border */
  --color-border-divider: #f1efe9;

  /* Text */
  --color-text: #20201c;         /* darkest body text */
  --color-text-body: #3a3a34;    /* standard body/label text */
  --color-text-secondary: #4a4a44;
  --color-text-muted: #8b877c;   /* secondary/meta text (timestamps, helper text) */
  --color-text-disabled: #a4a196;
  --color-text-inverse: #D2D3D5; /* muted text on the navy sidebar */

  /* Status */
  --color-success: #1f9254;
  --color-success-bg: #e6f7ec;
  --color-warning: #8a6b1f;
  --color-warning-alt: #d98f2b;
  --color-warning-bg: #fdf3e3;
  --color-warning-border: #f0dfb8;
  --color-disabled-bg: #e5e5e0;

  /* Typography */
  --font-family: 'Mulish', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;

  --font-size-2xs: 9px;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 20px;
  --font-size-4xl: 22px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;    /* default control/button radius */
  --radius-lg: 8px;
  --radius-xl: 10px;   /* card radius */
  --radius-2xl: 12px;  /* modal/large surface radius */
  --radius-pill: 14px; /* chips */
  --radius-full: 20px; /* pill buttons (e.g. inbox reply / search) */

  /* Shadow */
  --shadow-card: 0 1px 3px rgba(3, 40, 73, 0.04);
  --shadow-card-hover: 0 1px 3px rgba(3, 40, 73, 0.05);
  --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-dropdown-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -6px 0 16px rgba(0, 0, 0, 0.1);

  /* Overlay */
  --color-overlay: rgba(10, 15, 20, 0.5);
  --color-overlay-light: rgba(0, 0, 0, 0.15);
}