/* ==========================================================================
   Testing Suite tokens (WP0, shared: frozen after WP0)

   Fonts, the brand palette, its ramps and the semantic roles every other
   stylesheet references. New colour values go here and nowhere else: screen
   CSS uses var(--ts-*) only. Source: docs/design/design-system.md section 3.
   ========================================================================== */

/* 1. Fonts ----------------------------------------------------------------- */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal-heQdAz3.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal-AuPgurU.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal-RV1hfMj.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal-5ePuYxR.woff2") format("woff2"); }
/* Fixed-width digits cut from Poppins (docs/design/mockups/tools/make-figures.py). Digits only. */
@font-face { font-family: "Poppins Figures"; font-weight: 400; font-display: swap; src: url("../fonts/poppins-figures-400-256leNY.woff2") format("woff2"); unicode-range: U+0030-0039; }
@font-face { font-family: "Poppins Figures"; font-weight: 500; font-display: swap; src: url("../fonts/poppins-figures-500-65ZbRrZ.woff2") format("woff2"); unicode-range: U+0030-0039; }
@font-face { font-family: "Poppins Figures"; font-weight: 600; font-display: swap; src: url("../fonts/poppins-figures-600-tFcD1iU.woff2") format("woff2"); unicode-range: U+0030-0039; }
@font-face { font-family: "Poppins Figures"; font-weight: 700; font-display: swap; src: url("../fonts/poppins-figures-700-BSc1wpD.woff2") format("woff2"); unicode-range: U+0030-0039; }

/* 2. Brand primitives ------------------------------------------------------ */

:root {
  /* Style guide V6b palette */
  --ts-super-blue: #123063;
  --ts-super-pink: #ff0080;
  --ts-super-pink-deep: #da007d;      /* the pink in the SUPERstores lock-up, splatters and arrows */
  --ts-super-pink-light: #ffc7e0;
  --ts-success-green: #65cf6e;        /* success backgrounds only */
  --ts-commerce-green: #2a8431;       /* shop only: not used in Testing Suite */
  --ts-warnings-red: #ff0000;
  --ts-creamy: #f0ede8;
  --ts-light-grey: #f5f5f5;
  --ts-white: #ffffff;

  /* Blue ramp (from Super Blue) */
  --ts-blue-950: #0b1f45;
  --ts-blue-900: #123063;
  --ts-blue-850: #0e2752;             /* figure panels and code heads on Super Blue */
  --ts-blue-800: #1d3c73;
  --ts-blue-700: #2c4a8c;
  --ts-blue-500: #5878c8;
  --ts-blue-100: #e8edf8;
  --ts-blue-50: #f3f6fc;

  /* Slate (Super Blue greyed) for secondary ink, control borders, neutral states */
  --ts-slate-700: #34466b;
  --ts-slate-600: #4b5b7c;
  --ts-slate-500: #5b6883;
  --ts-slate-400: #808ba1;
  --ts-slate-300: #b4bccb;
  --ts-slate-200: #d5dbe5;
  --ts-slate-100: #e9edf3;
  --ts-slate-50: #f4f6f9;

  /* Sand (from Creamy) for surfaces and hairlines */
  --ts-sand-700: #5a5142;
  --ts-sand-400: #d3ccc0;
  --ts-sand-300: #e6e1d9;
  --ts-sand-250: #ece8e1;
  --ts-sand-200: #f0ede8;             /* = Creamy */
  --ts-sand-150: #f4f2ee;             /* skeleton placeholders */
  --ts-sand-100: #f7f5f1;
  --ts-sand-75: #faf8f5;              /* row hover */
  --ts-sand-50: #fbfaf8;

  /* Pink ramp */
  --ts-pink-800: #8c0054;
  --ts-pink-700: #b3006a;
  --ts-pink-650: #a10060;
  --ts-pink-600: #da007d;             /* = Super Pink deep: AA with white text */
  --ts-pink-500: #ff0080;             /* = Super Pink: accents and graphics only */
  --ts-pink-300: #ff8fc4;
  --ts-pink-200: #ffc7e0;             /* = Super Pink Light */
  --ts-pink-100: #ffe3ef;
  --ts-pink-50: #fff2f8;

  /* Green (Success green for fills, deepened for text) */
  --ts-green-700: #1e7b2c;
  --ts-green-650: #1b6e28;
  --ts-green-600: #2f9e3d;
  --ts-green-500: #65cf6e;            /* = Success green */
  --ts-green-200: #b9e8be;
  --ts-green-150: #e2f6e4;            /* the Live pill */
  --ts-green-100: #dcf4de;
  --ts-green-50: #effaf0;

  /* Amber: a functional caution colour (not in the brand palette, see design-system.md) */
  --ts-amber-700: #7a4f00;
  --ts-amber-600: #b97800;
  --ts-amber-500: #f2a900;
  --ts-amber-200: #ffe3a3;
  --ts-amber-100: #fff3d1;
  --ts-amber-50: #fff8e5;

  /* Red (from Warnings red, deepened so white text passes AA) */
  --ts-red-900: #7d0000;              /* the alert verdict */
  --ts-red-700: #b00000;
  --ts-red-600: #d90000;
  --ts-red-500: #ff0000;              /* = Warnings red: icons and large shapes only */
  --ts-red-300: #ff9a94;              /* outline danger button border */
  --ts-red-200: #ffc9c5;
  --ts-red-100: #ffdedc;
  --ts-red-50: #fff1f0;

  /* Sky (Scheduled) */
  --ts-sky-700: #0f5a6e;
  --ts-sky-600: #1c87b3;
  --ts-sky-100: #dff0f7;
}

