/* MyHRM v2 named values. Each name is defined once per mode; elements use names only.
   Harbour (Sadie, 19 Oct 2026; the "B · Harbour" design canvas): a SharePoint team-site look, Public Sans. Refreshed the
   same evening after the Canopy option: deep teal, ocean and moss in place of slate and steel blue, a fresh green for the
   main call to action, and softer corners. No pink or lavender. The names are kept from the V5 set (violet-*, lavender-*) so every rule that
   uses them takes the Harbour value; read violet-* as "primary" and lavender-* as "mist and hairlines".
   Added names (marked +) are colours the files write as literals, and roles the dark set must split. */

@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/PublicSans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/PublicSans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --violet-700: #13505A;       /* primary, pressed and link text */
  --violet-600: #1B6B76;       /* primary: steel blue */
  --violet-500: #2A8390;       /* focus borders */
  --violet-400: #8CC7CB;       /* focus outline, scrollbars */
  --magenta-500: #2C7558;
  --indigo-600: #24607A;
  --canvas: #F3F7F7;           /* page ground */
  --lavender-50: #F2F8F8;      /* hover fills */
  --lavender-100: #E2EFEF;     /* mist: selected rows, soft fills */
  --lavender-200: #D7E4E6;     /* hairlines and borders */
  --ink-900: #10242A;
  --ink-700: #34484E;
  --ink-500: #4C6066;
  --ink-300: #7E9195;
  --white: #FFFFFF;
  --green-500: #3FAE5E;
  --green-50: #E1F3E5;
  --rose-500: #B4513A;
  --rose-50: #F6E6DE;
  --amber-500: #B88A2E;
  --amber-50: #F7EFDC;
  --sky-500: #3D7EA6;
  --sky-50: #E3EEF5;
  --lime-400: #8DB36A;
  --green-700: #24723D;        /* + tag and pill text */
  --sky-700: #255A7C;          /* + */
  --rose-700: #8E3F1E;         /* + */
  --amber-700: #7A5A12;        /* + */
  --orange-500: #C0703A;       /* + check-in: Low */
  --lime-600: #5E8C46;         /* + check-in: Good */

  /* + Suite bar (top strip on every page) */
  --suite: #0D2E33;
  --on-suite: #FFFFFF;
  --suite-ink-soft: #BFD6D6;

  /* + Workspace tiles: solid fills, white ink in both modes (dashboard .wtile, workspace header) */
  --tile-mycoach: #0F4A50;
  --tile-diagnostic: #24607A;
  --tile-er: #2F4B6A;
  --tile-hs: #2C7558;
  --tile-wb: #9FB1B8;
  --tile-hs-dash: #4F6A73;     /* + the Workplace Health and Safety tile on the dashboard only (Sadie, 19 Oct night) */
  --on-tile: #FFFFFF;
  --on-tile-soft: #E3F0EE;
  --on-cta: #0D2E33;           /* + ink on the white button of the largest tile */
  --focus-on-tile: #F2C14E;    /* + keyboard focus ring on a tile fill */

  /* + accents per workspace (workspace --accent per preset) */
  --accent-coach: #24607A;  --accent-coach-soft: #E2EEF3;   /* Problem Diagnostic (css name "coach") */
  --accent-hs: #2C7558;     --accent-hs-soft: #E0F0E8;
  --accent-er: #2F4B6A;     --accent-er-soft: #E3E9F1;
  --accent-wb: #5B737B;     --accent-wb-soft: #EDF2F3;
  --accent-mycoach: #0F4A50; --accent-mycoach-soft: #E0EEEE;  /* + MyCoach tile and panel */
  --coach-ink: #10242A;        /* + text inside the MyCoach panel */
  /* + Daily pulse accent (Sadie, 19 Oct evening: a small accent, not pink or lavender), its zones, and sage for wellbeing */
  --pulse: #C98B2B;  --pulse-soft: #FBF2E1;  --pulse-ink: #7A5A12;
  --zone-green: #3FAE5E;  --zone-amber: #C98B2B;  --zone-red: #B4513A;
  /* + #9FB1B8 (Sadie, 19 Oct night): My Health and Wellbeing and the initials circle; a light fill, so it takes deep ink */
  --mist-grey: #9FB1B8;  --sage-ink: #5B737B;  --on-tile-light: #0D2E33;  --on-tile-light-soft: #24434A;
  --sage: #9FB1B8;  --sage-soft: #EDF2F3;
  /* + Fresh green (19 Oct evening refresh, after the Canopy option): the main call to action and the current-page mark */
  --fresh: #3FAE5E;  --on-fresh: #06210F;
  --accent: var(--violet-600);
  --accent-soft: var(--lavender-100);

  --on-accent: #FFFFFF;        /* + ink on primary, accent and check-in fills */
  --on-brand: #FFFFFF;         /* + ink on the brand fill */
  --scrim: rgba(16, 28, 40, .45);            /* + behind the mobile nav and overlays */
  --focus-ring: rgba(27, 107, 118, .18);      /* + */

  --grad-primary: linear-gradient(150deg, #0D2E33 0%, #1B6B76 100%);   /* sign-in page ground */
  --grad-text: var(--grad-primary);
  --shadow-card: 0 1px 2px rgba(16, 36, 58, .06);
  --shadow-lift: 0 2px 4px rgba(16, 36, 58, .08), 0 14px 32px -14px rgba(16, 36, 58, .35);
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --sidebar-w: 248px;
  --suite-h: 52px;
  --header-h: 72px;
  --font-display: "Public Sans", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;
}

