/* HES Phoenix retheme of the Twenty shell — WO-371, overlay patch 7 (ADR-0017 mechanics).
 *
 * Source of truth: .claude/skills/hes-design-system (Phoenix tokens v0.4.0, AB#371 "proposed").
 * Every colour below traces to that skill's tables; anything derived says so in a comment.
 * Supersedes infra/theme/hes-theme.css (the 2026-07-11 warm-cream direction, bind-mounted) —
 * that route is retired by the same work order.
 *
 * WHY THIS IS A RETHEME AND NOT A CSS OVERRIDE. Twenty v2.37.4's theme IS a CSS-variable layer:
 * twenty-ui ships ~1000 `--t-*` custom properties scoped on `.light`/`.dark` (its
 * theme-constants/theme-{light,dark}.css), and the emotion theme object components consume is
 * COMPUTED FROM those variables at runtime (ThemeProvider.computeThemeFromCss reads computed
 * styles). Redefining the variables at higher specificity (`html.light`/`html.dark`) therefore
 * rethemes both the CSS and the JS consumers, with zero selectors into hashed component classes.
 * That is the "retheme it — do not override component CSS" the design prompt asks for, done at
 * the only place a prebuilt image exposes the token layer.
 *
 * UPGRADE BEHAVIOUR. The Dockerfile asserts at build time that the upstream bundle still carries
 * the `--t-*` layer; if a future Twenty drops or renames it, the overlay build FAILS rather than
 * silently shipping a stock-looking app. Values here never need to track upstream — they are the
 * HES palette, not a fork of Twenty's.
 *
 * Scale note: Twenty's root font-size is a fixed 13px and the user "interface scale" setting
 * works via `zoom` (multiplies px and rem alike), so the Phoenix sizes are written in px —
 * base 14px stays base 14px at every UI scale.
 */

/* ── Both themes: one family carries the UI; MD2-flat 4px radius ─────────────
 * Aptos → Calibri → system (never Inter, never a web-font link: under a strict CSP a CDN link
 * fails silently). Aptos self-hosting is gated on the licence question in the skill; until it is
 * answered, users with Office get Aptos and the rest get Calibri.
 * Font ladder: Twenty has 7 steps, Phoenix names 5 roles — xs/sm/md/lg map to 11/13/14/17px and
 * xxl already sits at Phoenix xl (24px, stock 1.85rem × 13px). `xxs` (8px) and `xl` (20px) have
 * no Phoenix role and stay stock — a reported gap, not an invented value (WO-371).
 * Radius: 4px on everything; pills/chips/avatars stay fully round. `xs` (2px) stays — the rule
 * bans rounder, not flatter. */
html.light, html.dark {
  --t-font-family: 'Aptos', 'Calibri', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --t-font-size-xs: 11px;
  --t-font-size-sm: 13px;
  --t-font-size-md: 14px;
  --t-font-size-lg: 17px;
  --t-border-radius-md: 4px;
  --t-border-radius-lg: 4px;
  --t-border-radius-xl: 4px;
  --t-border-radius-xxl: 4px;
  --t-border-radius-md-round: 4px;
}

/* ── Light ──────────────────────────────────────────────────────────────────
 * Surface mapping (same roles in both themes): background-primary = surface (content, cards,
 * table), secondary = surface-2 (sticky headers, hover surfaces), tertiary = bg (the canvas the
 * app sits on — sidebar, page ground), quaternary = surface-3 (the strongest neutral fill). */