/* 3. Semantic roles -------------------------------------------------------- */

:root {
  /* Surfaces */
  --ts-canvas: var(--ts-white);
  --ts-surface: var(--ts-white);
  --ts-surface-sunken: var(--ts-sand-50);      /* table heads, card footers */
  --ts-surface-muted: var(--ts-sand-200);      /* toolbars, filter panels, info */
  --ts-surface-inverse: var(--ts-blue-900);    /* sidebar, verdict, toasts, tooltips */
  --ts-surface-inverse-raised: #1f3d72;        /* hover/active on inverse */

  /* Ink */
  --ts-text: var(--ts-blue-900);               /* the brand sets all text in Super Blue */
  --ts-text-strong: var(--ts-blue-950);
  --ts-text-secondary: var(--ts-slate-600);
  --ts-text-muted: var(--ts-slate-500);
  --ts-text-inverse: var(--ts-white);
  --ts-text-inverse-2: #c9d1df;               /* secondary ink on Super Blue */
  --ts-text-inverse-3: #9aa8c1;               /* labels on Super Blue */
  --ts-link: var(--ts-pink-600);
  --ts-link-hover: var(--ts-pink-700);
  --ts-link-on-muted: var(--ts-pink-700);      /* links on Creamy need the deeper step */

  /* Lines */
  --ts-border-subtle: var(--ts-sand-250);      /* card edges, row dividers */
  --ts-border: var(--ts-sand-300);             /* section dividers, table head rule */
  --ts-border-control: var(--ts-slate-400);    /* inputs, checkboxes: 3:1 against white */
  --ts-border-button: #c6ccd8;                 /* neutral button outline (label carries the meaning) */
  --ts-border-strong: var(--ts-blue-900);
  --ts-border-inverse: rgba(255, 255, 255, 0.12);

  /* Interaction */
  --ts-accent: var(--ts-pink-500);
  --ts-hover: var(--ts-sand-100);
  --ts-hover-strong: var(--ts-sand-200);
  --ts-hover-row: var(--ts-sand-75);
  --ts-selected: var(--ts-pink-50);
  --ts-focus: var(--ts-pink-500);
  --ts-focus-ring: 0 0 0 2px var(--ts-white), 0 0 0 4px var(--ts-pink-500);
  --ts-focus-halo: 0 0 0 3px rgba(255, 0, 128, 0.2);
  --ts-backdrop: rgba(11, 31, 69, 0.55);       /* Super Blue scrim for modals and the drawer */

  /* Semantic */
  --ts-success-bg: var(--ts-green-50);
  --ts-success-border: var(--ts-green-200);
  --ts-success-fg: var(--ts-green-700);
  --ts-success-icon: var(--ts-green-600);
  --ts-success-solid: var(--ts-green-500);     /* with Super Blue text, as the brand alert */
  --ts-warning-bg: var(--ts-amber-50);
  --ts-warning-border: var(--ts-amber-200);
  --ts-warning-fg: var(--ts-amber-700);
  --ts-warning-icon: var(--ts-amber-600);
  --ts-danger-bg: var(--ts-red-50);
  --ts-danger-border: var(--ts-red-200);
  --ts-danger-fg: var(--ts-red-700);
  --ts-danger-icon: var(--ts-red-600);
  --ts-danger-solid: var(--ts-red-600);        /* with white text */
  --ts-info-bg: var(--ts-creamy);              /* brand info alert: Creamy + Super Blue */
  --ts-info-border: #e2ddd4;
  --ts-info-fg: var(--ts-blue-900);
  --ts-info-icon: var(--ts-blue-700);

  /* Uplift ink: the verdict decides the tone, never the sign */
  --ts-up: var(--ts-green-700);
  --ts-down: var(--ts-red-600);
  --ts-flat: var(--ts-slate-600);

  /* Campaign status: background / text / marker.
     Waiting for approval is pink (a person must act); Paused is amber (stopped, take care). */
  --ts-st-draft-bg: var(--ts-creamy);     --ts-st-draft-fg: var(--ts-sand-700);   --ts-st-draft-dot: #9b917f;
  --ts-st-qa-bg: var(--ts-blue-100);      --ts-st-qa-fg: var(--ts-blue-700);      --ts-st-qa-dot: var(--ts-blue-500);
  --ts-st-pending-bg: var(--ts-pink-100); --ts-st-pending-fg: var(--ts-pink-650); --ts-st-pending-dot: var(--ts-pink-600);
  --ts-st-scheduled-bg: var(--ts-sky-100);--ts-st-scheduled-fg: var(--ts-sky-700);--ts-st-scheduled-dot: var(--ts-sky-600);
  --ts-st-live-bg: var(--ts-green-150);   --ts-st-live-fg: var(--ts-green-650);   --ts-st-live-dot: var(--ts-green-600);
  --ts-st-paused-bg: var(--ts-amber-100); --ts-st-paused-fg: var(--ts-amber-700); --ts-st-paused-dot: var(--ts-amber-600);
  --ts-st-ended-bg: var(--ts-slate-100);  --ts-st-ended-fg: var(--ts-slate-700);  --ts-st-ended-dot: #66738f;
  --ts-st-archived-bg: transparent;       --ts-st-archived-fg: var(--ts-slate-500);--ts-st-archived-dot: #a3acbd;

  /* Variations: control + 7, validated for colour-blind separation (see design-system.md) */
  --ts-var-0: #5878c8;  /* control: brand-adjacent blue */
  --ts-var-1: #da007d;  /* Super Pink deep */
  --ts-var-2: #e8a200;  /* amber */
  --ts-var-3: #0e9f8e;  /* teal */
  --ts-var-4: #7a5af0;  /* violet */
  --ts-var-5: #ee6a1f;  /* orange */
  --ts-var-6: #1fa2e0;  /* sky */
  --ts-var-7: #a0672e;  /* clay */

  /* Sites: each takes the colour of what it sells (only inside the 20 to 28px mark) */
  --ts-site-rss: #4a5878;  /* Roofing: slate */
  --ts-site-dss: #0b6e7f;  /* Drainage: water */
  --ts-site-iss: #8a6100;  /* Insulation: mineral wool */
  --ts-site-dos: #8a5528;  /* Door: oak */
  --ts-site-pss: #b24a1e;  /* Plumbing: copper */
  --ts-site-lss: #3d7a35;  /* Landscaping: lawn */
  --ts-site-bks: #a8322b;  /* Brick: brick */
  --ts-site-cbn: #126e9e;  /* ClickBasin: ceramic blue */
  --ts-site-bss: #123063;  /* Building Superstore (trade): Super Blue */

  /* Type */
  --ts-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ts-font-figures: "Poppins Figures", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ts-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ts-fs-display: 40px;  --ts-lh-display: 44px;  --ts-ls-display: -1.25px;   /* brand H1 lower level */
  --ts-fs-title: 28px;    --ts-lh-title: 36px;    --ts-ls-title: -0.9px;      /* page title, Bold */
  --ts-fs-section: 20px;  --ts-lh-section: 28px;  --ts-ls-section: -0.4px;    /* section title, Semi-bold */
  --ts-fs-card: 16px;     --ts-lh-card: 24px;     --ts-ls-card: -0.15px;      /* card title, Semi-bold */
  --ts-fs-body: 14px;     --ts-lh-body: 20px;                                 /* brand paragraph */
  --ts-fs-small: 13px;    --ts-lh-small: 18px;
  --ts-fs-micro: 12px;    --ts-lh-micro: 16px;
  --ts-fs-stat: 30px;     --ts-lh-stat: 36px;     --ts-ls-stat: -0.9px;
  --ts-fs-hero: 56px;     --ts-lh-hero: 56px;     --ts-ls-hero: -2px;

  /* Space (4px grid) */
  --ts-space-1: 4px;  --ts-space-2: 8px;  --ts-space-3: 12px; --ts-space-4: 16px;
  --ts-space-5: 20px; --ts-space-6: 24px; --ts-space-8: 32px; --ts-space-10: 40px;
  --ts-space-12: 48px; --ts-space-16: 64px;

  /* Radii: the guide's 20 / 10 / 5 */
  --ts-radius-xs: 3px;     /* swatches, kbd */
  --ts-radius-sm: 5px;     /* buttons, inputs, tooltips, site marks */
  --ts-radius-md: 10px;    /* small blocks: callouts, menus, toasts, code, tiles */
  --ts-radius-lg: 20px;    /* large blocks: cards, verdict, modals */
  --ts-radius-pill: 999px; /* status pills and tags */

  /* Elevation: Super Blue tinted, never grey */
  --ts-shadow-xs: 0 1px 2px rgba(18, 48, 99, 0.05);
  --ts-shadow-sm: 0 1px 2px rgba(18, 48, 99, 0.05), 0 4px 12px -4px rgba(18, 48, 99, 0.08);
  --ts-shadow-md: 0 2px 4px -1px rgba(18, 48, 99, 0.06), 0 8px 20px -6px rgba(18, 48, 99, 0.16);
  --ts-shadow-lg: 0 4px 12px -4px rgba(18, 48, 99, 0.10), 0 24px 48px -16px rgba(18, 48, 99, 0.32);

  /* Motion */
  --ts-ease: cubic-bezier(0.2, 0, 0, 1);
  --ts-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ts-dur-1: 120ms;  /* hover, press */
  --ts-dur-2: 200ms;  /* menus, toasts, tabs */
  --ts-dur-3: 320ms;  /* modals, drawers */

  /* Layout */
  --ts-sidebar-w: 248px;
  --ts-header-h: 64px;   /* desktop header (lock-up, site switcher, search, New) */
  --ts-topbar-h: 56px;   /* header height below 992px */
  --ts-page-max: 1240px;
  --ts-page-narrow: 860px;

  /* Header (R1, R2): Super Blue by default. Every header colour comes from these tokens so the
     Super Pink alternative (S1) is one modifier class, .ts-shell--pink-header, with no template changes. */
  --ts-header-bg: var(--ts-blue-900);
  --ts-header-fg: var(--ts-white);
  --ts-header-border: rgba(255, 255, 255, 0.08);
  --ts-header-focus: var(--ts-pink-500);
  --ts-header-control-bg: rgba(255, 255, 255, 0.07);
  --ts-header-control-border: rgba(255, 255, 255, 0.12);
  --ts-header-control-bg-hover: rgba(255, 255, 255, 0.12);
  --ts-header-control-border-hover: rgba(255, 255, 255, 0.24);
  --ts-header-control-label: var(--ts-text-inverse-2);
  --ts-header-control-icon: var(--ts-text-inverse-3);
  --ts-header-mark-bg: rgba(255, 255, 255, 0.14);
  --ts-header-icon-hover-bg: rgba(255, 255, 255, 0.12);
  --ts-header-new-bg: var(--ts-pink-200);
  --ts-header-new-fg: var(--ts-blue-900);
  --ts-header-new-border: var(--ts-pink-200);
  --ts-header-new-hover-bg: var(--ts-white);
  --ts-header-new-hover-fg: var(--ts-blue-900);
  --ts-header-new-hover-border: var(--ts-pink-200);
  --ts-header-count-bg: var(--ts-pink-200);
  --ts-header-count-fg: var(--ts-blue-900);
}

