/* ==========================================================================
   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);

  /* Tutorial banner — a warm invitation tint, kept separate from the green surface scale. */
  --hearth-tutorial-surface: #FFF1D2;
  --hearth-tutorial-border: #956020;

  /* Celebration — the What's new? button is the one deliberately loud element in the app.
     Six party hues as rgb channels so glows and gradients can take an alpha; the flat form
     composes rgb(var(…)). White copy on the rainbow is its own token, like the shift fgs. */
  --hearth-party-pink-rgb: 255, 77, 157;
  --hearth-party-orange-rgb: 255, 138, 61;
  --hearth-party-yellow-rgb: 255, 210, 61;
  --hearth-party-green-rgb: 61, 220, 132;
  --hearth-party-blue-rgb: 61, 155, 255;
  --hearth-party-violet-rgb: 180, 77, 255;
  --hearth-party-fg: #FFFFFF;

  /* 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-fg: #FFFFFF;
  --hearth-shift-afternoon: var(--mud-palette-secondary);
  --hearth-shift-evening: var(--mud-palette-tertiary);
  --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);

  /* 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-* */
  /* Brand — the Venizen identity's lilac (ui/BRAND.md on the venizen-app-identity branch): the
     symbol colour, used sparingly. Named as that branch names it so the two merge cleanly. */
  --vz-lilac: #BFB4EC;
  --vz-lilac-rgb: 191, 180, 236;

  /* Tactile rota actions, separate from the page surfaces. */
  --hearth-action-base: #DEDED0;
  --hearth-action-peach: #EDC19F;
  --hearth-action-ink: #162B30;
  --hearth-action-edge: #A5ADA4;
  --hearth-action-focus: #63508C;

  /* Shadows — Tailwind-equivalent values with hearth-tinted color */
  --hearth-shadow-sm: 0 1px 2px 0 rgba(29, 28, 24, 0.05);
  --hearth-shadow-card: 0 4px 20px rgba(29, 28, 24, 0.04), 0 1px 2px rgba(29, 28, 24, 0.03);
  --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);

  /* Page canvas — three corner lights, each a 1000px sphere with eased falloff: the brand lilac
     emitting from the top-right, pine bottom-right, rust bottom-left. The top-left corner stays
     clean parchment so the page title sits on untouched surface. Lilac rather than the navy token,
     which at glow strength reads as grey slate; rust is kept to the bottom so the top of the page
     never reads as a peach bubble. Picked from the canvas-gradient studio in PubManager.Preview
     ("Lilac, rust & pine"). Narrow canvases swap this for two smaller, weaker lights — see the
     media query at the end of this block. */
  --hearth-canvas-gradient:
    radial-gradient(
      circle 1000px at 100% 0%,
      rgba(var(--vz-lilac-rgb), 0.31) 0%,
      rgba(var(--vz-lilac-rgb), 0.17) 30%,
      rgba(var(--vz-lilac-rgb), 0.04) 65%,
      transparent 100%
    ),
    radial-gradient(
      circle 1000px at 0% 100%,
      rgba(var(--mud-palette-secondary-rgb), 0.19) 0%,
      rgba(var(--mud-palette-secondary-rgb), 0.10) 30%,
      rgba(var(--mud-palette-secondary-rgb), 0.03) 65%,
      transparent 100%
    ),
    radial-gradient(
      circle 1000px at 100% 100%,
      rgba(var(--mud-palette-primary-rgb), 0.32) 0%,
      rgba(var(--mud-palette-primary-rgb), 0.17) 30%,
      rgba(var(--mud-palette-primary-rgb), 0.05) 65%,
      transparent 100%
    ),
    var(--hearth-surface);

  /* 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;
}

/* Narrow canvases get their own treatment. The desktop lights are 1000px spheres anchored to the
   corners so the middle of a wide screen stays parchment; on a phone every point sits inside all
   three spheres at once, and the stacked tints read as one murky, darkening wash instead of
   corner lights. Two smaller, weaker lights (lilac top-right, rust bottom-left) keep the corners
   lit, leave the centre clean and drop the pine entirely. */
@media (max-width: 959.98px) {
  :root {
    --hearth-canvas-gradient:
      radial-gradient(
        circle 620px at 100% 0%,
        rgba(var(--vz-lilac-rgb), 0.22) 0%,
        rgba(var(--vz-lilac-rgb), 0.10) 40%,
        transparent 85%
      ),
      radial-gradient(
        circle 560px at 0% 100%,
        rgba(var(--mud-palette-secondary-rgb), 0.13) 0%,
        rgba(var(--mud-palette-secondary-rgb), 0.05) 45%,
        transparent 85%
      ),
      var(--hearth-surface);
  }
}