/*
 * ClinicalMassage.UI design tokens (redesign spec #2911, § Design direction).
 * Served to both web apps at /_content/ClinicalMassage.UI/tokens.css.
 *
 * CONTRAST ANNOTATIONS. Every colour token (a --pw-* custom property whose value is a #hex)
 * must carry a trailing /* ... *\/ comment with one or more role tags, and
 * UnitTests/Infrastructure/DesignTokenContrastTests fails the build otherwise:
 *
 *   @surface                 a background other tokens are measured against
 *   @text on a,b             body text on each listed surface: needs 4.5:1
 *   @large-text on a,b       text >= 24px (or >= 18.66px bold): needs 3:1
 *   @interactive on a,b      field outlines and outlined-button borders: needs 3:1
 *   @decorative <reason>     carries no meaning (dividers, accent fills, logo art): exempt
 *
 * Surfaces are named without the --pw- prefix. Colours must be written as #hex so they can be measured.
 */

/* Fonts: self-hosted, latin + latin-ext subsets (vietnamese, cyrillic and greek are not shipped), OFL 1.1 (see fonts/OFL-*.txt). Source: Fontsource 5.3.0. */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/quicksand-latin-ext-500.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/quicksand-500.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;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/quicksand-latin-ext-700.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/quicksand-700.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/open-sans-latin-ext-300.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./fonts/open-sans-300.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/open-sans-latin-ext-400.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/open-sans-400.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/open-sans-latin-ext-600.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/open-sans-600.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;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/open-sans-latin-ext-700.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/open-sans-700.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 {
  /* Surfaces */
  --pw-white: #FFFFFF;          /* @surface @text on action,green,navy-active */
  --pw-ground: #F3F6F9;         /* @surface */
  --pw-tint: #E7EEF6;           /* @surface */
  --pw-surface-2: #EDF1F5;      /* @surface */
  --pw-surface-3: #F7F9FB;      /* @surface */
  --pw-navy: #0F3B66;           /* @surface @text on white,ground,tint,surface-2,surface-3,avatar-bg */
  --pw-navy-active: #1F5388;    /* @surface */
  --pw-avatar-bg: #D5F1F5;      /* @surface */
  --pw-action: #0066C9;         /* @surface @text on white,ground,surface-3 */
  --pw-green: #177E44;          /* @surface @text on white,ground */

  /* Text */
  --pw-ink: #16283A;            /* @text on white,ground,tint,surface-2,surface-3 */
  --pw-label: #445566;          /* @text on white,ground,tint,neutral-bg */
  --pw-muted: #566779;          /* @text on white,ground,tint,surface-2,surface-3 */
  --pw-teal-text: #0A6E7C;      /* @text on white,ground */
  --pw-action-hover: #01305A;   /* @text on white,ground,tint */
  --pw-sidebar-text: #D6E2EF;   /* @text on navy */

  /* Interactive boundaries: fields and outlined buttons sit on white or ground, never on tint (2.98:1). */
  --pw-interactive-border: #7A8B9D; /* @interactive on white,ground */

  /* Decorative */
  --pw-teal: #0FA4B8;           /* @decorative accent fill only, never text (2.99:1 on white) */
  --pw-leaf: #68A83F;           /* @decorative logo art only (2.89:1 on white) */
  --pw-line: #DCE3EB;           /* @decorative dividers and card borders carry no meaning */

  /* Status chips: background, then text */
  --pw-ok-bg: #E3F2E9;          /* @surface */
  --pw-ok-text: #135F35;        /* @text on ok-bg */
  --pw-warn-bg: #FFF1DC;        /* @surface */
  --pw-warn-text: #8A4B00;      /* @text on warn-bg */
  --pw-danger-bg: #FDECEA;      /* @surface */
  --pw-danger-text: #A0201A;    /* @text on danger-bg */
  --pw-neutral-bg: #EEF1F4;     /* @surface */

  /* Dark display set (back-room display board, epic #3462 T7; starting values from documentation/mockups/3462-board.html).
     Surfaces are named display-*; DisplayColour.Surfaces (Core) must equal panel, panel-2 and avatar-fill (DisplayTokenTests). */
  --pw-display-ground: #07111C;      /* @surface */
  --pw-display-panel: #0E1C2B;       /* @surface */
  --pw-display-panel-2: #13253A;     /* @surface */
  --pw-display-avatar-fill: #1C2733; /* @surface */
  --pw-display-line: #1E3248;        /* @surface @decorative card borders and dividers carry no meaning */
  --pw-display-off: #000000;         /* @surface the after-hours screen (#3473) */
  --pw-display-ink: #D6E2EF;         /* @text on display-ground,display-panel,display-panel-2,display-info-bg */
  --pw-display-ink-2: #B8C7D6;       /* @text on display-ground,display-panel,display-panel-2,display-info-bg */
  --pw-display-muted: #8FA3B8;       /* @text on display-ground,display-panel,display-panel-2,display-off @interactive on display-avatar-fill */
  --pw-display-teal: #0FA4B8;        /* @interactive on display-ground,display-panel,display-panel-2,display-info-bg,display-line */
  --pw-display-teal-text: #7FD3DF;   /* @text on display-ground,display-panel,display-panel-2,display-info-bg */
  --pw-display-ok-bg: #123524;       /* @surface */
  --pw-display-ok-text: #7FD6A2;     /* @text on display-ok-bg,display-panel,display-panel-2 */
  --pw-display-warn-bg: #3A2A10;     /* @surface */
  --pw-display-warn-text: #F2B866;   /* @text on display-warn-bg,display-panel,display-panel-2 */
  --pw-display-danger-bg: #3D1515;   /* @surface */
  --pw-display-danger-text: #F49A92; /* @text on display-danger-bg,display-panel,display-panel-2 */
  --pw-display-info-bg: #142C47;     /* @surface */
  --pw-display-info-text: #9CC6F2;   /* @text on display-info-bg,display-panel,display-panel-2 */
  --pw-display-neutral-bg: var(--pw-display-avatar-fill); /* @surface */
  --pw-display-neutral-text: #A9B8C7; /* @text on display-neutral-bg,display-panel,display-panel-2 */

  /* Type */
  --pw-font-heading: 'Quicksand', 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pw-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pw-fs-12: 12px;
  --pw-fs-13: 13px;
  --pw-fs-15: 15px;
  --pw-fs-17: 17px;
  --pw-fs-22: 22px;
  --pw-fs-28: 28px;
  --pw-fs-40: 40px;
  --pw-fs-48: 48px;             /* the one display heading */
  --pw-fs-meta: 11px;           /* dense meta only: timestamps and badges inside tables */

  /* Shape */
  --pw-radius-control: 10px;
  --pw-radius-card-sm: 12px;
  --pw-radius-card-md: 14px;
  --pw-radius-card-lg: 16px;
  --pw-radius-pill: 999px;

  /* Spacing: 4 px base */
  --pw-space-1: 4px;
  --pw-space-2: 8px;
  --pw-space-3: 12px;
  --pw-space-4: 16px;
  --pw-space-5: 24px;
  --pw-space-6: 32px;
  --pw-space-7: 48px;

  /* Control heights (targets): never under 24 px (WCAG 2.2 AA 2.5.8) */
  --pw-control-height: 44px;    /* primary actions, form fields, everything at phone widths */
  --pw-control-height-dense: 36px; /* row actions and toolbar buttons in dense desktop tables */
  --pw-control-height-min: 24px;

  /* Focus ring: action blue, at least 2 px */
  --pw-focus-ring-width: 2px;
  --pw-focus-ring-offset: 2px;
  --pw-focus-ring-color: var(--pw-action); /* @interactive on white,ground,surface-3 */
  --pw-focus-ring: var(--pw-focus-ring-width) solid var(--pw-focus-ring-color);
}