/*
 * Knowit brand kit — work item #1 (https://git.ware.fi/mjarvenkyla/the-hub/-/work_items/1).
 *
 * Loaded after the built-in tokens, so everything here wins. Nothing in apps/web/src changes: this is the
 * runtime override path described in docs/THEMING.md, and in OpenShift this file is replaced by
 * mounting the hub-brand ConfigMap over /app/web/dist/brand. The favicon and the sign-in logo are not in
 * the kit: both are uploaded in the admin panel (docs/adr/0019, #121).
 *
 * Palette (Knowit brand guidelines):
 *   Navy #0B0B26 · Cream #FEFBE6 · Links #5E5BFF
 *   Lime #55D340 · Periwinkle #9795FF · Lavender #CFCEFF · Peach #FFD6B8 · Coral #FCB27C
 *
 * Two things the brand kit has to keep (docs/THEMING.md), and how this one keeps them:
 *
 * 1. CONTRAST. Every token that ends up as text clears WCAG AA (4.5:1) on BOTH --hub-bg and
 *    --hub-bg-elevated, in BOTH themes. The ratios below are computed, not estimated, and
 *    apps/web/src/theme/tokens.contrast.test.ts recomputes them from this file on every `pnpm check` —
 *    if a value here is edited to something that fails, the test names the token and the background.
 *
 *    Knowit's accents are built for dark surfaces and most of them cannot carry text on a light one
 *    (Lime 1.87:1, Periwinkle 2.50:1, Peach 1.30:1, Coral 1.71:1, Lavender 1.45:1 on Cream). So the
 *    light theme uses tuned shades of the same hues for text and keeps the raw brand colours for
 *    surfaces, gradients and glows, the way hub-tag.ts already swaps --hub-brand-600/400 per theme.
 *    Dark mode gets the untouched brand palette, which is also Knowit's own default.
 *
 * 2. PLACEHOLDER ART. --hub-placeholder-hue-base moves to the brand hue (241°, Links) so a page of
 *    listings without screenshots sits around the brand rather than spanning the wheel.
 *
 * Typography is deliberately NOT set: [REVIEW 3] on the work item settled on keeping Inter. Bagoss
 * Standard Light is proprietary and no licensed files exist in the brand kit to self-host.
 */

