/*
  Mai design tokens
  Single source of truth for color, type, and spacing across mai-web-app templates.
  Every partial should consume these variables — never hardcode a hex value in a template.
*/

:root {
  /* ---- Base surfaces ---- */
  --mai-bg: #E7E3DF;          /* page background — warm stone, not tinted pastel */
  --mai-card: #FFFFFF;        /* card / panel background */
  --mai-card-alt: #DCD6D2;    /* photo placeholder / secondary fill */
  --mai-border: #D6D0C9;      /* default hairline border on cards */
  --mai-border-dashed: #C7BFA7; /* dashed borders for empty states, unselected pickers */

  /* ---- Text ---- */
  --mai-ink: #28241F;         /* primary text */
  --mai-ink-muted: #6B675E;   /* secondary text, metadata */
  --mai-ink-faint: #948F82;   /* placeholders, disabled, hint text */

  /* ---- Brand (pulled from the logo — reserved for identity, not decoration) ---- */
  --mai-brand: #7B2350;           /* wine — logo chip, primary buttons, category labels */
  --mai-brand-secondary: #6B3FA0; /* violet — links, secondary accents, hover states */
  --mai-brand-tint: #EDE7EA;      /* pale wine tint for chips/pills on brand-adjacent UI */
  --mai-brand-tint-text: #7A6E80; /* text color to pair with --mai-brand-tint background */

  /* ---- Semantic condition states (independent of brand — meaning must stay legible) ---- */
  --mai-status-good: #4F6B4F;
  --mai-status-good-bg: #E3EBDB;
  --mai-status-fair: #A87A2E;
  --mai-status-fair-bg: #F3E6C8;
  --mai-status-attention: #9C4A38;
  --mai-status-attention-bg: #F1DCD4;

  /* ---- Typography ---- */
  --mai-font-display: 'Fraunces', serif;      /* asset names, room names, page titles ONLY */
  --mai-font-body: 'Inter', sans-serif;       /* everything else: labels, buttons, body copy */
  --mai-font-mono: 'IBM Plex Mono', monospace; /* dates, ages, categories, all hard data */

  /* ---- Radius & spacing ---- */
  --mai-radius-card: 8px;
  --mai-radius-control: 6px;
  --mai-radius-pill: 20px;
  --mai-space-xs: 4px;
  --mai-space-sm: 8px;
  --mai-space-md: 16px;
  --mai-space-lg: 24px;
}

/*
  Usage notes for agents:

  1. --mai-brand is reserved for: the logo mark, primary action buttons (Add asset, Save),
     room/category eyebrow labels, and active nav state. It should not appear on condition
     badges, borders, or as a general "pop of color" — that dilutes it into decoration.

  2. Condition state colors (--mai-status-*) are semantic. Good/fair/attention must stay
     visually distinct from brand color at all times, including in dark mode if added later.

  3. --mai-font-display (Fraunces) is for asset and room names and page titles only.
     Never use it for buttons, form labels, or body text — it should stay rare enough to
     carry weight.

  4. No gradients anywhere in the UI. The logo asset itself is the one gradient moment;
     everything else in the product uses flat, solid tokens above.
*/