/*
 * TendWorks design tokens (A1). Source: DESIGN.md (Ramp, adjusted for contrast).
 * Every page links this file first: the app shell (templates/index.html), the
 * public base (templates/tw_public_base.html) and the standalone public pages.
 *
 * Adjustments to DESIGN.md (accessibility wins):
 * - Primary actions are ink-filled. Ramp yellow is for focus and selection only
 *   (yellow on paper is 1.10:1, ink on yellow is 14.2:1).
 * - Links use --tw-link #0057d9 (5.6:1 on paper); #0066ff is 4.3:1 there.
 * - Danger is #c63d33 (5.1:1 on white) instead of #d4443a (4.48:1).
 * - Control borders use --tw-border-strong #8a857d (3.3:1 on paper); the hairline
 *   #e4e0db is for dividers only.
 * - --tw-ink-faint #93908a is 2.85:1: disabled and decorative text only.
 * - UI and display type is DM Sans (the tendworks.com website font), self-hosted
 *   under the SIL OFL (static/tw/fonts/). Inter, Hanken and Schibsted Grotesk are
 *   fallbacks. Timers and figures use tabular numerals instead of a monospace face.
 * - 2026-10: white pages, cool slate neutrals and an indigo to violet brand
 *   (primary actions and the active nav use the gradient). White text is 6.3:1
 *   on #4f46e5 and 5.7:1 on #7c3aed, so the gradient meets AA at both ends.
 *
 * 2026-10 UX standard v2 (/opt/twelite.txt): type roles, the 4px spacing
 * scale (--tw-sp-*), radii 6/8/12, 36px controls with 44px hit areas, page
 * padding per breakpoint, shadows only on floating layers, 150ms motion and
 * the indigo focus ring are tokens below. Colour values are unchanged.
 *
 * Contrast pairs (WCAG 2.x): ink/paper 15.7, muted/paper 6.2, muted/white 6.9,
 * white/ink 17.6, success-ink/success-bg 4.6+, danger-ink/danger-bg 5.2,
 * warning-ink/warning-bg 5.7, info-ink/info-bg 5.5.
 */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("../tw/fonts/dm-sans-latin-wght-normal.7c87a648293f.woff2") format("woff2-variations");
  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: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("../tw/fonts/dm-sans-latin-ext-wght-normal.49935c4b6235.woff2") format("woff2-variations");
  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: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../tw/fonts/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2-variations");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../tw/fonts/inter-latin-ext-wght-normal.ad4eb06671be.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../tw/fonts/hanken-grotesk-latin-wght-normal.1183e3526008.woff2") format("woff2-variations");
  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+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../tw/fonts/hanken-grotesk-latin-ext-wght-normal.a868beb174d3.woff2") format("woff2-variations");
  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: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../tw/fonts/schibsted-grotesk-latin-wght-normal.8dfaf7b97333.woff2") format("woff2-variations");
  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+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("../tw/fonts/schibsted-grotesk-latin-ext-wght-normal.3a88f02a2635.woff2") format("woff2-variations");
  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;
}