:root {
  /* ─── Surfaces (light) — Knowit Cream ─────────────────────────────────── */
  --hub-bg: #fefbe6;
  --hub-bg-elevated: #ffffff;
  --hub-bg-subtle: #f4f1db;
  --hub-bg-glass: color-mix(in oklab, #fefbe6 72%, transparent);
  --hub-border: #e7e3c6;
  --hub-border-strong: #c9c4a4;

  /* Text. Ratios are against --hub-bg / --hub-bg-elevated. */
  --hub-fg: #0b0b26; /* Navy            18.49 / 19.26 */
  --hub-fg-muted: #4c4c66; /*                  7.96 /  8.29 */
  --hub-fg-subtle: #5a5a75; /* smallest text    6.39 /  6.66 */
  --hub-fg-on-brand: #ffffff; /* on Links #5E5BFF          4.76 */

  /* Brand. Links #5E5BFF carries text on Knowit's own Cream — just. 600 is the headroom. */
  --hub-brand-500: #5e5bff; /* Links            4.56 /  4.76 */
  --hub-brand-600: #4a47d6; /* hover / active   6.37 /  6.64 */
  --hub-brand-400: #9795ff; /* Periwinkle — decorative in light, text in dark */
  --hub-accent-500: #2e7d1e; /* Lime, darkened   4.95 /  5.16 */

  /* Gradients: Knowit's cover gradient runs Lime → Periwinkle. In light it runs between the two
   * text-safe shades of those hues, because --hub-hero-title-gradient paints display TEXT. */
  --hub-brand-gradient: linear-gradient(135deg, #2e7d1e 0%, #4a47d6 100%);
  /* Buttons stay a solid Links fill rather than the gradient: white on #5E5BFF is 4.76:1, white over
   * Lime is 1.95:1. Knowit reserves the bright gradient for covers and section breaks anyway. */
  --hub-btn-primary-bg: var(--hub-brand-500);

  /* Semantic — all ≥4.5:1 on both light surfaces */
  --hub-success: #2e7d1e; /*                  4.95 /  5.16 */
  --hub-warning: #8a4b12; /* Coral, darkened  6.51 /  6.78 */
  --hub-danger: #c42b2b; /*                  5.41 /  5.63 */
  --hub-info: #4a47d6; /*                  6.37 /  6.64 */
  --hub-star: #7a5a00; /*                  6.13 /  6.38 */
  --hub-star-fill: #d2761f; /* large filled glyph only, never text */

  /* Type accents (#247, #276) — non-text, 3:1. Ratios against --hub-bg / --hub-bg-elevated. */
  --hub-type-reference: #c47e49; /* Coral, darkened 3.14 /  3.27 */
  --hub-type-internal: #5e5bff; /* Links            4.56 /  4.76 */
  --hub-type-offering: #2e7d1e; /* Lime, darkened   4.95 /  5.16 */

  /* Placeholder art. A listing with no screenshot gets a generated gradient, and on a catalogue page
   * that artwork is most of what anybody sees — so it echoes Knowit's cover gradient rather than
   * drifting into magenta. The band sits tight around the brand hue (241° = Links, ±18°) and each card's
   * gradient runs from there towards Lime, which is the cover gradient read backwards. */
  --hub-placeholder-hue-base: 241;
  --hub-placeholder-hue-spread: 0.1;
  --hub-placeholder-hue-shift: -110;
}

[data-theme="dark"] {
  /* ─── Surfaces (dark) — Knowit Navy. This is Knowit's default; the guidelines call for dark
   * backgrounds on content and treat the energy saved as a brand value. ─────────────────────── */
  --hub-bg: #0b0b26;
  --hub-bg-elevated: #16162f;
  --hub-bg-subtle: #1f1f3d;
  --hub-bg-glass: color-mix(in oklab, #0b0b26 70%, transparent);
  --hub-border: #262646;
  --hub-border-strong: #3a3a63;

  --hub-fg: #fefbe6; /* Cream           18.49 / 16.94 */
  --hub-fg-muted: #b4b3cc; /*                  9.41 /  8.62 */
  --hub-fg-subtle: #9d9cbb; /* smallest text    7.25 /  6.64 */
  --hub-fg-on-brand: #0b0b26; /* Navy on Periwinkle        7.39 */

  /* The raw brand accents, unmodified — they were designed for exactly this background. */
  --hub-brand-500: #9795ff; /* Periwinkle       7.39 /  6.77 */
  --hub-brand-600: #b6b5ff; /* hover / active  10.13 /  9.28 */
  --hub-brand-400: #cfceff; /* Lavender        12.77 / 11.70 */
  --hub-accent-500: #55d340; /* Lime             9.89 /  9.06 */

  /* Knowit's cover gradient as specified: Lime → Periwinkle, top-left to bottom-right. */
  --hub-brand-gradient: linear-gradient(135deg, #55d340 0%, #9795ff 100%);

  --hub-success: #55d340; /* Lime             9.89 /  9.06 */
  --hub-warning: #fcb27c; /* Coral           10.82 /  9.92 */
  --hub-danger: #ff9a9a; /*                  9.49 /  8.69 */
  --hub-info: #9795ff; /* Periwinkle       7.39 /  6.77 */
  --hub-star: #ffd6b8; /* Peach           14.28 / 13.08 */
  --hub-star-fill: #fcb27c; /* large filled glyph only, never text */

  --hub-type-reference: #fcb27c; /* Coral           10.82 /  9.92 */
  --hub-type-internal: #9795ff; /* Periwinkle       7.39 /  6.77 */
  --hub-type-offering: #55d340; /* Lime             9.89 /  9.06 */
}