/* Not shipped: the owner chose the Super Blue header (sign-off item S1). Kept as the reference
   for the Super Pink alternative, as on the websites' pink bar: a translucent white site switcher
   and a white New button. Using it would also need the plain white roundel (images/roundel.svg)
   in the header, and white text on #ff0080 is 3.77:1, below AA for the switcher's small text. */
.ts-shell--pink-header {
  --ts-header-bg: var(--ts-pink-500);
  --ts-header-border: rgba(255, 255, 255, 0.2);
  --ts-header-focus: var(--ts-white);
  --ts-header-control-bg: rgba(255, 255, 255, 0.16);
  --ts-header-control-border: rgba(255, 255, 255, 0.35);
  --ts-header-control-bg-hover: rgba(255, 255, 255, 0.24);
  --ts-header-control-border-hover: rgba(255, 255, 255, 0.6);
  --ts-header-control-label: rgba(255, 255, 255, 0.92);
  --ts-header-control-icon: rgba(255, 255, 255, 0.85);
  --ts-header-mark-bg: rgba(255, 255, 255, 0.22);
  --ts-header-icon-hover-bg: rgba(255, 255, 255, 0.2);
  --ts-header-new-bg: var(--ts-white);
  --ts-header-new-fg: var(--ts-blue-900);
  --ts-header-new-border: var(--ts-white);
  --ts-header-new-hover-bg: var(--ts-blue-900);
  --ts-header-new-hover-fg: var(--ts-white);
  --ts-header-new-hover-border: var(--ts-blue-900);
  --ts-header-count-bg: var(--ts-white);
  --ts-header-count-fg: var(--ts-blue-900);
}

/* Motion keyframes: the live pulse is the only ambient motion in the product. */
@keyframes ts-pulse {
  0% { box-shadow: 0 0 0 0 rgba(47, 158, 61, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(47, 158, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 158, 61, 0); }
}
@keyframes ts-spin { to { transform: rotate(360deg); } }