/* Traktara app — tokens + typography (subset of design system; flat product UI, no marketing hero). */

/* Self-hosted fonts (see fonts.css) — no third-party CDN, so CSP stays 'self'. */
@import url("./fonts.css");

:root {
  --clay: #a0533a;
  --clay-deep: #7a3f2c;
  --clay-soft: #e8d2c7;
  --clay-wash: #f4e5dd;

  --paper: #ececea;
  --paper-2: #e2e2df;
  --paper-3: #d6d5d1;
  --paper-4: #ffffff;

  --rail: #f4f4f2;

  --ink: #1a1a17;
  --ink-2: #3a3a35;
  --ink-3: #65645e;
  --ink-4: #8e8c85;

  --hairline: #c9c8c3;
  --divider: #b0aea8;

  /* Explicitly selected Other object identity, including inert entity headers. */
  --other-object-bg: var(--rail);
  --other-object-fg: var(--ink);
  --other-object-border: color-mix(in srgb, var(--ink-4) 80%, var(--rail));
  --other-object-border-width: 1px;

  /* Organisation identity — the muted blue every organisation badge wears, and
     the Organisations register's own badge (nav, breadcrumb) with it. */
  --organisation-bg: #e4ecf6;
  --organisation-fg: #24486e;
  --organisation-border: rgba(45, 90, 140, 0.24);

  --moss-tint-bg: #dee6cf;
  --moss-tint-fg: #34471f;
  --amber-tint-bg: #f1e5c7;
  --amber-tint-fg: #6e4e10;
  --slate-tint-bg: #d8dee5;
  --slate-tint-fg: #2a3845;
  --blue-tint-bg: #d8e8f4;
  --blue-tint-fg: #153c5c;
  --purple-tint-bg: #e8e2f0;
  --purple-tint-fg: #452463;
  --brick-tint-bg: #f4d8d2;
  --brick-tint-fg: #6e2418;
  /* Orange — at-risk / delay (TRA-116 risk axis). A warning hue between amber
     (pending) and brick (stopped), so "delay risk" reads distinctly from both. */
  --orange-tint-bg: #f0d9b8;
  --orange-tint-fg: #8a4f12;
  /* Source publisher hues (TRA-378). Extend the tint set so every publisher gets
     its own distinct badge — teal, rose and indigo join blue/slate/purple/moss.
     Amber stays reserved for Companies; orange/brick are status-only, so source
     badges avoid them. Kept in the same muted register as the tints above. */
  --teal-tint-bg: #cfe4df;
  --teal-tint-fg: #235049;
  --rose-tint-bg: #f1d9e0;
  --rose-tint-fg: #7c2f49;
  --indigo-tint-bg: #dcdcf3;
  --indigo-tint-fg: #34356f;

  /* Status — withdrawn / unknown / N/A (from mockup design-system) */
  --status-grey-bg: #d6d5d1;
  --status-grey-fg: #65645e;

  /* clay extras used by pills (netco chip) */
  --clay-shade: #8c4831;

  /* Source-vs-Traktara scope colours — clay = Traktara (resolved) value, blue =
     source value, grey = pass-through. Ported from the mockup's field-scope.css.
     The dense /changes feed shows just the resolved change (no bars); these are
     kept for the record's two-column Changes detail (TRA-41). */
  --scope-bar-tt: var(--clay);
  --scope-bar-source: #2f5fe0;
  --scope-bar-both: var(--hairline);

  /* Technology palette — quiet, never UI status. Ported from the mockup's
     design-system/colors_and_type.css + pills.css. bg/fg pairs per fuel. */
  --tech-bess-bg: #d2dbe0;          --tech-bess-fg: #5c6f7a;
  --tech-solar-bg: #f0e3c0;         --tech-solar-fg: #c18a2c;
  --tech-wind-onshore-bg: #daeacd;  --tech-wind-onshore-fg: #7e9a6a;
  --tech-wind-offshore-bg: #d4e6dc; --tech-wind-offshore-fg: #5f8470;
  --tech-hydro-bg: #d3e1ec;         --tech-hydro-fg: #5e7e96;
  --tech-pumped-hydro-bg: #cce0ec;  --tech-pumped-hydro-fg: #4a6a82;
  --tech-hydrogen-bg: #e0dbec;      --tech-hydrogen-fg: #8a82a0;
  --tech-gas-bg: #eae3d8;           --tech-gas-fg: #8a7e6e;
  --tech-nuclear-bg: #d6d5d1;       --tech-nuclear-fg: #65645e;
  --tech-biomass-bg: #e5dccb;       --tech-biomass-fg: #8c7a4a;
  --tech-efw-bg: #ead9d2;           --tech-efw-fg: #8c6b5a;
  --tech-interconnect-bg: #d8dee5;  --tech-interconnect-fg: #3f5364;
  --tech-other-bg: #d6d5d1;         --tech-other-fg: #65645e;

  /* Source/entity chip hues — Companies House yellow + developer teal */
  --src-ch-bg: #f3ead0;   --src-ch-fg: #6e5410;
  --src-dev-bg: #d6e6e2;  --src-dev-fg: #2c5550;

  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-link: var(--clay);
  --fg-link-hover: var(--clay-deep);
  /* External website links in record details. */
  --fg-web-link: #2456b8;
  --bg-page: var(--paper);
  --bg-surface: var(--paper-4);
  --bg-sunken: var(--paper-2);
  --bg-elevated: var(--paper-4);

  --font-slab: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --shadow-card: 0 1px 2px rgba(26, 26, 23, 0.06);
  --shadow-raised: 0 1px 2px rgba(26, 26, 23, 0.05), 0 2px 6px rgba(26, 26, 23, 0.06);
  --focus-ring: 0 0 0 3px rgba(160, 83, 58, 0.28);
}