/* Dark: the same names, new values. Surfaces deepen to slate; the primary lightens and takes dark ink.
   Tile fills stay solid with white ink. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --violet-700: #BDE3E2;
  --violet-600: #8CCBCB;
  --violet-500: #79BDBE;
  --violet-400: #4E9496;
  --magenta-500: #8FD0B0;
  --indigo-600: #9CC6DA;
  --canvas: #0C1618;
  --lavender-50: #132024;
  --lavender-100: #1A2C30;
  --lavender-200: #27393E;
  --ink-900: #E4F0F0;
  --ink-700: #C0D2D3;
  --ink-500: #98AEB0;
  --ink-300: #6B8285;
  --white: #18222D;
  --green-500: #7FD39A;
  --green-50: #13291C;
  --rose-500: #E59A84;
  --rose-50: #33201A;
  --amber-500: #E2BE6E;
  --amber-50: #2E2614;
  --sky-500: #82B7D8;
  --sky-50: #142634;
  --lime-400: #B4D68F;
  --green-700: #A6E2BA;
  --sky-700: #9CC8E3;
  --rose-700: #F0B3A1;
  --amber-700: #E8CB86;
  --orange-500: #E4A274;
  --lime-600: #A6CC83;

  --suite: #071A1D;
  --on-suite: #FFFFFF;
  --suite-ink-soft: #A8C2C3;

  --tile-mycoach: #0F4A50;
  --tile-diagnostic: #215771;
  --tile-er: #2B4563;
  --tile-hs: #276A50;
  --tile-wb: #9FB1B8;
  --on-tile: #FFFFFF;
  --on-tile-soft: #D9EAE8;

  --accent-coach: #9CC6DA;  --accent-coach-soft: #162833;
  --accent-hs: #8FD0B0;     --accent-hs-soft: #14291F;
  --accent-er: #A9BDDA;     --accent-er-soft: #1A2433;
  --accent-wb: #C5D3D8;     --accent-wb-soft: #172226;
  --accent-mycoach: #8CCBCB; --accent-mycoach-soft: #16292C;
  --coach-ink: #E4F0F0;
  --pulse: #E2B05A;  --pulse-soft: #2E2614;  --pulse-ink: #E8CB86;
  --zone-green: #7FD39A;  --zone-amber: #E2B05A;  --zone-red: #E08A72;
  --mist-grey: #9FB1B8;  --sage-ink: #C5D3D8;  --on-tile-light: #0D2E33;  --on-tile-light-soft: #24434A;
  --sage: #9FB1B8;  --sage-soft: #172226;

  --fresh: #6CCB86;  --on-fresh: #06210F;
  --on-accent: #0A1A1C;
  --on-brand: #FFFFFF;
  --scrim: rgba(0, 0, 0, .6);
  --focus-ring: rgba(140, 203, 203, .28);

  --grad-primary: linear-gradient(150deg, #071A1D 0%, #0F4A50 100%);
  --grad-text: linear-gradient(150deg, #BDE3E2 0%, #8CCBCB 100%);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 14px 32px -14px rgba(0, 0, 0, .7);
}