html.light {
  color-scheme: light;

  --t-background-primary: #FFFFFF;
  --t-background-secondary: #F5F8FB;
  --t-background-tertiary: #EEF2F6;
  --t-background-quaternary: #EAF0F6;
  --t-background-danger: #FCE3E7;                 /* danger-tint */
  --t-background-inverted-primary: #17222E;       /* text — ink-filled surfaces (tooltips) */
  --t-background-primary-inverted: #17222E;
  --t-background-inverted-secondary: #5C6B7A;     /* text-muted — hover on an inverted surface */
  --t-background-primary-inverted-hover: #5C6B7A;

  /* Hover/selected washes: alpha mixes of the ink #17222E — the prompt's own
   * color-mix(currentColor …) convention; steps mirror the retired theme's proven .03/.06/.11. */
  --t-background-transparent-lighter: rgba(23, 34, 46, 0.03);
  --t-background-transparent-light: rgba(23, 34, 46, 0.06);
  --t-background-transparent-medium: rgba(23, 34, 46, 0.11);
  --t-background-transparent-strong: rgba(23, 34, 46, 0.16);
  /* Semantic washes: alpha of the semantic colour itself (derived, same convention). */
  --t-background-transparent-blue: rgba(0, 120, 191, 0.08);
  --t-background-transparent-success: rgba(30, 158, 90, 0.08);
  --t-background-transparent-orange: rgba(164, 98, 0, 0.08);
  --t-background-transparent-danger: rgba(229, 25, 53, 0.08);

  /* Phoenix has ONE overlay role; Twenty's primary/secondary both get it, tertiary (a faint
   * scrim) gets the light ink wash (derived). */
  --t-background-overlay-primary: rgba(23, 34, 46, 0.45);
  --t-background-overlay-secondary: rgba(23, 34, 46, 0.45);
  --t-background-overlay-tertiary: rgba(23, 34, 46, 0.08);

  /* Borders: medium = border, strong = border-strong. Twenty's `light` (softest divider) has no
   * Phoenix border role — mapped to surface-3, the softest neutral in the tables (gap reported,
   * WO-371). Border-blue is the selection/focus outline colour → primary. */
  --t-border-color-strong: #8C949C;
  --t-border-color-medium: #D8E0E8;
  --t-border-color-light: #EAF0F6;
  --t-border-color-secondary-inverted: #5C6B7A;
  --t-border-color-inverted: #17222E;
  --t-border-color-danger: #E51935;
  --t-border-color-blue: #0078BF;
  --t-border-color-transparent-strong: rgba(23, 34, 46, 0.11);

  --t-font-color-primary: #17222E;                /* text */
  --t-font-color-secondary: #5C6B7A;              /* text-muted */
  --t-font-color-tertiary: #67727D;               /* text-faint */
  --t-font-color-light: #67727D;                  /* no lighter Phoenix text role — clamp to faint */
  --t-font-color-extra-light: #8C949C;            /* placeholder/disabled → border-strong */
  --t-font-color-inverted: #FFFFFF;               /* primary-contrast */
  --t-font-color-danger: #E51935;

  /* Elevation: Twenty's fuller scale collapsed onto Phoenix's card / menu tiers
   * (light = card shadow, strong & super-heavy = menu/dialog shadow). */
  --t-box-shadow-color: rgba(23, 34, 46, 0.06);
  --t-box-shadow-light: 0 1px 2px rgba(23, 34, 46, 0.06);
  --t-box-shadow-strong: 0 6px 24px rgba(23, 34, 46, 0.16), 0 1px 3px rgba(23, 34, 46, 0.12);
  --t-box-shadow-super-heavy: 0 6px 24px rgba(23, 34, 46, 0.16), 0 1px 3px rgba(23, 34, 46, 0.12);

  /* Brand blue: 12-step ramp interpolated around the Phoenix anchors — 3 = primary-tint
   * #E4F1FA, 9 = primary #0078BF, 10 = primary-hover #0466A2; the other steps carry over from
   * the 2026-07-11 #0078BF derivation (derived, documented). Twenty resolves BOTH the fixed
   * `--t-color-blue*` scale and the `--t-accent-*` alias layer (the focus ring reads
   * --t-color-blue), so both are set. */
  --t-color-blue: #0078BF;
  --t-color-blue1: #FAFDFF;
  --t-color-blue2: #F2F9FD;
  --t-color-blue3: #E4F1FA;
  --t-color-blue4: #D3EAF7;
  --t-color-blue5: #BFDFF2;
  --t-color-blue6: #A6D2EC;
  --t-color-blue7: #83BFE2;
  --t-color-blue8: #4FA4D4;
  --t-color-blue9: #0078BF;
  --t-color-blue10: #0466A2;
  --t-color-blue11: #00679E;
  --t-color-blue12: #0C3A55;

  --t-accent-accent1: #FAFDFF;
  --t-accent-accent2: #F2F9FD;
  --t-accent-accent3: #E4F1FA;
  --t-accent-accent4: #D3EAF7;
  --t-accent-accent5: #BFDFF2;
  --t-accent-accent6: #A6D2EC;
  --t-accent-accent7: #83BFE2;
  --t-accent-accent8: #4FA4D4;
  --t-accent-accent9: #0078BF;
  --t-accent-accent10: #0466A2;
  --t-accent-accent11: #00679E;
  --t-accent-accent12: #0C3A55;
  /* stock alias mapping: primary/secondary=5, tertiary=3, quaternary=2, 3570/4060=8 */
  --t-accent-primary: #BFDFF2;
  --t-accent-secondary: #BFDFF2;
  --t-accent-tertiary: #E4F1FA;
  --t-accent-quaternary: #F2F9FD;
  --t-accent-accent3570: #4FA4D4;
  --t-accent-accent4060: #4FA4D4;

  --t-buttons-secondary-text-color: #0466A2;      /* primary-hover doubles as the deep accent */
}