body.dashboard-body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

body.dashboard-body .ui-bg-page {
  background: var(--bg-page);
}

body.dashboard-body .ui-bg-surface {
  background: var(--bg-surface);
}

body.dashboard-body .ui-bg-sunken {
  background: var(--bg-sunken);
}

body.dashboard-body .ui-bg-rail {
  background: var(--paper);
}

body.dashboard-body .ui-border-hairline {
  border-color: var(--hairline);
}

body.dashboard-body .ui-border-divider {
  border-color: var(--divider);
}

body.dashboard-body .ui-text-fg-1 {
  color: var(--fg-1);
}

body.dashboard-body .ui-text-fg-2 {
  color: var(--fg-2);
}

body.dashboard-body .ui-text-fg-3 {
  color: var(--fg-3);
}

body.dashboard-body .ui-text-muted {
  color: var(--ink-4);
}

body.dashboard-body .ui-nav-hover:hover {
  background: var(--paper-2);
}

body.dashboard-body a.ui-nav-link {
  color: var(--fg-3);
}

body.dashboard-body a.ui-nav-link:hover {
  color: var(--fg-1);
}

body.dashboard-body a.ui-nav-link svg {
  color: var(--ink-4);
}

body.dashboard-body a.ui-nav-link:hover svg {
  color: var(--fg-2);
}

body.dashboard-body .ui-shadow-card {
  box-shadow: var(--shadow-card);
}

body.dashboard-body .ui-shadow-raised {
  box-shadow: var(--shadow-raised);
}

/* Wordmark — slab + lowercase voice */
.wordmark {
  font-family: var(--font-slab);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  text-transform: lowercase;
}

/* Product surface titles — sans, not slab (per canon) */
.product-page-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.nav-section-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

body.dashboard-body code,
body.dashboard-body .font-mono {
  font-family: var(--font-mono);
}

/* Logo mark — clay carries identity */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-md, 6px);
  background: var(--clay);
  color: #ECECEA;
  font-family: var(--font-slab);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -1.1px;
  padding-bottom: 1px;
}

/* Source / badge chip. The colours are not defined in CSS: they come from the
   platform contract (one bg/fg hex pair per publisher, config/publishers.yaml
   in the data platform — TRA-378) and arrive as inline --pill-bg / --pill-fg
   custom properties (pillVars() in the frontend, pill_style in Jinja). The
   ring derives from the text colour. */
.pill-src {
  background: var(--pill-bg);
  color: var(--pill-fg);
  box-shadow: inset 0 0 0 var(--pill-border-width, 1px) var(--pill-border, color-mix(in srgb, var(--pill-fg) 12%, transparent));
}

.pill-clay-wash {
  background: var(--clay-wash);
  color: var(--clay-deep);
  box-shadow: inset 0 0 0 1px rgba(160, 83, 58, 0.18);
}

.pill-active-ring {
  box-shadow:
    inset 0 0 0 1px rgba(26, 26, 23, 0.12),
    0 0 0 2px rgba(26, 26, 23, 0.1);
}

/* ID / code cells */
.chip-id {
  display: inline-flex;
  max-width: 100%;
  border-radius: var(--r-sm, 4px);
  padding: 0.125rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  background: var(--slate-tint-bg);
  color: var(--slate-tint-fg);
  box-shadow: inset 0 0 0 1px rgba(42, 56, 69, 0.15);
}

/* Alert — brick tint, not generic red-50 */
.alert-error {
  border: 1px solid rgba(138, 46, 31, 0.35);
  background: var(--brick-tint-bg);
  color: var(--brick-tint-fg);
}

/* Avoid global link chrome breaking dense UI */
body.dashboard-body a {
  text-decoration: none;
}

body.dashboard-body a.ui-text-link {
  color: var(--fg-link);
}

body.dashboard-body a.ui-text-link:hover {
  color: var(--fg-link-hover);
}

body.dashboard-body :focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}