:root {
  /* ── Palette (raw) ─────────────────────────────────────────────── */
  --tw-ink: #101828;
  --tw-ink-muted: #475467;
  --tw-ink-faint: #98a2b3;          /* disabled / decorative only */
  --tw-paper: #ffffff;
  --tw-white: #ffffff;
  --tw-surface: #f5f6fa;            /* wells, subtle fills, hover rows */
  --tw-surface-2: #eceef4;
  --tw-yellow: #a5b4fc;             /* accent (indigo 300): focus halo and selection only, never text */
  --tw-yellow-soft: #f1f0ff;        /* selected row / active nav background (indigo/violet 50) */
  --tw-accent: #4f46e5;             /* indigo 600: active nav marker, brand accents (6.3:1 on white) */
  --tw-accent-2: #7c3aed;           /* violet 600: second gradient stop (5.7:1 on white) */
  --tw-gradient-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --tw-gradient-brand-hover: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  --tw-gradient-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
  --tw-blue: #2563eb;               /* data viz */
  --tw-link: #3538cd;               /* text links (8.1:1 on white) */
  --tw-link-hover: #2d31a6;

  /* ── Semantic roles ─────────────────────────────────────────────── */
  --tw-bg: var(--tw-paper);
  --tw-bg-raised: var(--tw-white);
  --tw-bg-well: var(--tw-surface);
  --tw-fg: var(--tw-ink);
  --tw-fg-muted: var(--tw-ink-muted);
  --tw-fg-faint: var(--tw-ink-faint);
  --tw-fg-on-ink: var(--tw-paper);
  --tw-border: #e4e7ec;             /* hairline dividers (decorative) */
  --tw-border-strong: #8a94a6;      /* input, checkbox, select borders (3:1 on white) */
  --tw-border-ink: var(--tw-ink);

  /* Single primary action colour. A tenant may override --tw-action/--tw-action-fg
     (white label), keeping 4.5:1 between them. */
  --tw-action: #4f46e5;
  --tw-action-hover: #4338ca;
  --tw-action-active: #3730a3;
  --tw-action-fg: var(--tw-white);

  /* Status families: bg (chip fill), fg (text on bg and on white), solid (fills
     with white text, 4.5:1+), border (3:1 on white for outlines). */
  --tw-success-bg: #e3f1e8;
  --tw-success-fg: #1a6b3d;
  --tw-success-solid: #1f7a46;
  --tw-warning-bg: #fbf3d0;
  --tw-warning-fg: #6b4e00;
  --tw-warning-solid: #8a6400;
  --tw-danger-bg: #fbeae8;
  --tw-danger-fg: #b3362d;
  --tw-danger-solid: #c63d33;
  --tw-info-bg: #eef2ff;
  --tw-info-fg: #3538cd;
  --tw-info-solid: #3538cd;
  --tw-neutral-bg: var(--tw-surface);
  --tw-neutral-fg: var(--tw-ink-muted);
  --tw-neutral-solid: var(--tw-ink-muted);

  /* Focus (v2): a 2px indigo outline with a 2px offset on every interactive
     element (6.3:1 on white). No halo. */
  --tw-focus-ring: var(--tw-accent);
  --tw-focus-halo: transparent;
  --tw-focus-width: 2px;
  --tw-focus-offset: 2px;
  --tw-focus-shadow: 0 0 0 2px var(--tw-bg), 0 0 0 4px var(--tw-focus-ring);

  /* ── Type ───────────────────────────────────────────────────────── */
  --tw-font-body: "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --tw-font-display: "DM Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --tw-font-mono: var(--tw-font-body);  /* numbers use tabular figures, not a monospace face */

  /* Scale (ratio ~1.2 for text, fluid display). Body floor 16px (iOS zoom). */
  --tw-text-xs: 0.8125rem;          /* 13px: captions, meta, table headers */
  --tw-text-sm: 0.875rem;           /* 14px: dense table cells, help text */
  --tw-text-md: 1rem;               /* 16px: body, inputs */
  --tw-text-lg: 1.0625rem;          /* 17px: titles */
  --tw-text-xl: 1.25rem;            /* 20px */
  --tw-text-2xl: clamp(1.375rem, 1.2rem + 0.6vw, 1.5rem);    /* 22-24px heading-md */
  --tw-text-3xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);     /* 28-40px heading-lg */
  --tw-text-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); /* 36-72px */

  --tw-weight-light: 350;
  --tw-weight-regular: 400;
  --tw-weight-medium: 500;
  --tw-weight-semibold: 600;
  --tw-weight-bold: 700;

  --tw-leading-tight: 1.15;
  --tw-leading-snug: 1.3;
  --tw-leading-body: 1.5;
  --tw-tracking-display: -0.025em;
  --tw-tracking-heading: -0.02em;
  --tw-tracking-title: -0.01em;

  /* ── Space (4/8 scale) ──────────────────────────────────────────── */
  --tw-space-1: 0.25rem;  /* 4 */
  --tw-space-2: 0.5rem;   /* 8 */
  --tw-space-3: 0.75rem;  /* 12 */
  --tw-space-4: 1rem;     /* 16 */
  --tw-space-5: 1.5rem;   /* 24 */
  --tw-space-6: 2rem;     /* 32 */
  --tw-space-7: 3rem;     /* 48 */
  --tw-space-8: 4rem;     /* 64 */
  --tw-space-9: 6rem;     /* 96 */
  --tw-gutter: var(--tw-page-pad);  /* page padding: 16 phone, 24 tablet, 32 desktop */

  /* ── Size ───────────────────────────────────────────────────────── */
  --tw-target: 44px;                /* minimum touch target */
  --tw-control-h: 36px;             /* v2: buttons, inputs, selects (44px hit area on touch) */
  --tw-control-h-sm: 36px;          /* same as control-h; kept for existing callers */
  --tw-row-h: 48px;                 /* v2: table row height */
  --tw-sidebar-w: 264px;
  --tw-topbar-h: 64px;
  --tw-measure: 65ch;
  --tw-shell-max: 100%;             /* pages use the full width beside the sidebar */

  /* ── Radius ─────────────────────────────────────────────────────── */
  --tw-radius-sm: 6px;              /* v2: pills, badges, chips */
  --tw-radius-md: 8px;              /* v2: buttons, inputs, menus */
  --tw-radius-lg: 12px;             /* v2: cards, tables, modals */
  --tw-radius-xl: 12px;             /* v2 has no larger radius: panels and modals use 12 */
  --tw-radius-full: 999px;          /* pills, avatars */

  /* ── Elevation ──────────────────────────────────────────────────── */
  --tw-shadow-none: none;
  /* v2: shadows only on floating layers. Cards, tables, tiles and buttons
     have none, so --tw-shadow-sm is "none" for every existing caller. */
  --tw-shadow-sm: none;
  --tw-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.12);    /* switch knob only */
  --tw-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);   /* menus, popovers, select dropdowns */
  --tw-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.1);   /* toasts, drawers */
  --tw-shadow-modal: 0 24px 64px rgba(16, 24, 40, 0.18);
  --tw-scrim: rgba(16, 24, 40, 0.48);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --tw-duration-fast: 150ms;        /* v2: hover, press, expand */
  --tw-duration: 150ms;
  --tw-duration-slow: 200ms;        /* drawers and modals entering */
  --tw-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --tw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layers ─────────────────────────────────────────────────────── */
  --tw-z-sticky: 100;
  --tw-z-drawer: 1040;
  --tw-z-modal: 1050;
  --tw-z-toast: 1100;
  --tw-z-skip: 1200;

  /* ── 2026-10 modernisation (added; existing values unchanged) ───────
     Brand tints for chips, active tabs and hero cards. Indigo 600 text is
     5.6:1 on --tw-accent-bg; ink text is 15:1+ on every tint. */
  --tw-accent-bg: #eef2ff;          /* indigo 50: active chip, selected tab, badge fill */
  --tw-accent-bg-2: #f5f3ff;        /* violet 50 */
  --tw-accent-line: #c7d2fe;        /* indigo 200: decorative borders only (not 3:1) */
  --tw-gradient-hero: linear-gradient(120deg, #eef2ff 0%, #f5f3ff 55%, #ffffff 100%);
  --tw-shadow-brand: none;          /* no coloured glow: the gradient alone marks the primary action */
  --tw-shadow-card-hover: none;     /* v2: cards never lift on hover */
  --tw-sidebar-rail-w: calc(var(--tw-target) + var(--tw-space-5));
  --tw-table-head-bg: var(--tw-surface);
  --tw-avatar-bg: var(--tw-surface-2);  /* v2: neutral initials, never brand colour */
  --tw-avatar-fg: var(--tw-fg-muted);

  /* ══ UX standard v2 (2026-10). Area files use these, never raw px or hex. ══ */

  /* Type roles: size / line height / weight. DM Sans everywhere, weights 400,
     500 and 600 only. Shorthands work with `font:`. */
  --tw-title-size: 24px;      --tw-title-line: 32px;      --tw-title-weight: 600;   /* page title (h1), letter-spacing -0.02em */
  --tw-title-tracking: -0.02em;
  --tw-section-size: 17px;    --tw-section-line: 24px;    --tw-section-weight: 600; /* section title, modal title */
  --tw-card-title-size: 15px; --tw-card-title-line: 22px; --tw-card-title-weight: 600;
  --tw-body-size: 14px;       --tw-body-line: 20px;       --tw-body-weight: 400;
  --tw-secondary-size: 13px;  --tw-secondary-line: 18px;  --tw-secondary-weight: 400; /* fg-muted */
  --tw-label-size: 13px;      --tw-label-line: 18px;      --tw-label-weight: 500;   /* labels, tabs (14), table headers */
  --tw-caption-size: 12px;    --tw-caption-line: 16px;    --tw-caption-weight: 400; /* fg-muted */
  --tw-kpi-size: 28px;        --tw-kpi-line: 34px;        --tw-kpi-weight: 600;     /* KPI numbers only */
  --tw-tab-size: 14px;        --tw-tab-line: 20px;        --tw-tab-weight: 500;
  --tw-button-size: 14px;     --tw-button-weight: 500;
  --tw-pill-size: 12px;       --tw-pill-weight: 500;

  --tw-font-title: var(--tw-title-weight) var(--tw-title-size) / var(--tw-title-line) var(--tw-font-display);
  --tw-font-section: var(--tw-section-weight) var(--tw-section-size) / var(--tw-section-line) var(--tw-font-display);
  --tw-font-card-title: var(--tw-card-title-weight) var(--tw-card-title-size) / var(--tw-card-title-line) var(--tw-font-display);
  --tw-font-body-text: var(--tw-body-weight) var(--tw-body-size) / var(--tw-body-line) var(--tw-font-body);
  --tw-font-secondary: var(--tw-secondary-weight) var(--tw-secondary-size) / var(--tw-secondary-line) var(--tw-font-body);
  --tw-font-label: var(--tw-label-weight) var(--tw-label-size) / var(--tw-label-line) var(--tw-font-body);
  --tw-font-caption: var(--tw-caption-weight) var(--tw-caption-size) / var(--tw-caption-line) var(--tw-font-body);
  --tw-font-kpi: var(--tw-kpi-weight) var(--tw-kpi-size) / var(--tw-kpi-line) var(--tw-font-display);
  --tw-font-tab: var(--tw-tab-weight) var(--tw-tab-size) / var(--tw-tab-line) var(--tw-font-body);

  /* Spacing scale (4 px base): only these values. */
  --tw-sp-4: 4px;
  --tw-sp-8: 8px;
  --tw-sp-12: 12px;
  --tw-sp-16: 16px;
  --tw-sp-20: 20px;
  --tw-sp-24: 24px;
  --tw-sp-32: 32px;
  --tw-sp-48: 48px;

  /* Layout rhythm */
  --tw-page-pad-phone: 16px;        /* <= 480 */
  --tw-page-pad-tablet: 24px;       /* 481 - 1023 */
  --tw-page-pad-desktop: 32px;      /* >= 1024 */
  --tw-page-pad: var(--tw-page-pad-phone);
  --tw-header-gap: 24px;            /* page header block -> content */
  --tw-section-gap: 32px;           /* between sections */
  --tw-card-pad: 20px;              /* 16 on phone (see media query) */
  --tw-field-gap: 16px;             /* between form fields */
  --tw-tab-gap: 24px;               /* between tabs */
  --tw-cell-pad-y: 12px;            /* table cell padding 12 16 */
  --tw-cell-pad-x: 16px;
  --tw-search-w: 280px;             /* toolbar search on desktop */
  --tw-kanban-col-w: 280px;
  --tw-modal-w: 560px;              /* forms */
  --tw-modal-w-lg: 720px;           /* detail */

  /* Breakpoints (for reference; CSS variables cannot be used in @media):
     phone <= 480, tablet 768, laptop 1024, desktop 1280. */

  /* Radii: 6 / 8 / 12 only. */
  --tw-radius-pill: 6px;            /* badges, status pills, filter chips */
  --tw-radius-control: 8px;         /* buttons, inputs, selects, menus, toasts */
  --tw-radius-card: 12px;           /* cards, tables, modals, drawers */

  /* Control sizes */
  --tw-btn-h: 36px;
  --tw-btn-pad-x: 14px;
  --tw-input-h: 36px;
  --tw-icon-btn: 36px;
  --tw-hit: 44px;                   /* minimum touch target */
  --tw-pill-h: 22px;
  --tw-icon-size: 18px;             /* UI icons */
  --tw-icon-size-nav: 20px;         /* sidebar icons */
  --tw-avatar-24: 24px;
  --tw-avatar-28: 28px;             /* table entity column */
  --tw-avatar-40: 40px;
  --tw-avatar-64: 64px;

  /* Surfaces */
  --tw-card-shadow: none;           /* cards never carry a shadow */
  --tw-shadow-menu: var(--tw-shadow-md);
  --tw-shadow-toast: var(--tw-shadow-lg);
  --tw-focus-color: var(--tw-accent);  /* 2px indigo outline, 2px offset */

  /* Motion */
  --tw-motion: 150ms cubic-bezier(0, 0, 0.2, 1);
  --tw-toast-duration: 5s;          /* auto-dismiss */
}