/* ── Dark — the same roles, redefined at token level only ─────────────────── */
html.dark {
  color-scheme: dark;

  --t-background-primary: #14202C;                /* surface */
  --t-background-secondary: #1B2937;              /* surface-2 */
  --t-background-tertiary: #0C141D;               /* bg — the canvas recedes, both themes */
  --t-background-quaternary: #22313F;             /* surface-3 */
  --t-background-danger: #3A1219;                 /* danger-tint */
  --t-background-inverted-primary: #E6EDF4;
  --t-background-primary-inverted: #E6EDF4;
  --t-background-inverted-secondary: #9DAEBD;
  --t-background-primary-inverted-hover: #9DAEBD;

  /* Washes: alpha mixes of the dark ink #E6EDF4 (same convention as light). */
  --t-background-transparent-lighter: rgba(230, 237, 244, 0.03);
  --t-background-transparent-light: rgba(230, 237, 244, 0.06);
  --t-background-transparent-medium: rgba(230, 237, 244, 0.11);
  --t-background-transparent-strong: rgba(230, 237, 244, 0.16);
  --t-background-transparent-blue: rgba(58, 160, 228, 0.12);
  --t-background-transparent-success: rgba(70, 192, 126, 0.12);
  --t-background-transparent-orange: rgba(224, 166, 75, 0.12);
  --t-background-transparent-danger: rgba(235, 78, 99, 0.12);

  --t-background-overlay-primary: rgba(2, 6, 10, 0.68);
  --t-background-overlay-secondary: rgba(2, 6, 10, 0.68);
  --t-background-overlay-tertiary: rgba(2, 6, 10, 0.25);

  --t-border-color-strong: #5D6C7A;
  --t-border-color-medium: #273544;
  --t-border-color-light: #22313F;                /* surface-3, same rationale as light */
  --t-border-color-secondary-inverted: #9DAEBD;
  --t-border-color-inverted: #E6EDF4;
  --t-border-color-danger: #EB4E63;
  --t-border-color-blue: #3AA0E4;
  --t-border-color-transparent-strong: rgba(230, 237, 244, 0.11);

  --t-font-color-primary: #E6EDF4;
  --t-font-color-secondary: #9DAEBD;
  --t-font-color-tertiary: #82919F;
  --t-font-color-light: #82919F;
  --t-font-color-extra-light: #5D6C7A;
  --t-font-color-inverted: #06121C;               /* primary-contrast (dark ink on light fills) */
  --t-font-color-danger: #EB4E63;

  /* Dark elevation is heavier, per the skill. */
  --t-box-shadow-color: rgba(0, 0, 0, 0.4);
  --t-box-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.4);
  --t-box-shadow-strong: 0 8px 28px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --t-box-shadow-super-heavy: 0 8px 28px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);

  /* Dark ramp around the Phoenix anchors — 4 = primary-tint #0E3A5C, 9 = primary #3AA0E4,
   * 10 = primary-hover #58B1EC; 11 is the status-palette dark blue text #7FC1F0 (a table value);
   * the rest interpolated (derived, documented). */
  --t-color-blue: #3AA0E4;
  --t-color-blue1: #0D1520;
  --t-color-blue2: #0F1B28;
  --t-color-blue3: #0E2C46;
  --t-color-blue4: #0E3A5C;
  --t-color-blue5: #12466E;
  --t-color-blue6: #175583;
  --t-color-blue7: #1F699D;
  --t-color-blue8: #2A84BE;
  --t-color-blue9: #3AA0E4;
  --t-color-blue10: #58B1EC;
  --t-color-blue11: #7FC1F0;
  --t-color-blue12: #D6EAF9;

  --t-accent-accent1: #0D1520;
  --t-accent-accent2: #0F1B28;
  --t-accent-accent3: #0E2C46;
  --t-accent-accent4: #0E3A5C;
  --t-accent-accent5: #12466E;
  --t-accent-accent6: #175583;
  --t-accent-accent7: #1F699D;
  --t-accent-accent8: #2A84BE;
  --t-accent-accent9: #3AA0E4;
  --t-accent-accent10: #58B1EC;
  --t-accent-accent11: #7FC1F0;
  --t-accent-accent12: #D6EAF9;
  --t-accent-primary: #12466E;
  --t-accent-secondary: #12466E;
  --t-accent-tertiary: #0E2C46;
  --t-accent-quaternary: #0F1B28;
  --t-accent-accent3570: #2A84BE;
  --t-accent-accent4060: #2A84BE;

  --t-buttons-secondary-text-color: #58B1EC;
}

/* ── Two typography defaults on body — the only rules here that are not token overrides.
 * 1. One family carries the UI: Twenty's index.css hardcodes `body{font-family:Inter,sans-serif}`
 *    OUTSIDE the token layer (measured on v2.37.4: the computed body font stayed Inter with every
 *    token overridden), and everything that does not set its own family inherits it. Pointing
 *    body at the token is the inheritance root fixed once; the two literals a stylesheet cannot
 *    reach (BlockNote's `.bn-default-styles` stack, the JS theme fallback) are patched in the
 *    Dockerfile with assertions.
 * 2. Tabular numerals (Phoenix: on anything columnar) — font-variant-numeric does not exist in
 *    Twenty's theme layer, and inheriting it document-wide is the only reach a prebuilt image offers.
 * Both are typography defaults, not component restyles — code/pre keep their mono. */
html.light body, html.dark body {
  font-family: var(--t-font-family);
  font-variant-numeric: tabular-nums;
}