/* ==========================================================================
   Hearth Design Tokens — "Earthy Garden, refined" (colour guide Direction A)
   Organising rule: solid colour is for actions, tinted colour is for data.
   All pairings verified against WCAG 2.1 AA in the colour guide.

   Colours flow C# -> CSS: HearthTheme.cs holds the palette literals (MudColor
   rejects var()), and the tokens below alias --mud-palette-* where the two
   names mean the same thing. Everything else flows CSS -> C#.
   ========================================================================== */

:root {
  /* Primary — Pine. The one interactive colour: buttons, active nav, today marker */
  --hearth-primary: var(--mud-palette-primary);
  --hearth-primary-container: var(--mud-palette-primary-darken);
  --hearth-on-primary: var(--mud-palette-primary-text);

  /* Secondary — Rust. Brand accent & afternoon family */
  --hearth-secondary: var(--mud-palette-secondary);

  /* Tertiary — Night Navy. Evening family, away-chip accents */
  --hearth-tertiary-container: #3A3243;
  --hearth-tertiary-fixed: #E6E4F0;

  /* Error — Crimson, clearly redder than rust. Alerts and destructive actions only */
  --hearth-error: var(--mud-palette-error);
  --hearth-error-container: #F8E2E1;
  --hearth-on-error-container: #9E2B33;

  /* Surface / Background — paper & card */
  --hearth-surface: var(--mud-palette-surface);
  --hearth-surface-bright: #FDFDFC;
  --hearth-surface-container-lowest: #FDFDFC;
  --hearth-surface-container-low: #EFEFE9;
  --hearth-surface-container: #E9EBE3;
  --hearth-surface-container-high: #E1E3DC;
  --hearth-surface-container-highest: #D8DCD2;
  --hearth-surface-tint: var(--mud-palette-primary);

  /* On-Surface — ink & muted, both green-warmed */
  --hearth-on-surface: var(--mud-palette-text-primary);
  --hearth-on-surface-variant: var(--mud-palette-text-secondary);

  /* NOTE: also set in HearthTheme.cs as TextDisabled / ActionDisabled. Not aliased to
     --mud-palette-action-disabled: an outline is not a disabled state. */
  --hearth-outline: #A1B2A7;
  --hearth-outline-variant: #B0BEB5;
  --hearth-border-light: #E1E3DC;

  /* Shift coding — surface (bg) · text (fg). The bare token is the identifier colour, used where
     the hue has to read on its own (stat dots, mobile shift icons).
     A worked shift is a solid block of its hue with white text; absence states stay tinted with
     dark text. Swapping a -bg between the hue and a tint is what flips a shift type between the
     two treatments — no rule in app.css has to change. */
  --hearth-shift-morning: rgb(39 122 72);
  --hearth-shift-morning-bg: var(--hearth-shift-morning);
  --hearth-shift-morning-fg: #FFFFFF;
  --hearth-shift-afternoon: var(--mud-palette-secondary);
  --hearth-shift-afternoon-bg: var(--hearth-shift-afternoon);
  --hearth-shift-afternoon-fg: #FFFFFF;
  --hearth-shift-evening: var(--mud-palette-tertiary);
  --hearth-shift-evening-bg: var(--hearth-shift-evening);
  --hearth-shift-evening-fg: #FFFFFF;
  /* Absences have no bare identifier token: since they lost their coloured borders they exist
     only as tint + text, one salience notch below worked shifts. */
  --hearth-shift-leave-bg: #F5E9E2;
  --hearth-shift-leave-fg: #84503C;
  --hearth-shift-sick-bg: #F7E8CE;
  --hearth-shift-sick-fg: #7A4A08;
  --hearth-shift-off-text: var(--hearth-on-surface-variant);
  --hearth-shift-off-border: var(--hearth-outline);

  /* Channel triples — the only way to give a token an opacity.
     MudBlazor already publishes --mud-palette-{primary,secondary,tertiary,success,error,
     text-primary,text-secondary,surface,divider}-rgb; these cover the tokens it has no slot for. */
  --hearth-outline-rgb: 161, 178, 167;          /* #A1B2A7 */
  --hearth-outline-variant-rgb: 176, 190, 181;  /* #B0BEB5 */
  --hearth-shadow-ink-rgb: 29, 28, 24;          /* #1D1C18 — the ink inside every --hearth-shadow-* */

  /* Shadows — Tailwind-equivalent values with hearth-tinted color */
  --hearth-shadow-sm: 0 1px 2px 0 rgba(29, 28, 24, 0.05);
  --hearth-shadow-ambient: 0 1px 3px 0 rgba(29, 28, 24, 0.10), 0 1px 2px -1px rgba(29, 28, 24, 0.10);
  --hearth-shadow-elevated: 0 4px 6px -1px rgba(29, 28, 24, 0.10), 0 2px 4px -2px rgba(29, 28, 24, 0.10);
  --hearth-shadow-float: 0 10px 15px -3px rgba(29, 28, 24, 0.10), 0 4px 6px -4px rgba(29, 28, 24, 0.10);

  /* Typography */
  --hearth-font-family: 'Atkinson Hyperlegible Next', sans-serif;

  /* Spacing — the scale the CSS was already using, now with names */
  --hearth-space-3xs: 2px;
  --hearth-space-2xs: 4px;
  --hearth-space-xs: 6px;
  --hearth-space-sm: 8px;
  --hearth-space-md: 12px;
  --hearth-space-lg: 16px;
  --hearth-space-xl: 24px;

  /* Border widths — accent is the shift-chip edge */
  --hearth-border-thin: 1px;
  --hearth-border-thick: 2px;
  --hearth-border-accent: 4px;

  /* Border Radius */
  --hearth-radius-sm: 4px;
  --hearth-radius-md: 8px;
  --hearth-radius-lg: 12px;
  --hearth-radius-xl: 16px;
  --hearth-radius-2xl: 24px;

  /* Transitions */
  --hearth-transition: 100ms ease-in-out;

  /* Layout — read from C# by HearthTheme.LayoutProperties */
  --hearth-appbar-height: 64px;
}