@media (min-width: 481px) {
  :root { --tw-page-pad: var(--tw-page-pad-tablet); }
}
@media (min-width: 1024px) {
  :root { --tw-page-pad: var(--tw-page-pad-desktop); }
}
@media (max-width: 480px) {
  :root { --tw-card-pad: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tw-duration-fast: 0ms;
    --tw-duration: 0ms;
    --tw-duration-slow: 0ms;
    --tw-motion: 0ms linear;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Global base that every page shares ───────────────────────────── */

/* One visible focus style for every interactive element (WCAG 2.4.7 / 1.4.11):
   2px indigo outline, 2px offset. Never removed. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"], [role="button"], [role="tab"], .select2-selection):focus-visible {
  outline: var(--tw-focus-width) solid var(--tw-focus-ring) !important;
  outline-offset: var(--tw-focus-offset) !important;
}

::selection {
  background: var(--tw-yellow);
  color: var(--tw-ink);
}

/* Figures line up: tables, KPIs, money, dates and times use tabular numerals. */
table, .tw-num, .tw-kpi__value, time {
  font-variant-numeric: tabular-nums;
}

/* Skip link: hidden until focused. */
.tw-skip-link {
  position: absolute;
  top: var(--tw-space-2);
  left: var(--tw-space-2);
  z-index: var(--tw-z-skip);
  padding: var(--tw-space-3) var(--tw-space-4);
  min-height: var(--tw-target);
  display: inline-flex;
  align-items: center;
  background: var(--tw-action);
  color: var(--tw-action-fg);
  font: var(--tw-weight-semibold) var(--tw-text-md) / 1 var(--tw-font-body);
  border-radius: var(--tw-radius-md);
  text-decoration: none;
  transform: translateY(-200%);
}
.tw-skip-link:focus,
.tw-skip-link:focus-visible {
  transform: none;
  color: var(--tw-action-fg);
}

.tw-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.tw-num {
  font-family: var(--tw-font-mono);
  font-variant-numeric: tabular-nums;
}