/* ============================================================
   Aiyarise Utility Register · Product Style Layer v1.4
   Drop-in tokens + base classes for app/dashboard surfaces.
   Source of truth: references/register-spec.md
   v1.4: dark theme is standard; tabs, filters and view toggles
   are solid pills; density and theme live in a preferences popover.
   ============================================================ */

:root {
  color-scheme: light;

  /* Surfaces */
  --aiy-page: #f4f3f0;              /* flat page ground, never a gradient */
  --aiy-card: #ffffff;
  --aiy-card-hover: #fffdf9;        /* warm hover tint */
  --aiy-inset: #fbfaf8;             /* table headers, search ground */
  --aiy-bar-dark: #0f191a;          /* bulk bar */
  --aiy-rail: linear-gradient(135deg, #171818 0%, #0a0a0a 100%);

  /* Ink */
  --aiy-ink: #0f191a;
  --aiy-ink-85: rgba(15, 25, 26, .85);
  --aiy-ink-70: rgba(15, 25, 26, .70);
  --aiy-ink-60: rgba(15, 25, 26, .60);
  --aiy-ink-50: rgba(15, 25, 26, .50);
  --aiy-ink-45: rgba(15, 25, 26, .45);
  --aiy-ink-40: rgba(15, 25, 26, .40);
  --aiy-ink-35: rgba(15, 25, 26, .35);
  --aiy-ink-30: rgba(15, 25, 26, .30);
  --aiy-hairline-strong: rgba(15, 25, 26, .20);  /* control borders · v1.1 */
  --aiy-hairline: rgba(15, 25, 26, .16);          /* card borders · v1.1 */
  --aiy-hairline-soft: rgba(15, 25, 26, .09);     /* internal dividers · v1.1 */
  --aiy-chip-border: rgba(15, 25, 26, .14);
  --aiy-cbox: rgba(15, 25, 26, .25);              /* checkbox border */
  --aiy-track: rgba(15, 25, 26, .07);             /* chart/progress grounds */
  --aiy-scrim: rgba(15, 25, 26, .18);
  --aiy-hover: rgba(218, 184, 136, .16);          /* v1.1 contrast hover (rows) */
  --aiy-row-hover: rgba(218, 184, 136, .16);
  --aiy-hover-border: rgba(115, 84, 51, .55);     /* v1.1 hoverable-card line */
  --aiy-kpi-hover: rgba(115, 84, 51, .45);

  /* Brand chroma. Text bronze and fill bronze part ways in dark mode. */
  --aiy-bronze: #735433;                       /* eyebrows, links, chart highlight */
  --aiy-bronze-solid: #735433;                 /* button, tab and pill fills, white text */
  --aiy-bronze-light: #dab888;                 /* dark-rail accents, selection */
  --aiy-bronze-hover: rgba(115, 84, 51, .5);   /* hover border */
  --aiy-bronze-fill: rgba(115, 84, 51, .07);   /* max chart area fill */
  --aiy-bronze-hairline: rgba(218, 184, 136, .28); /* above Playfair passages */
  --aiy-selection-ink: #1a1208;

  /* The urgency exception · at most one urgent element per screen */
  --aiy-urgent: #1e5eff;
  --aiy-urgent-border: rgba(30, 94, 255, .45);
  --aiy-banner-hover: #f7f9ff;

  /* Destructive (dark bulk bar only) */
  --aiy-destructive: rgba(201, 122, 107, .95);
  --aiy-slate: #5c6360;
  --aiy-danger: #b4553f;

  /* Fills stay dark under white text in both themes; never reuse --aiy-ink as a background */
  --aiy-fill-ink: #0f191a;
  --aiy-fill-slate: #5c6360;
  --aiy-fill-unset: #7d8583;
  --aiy-fill-due: #34464a;

  /* Chart palette, read by scripts once per render */
  --aiy-chart-mid: rgba(15, 25, 26, .5);
  --aiy-chart-muted: rgba(15, 25, 26, .28);
  --aiy-chart-faint: rgba(15, 25, 26, .07);
  --aiy-axis: rgba(15, 25, 26, .45);

  /* State language · solid pills with white text since v1.3 */
  --aiy-state-process: #3f6d75;   /* In Process */
  --aiy-state-blocked: #b4553f;   /* Blocked */
  --aiy-state-pending: #8a6a3f;   /* Pending */
  --aiy-state-complete: #4f6b4a;  /* Complete */
  --aiy-state-done: #5c6360;      /* Done */

  /* Stage hues (pipelines) */
  --aiy-stage-lead: #7d8583;      /* v1.3: deep enough to carry white text */
  --aiy-stage-discovery: #617d83;
  --aiy-stage-proposal: #3f6d75;
  --aiy-stage-negotiation: #8a6a3f;
  --aiy-stage-won: #4f6b4a;
  --aiy-stage-lost: #b4553f;

  /* Avatar grounds */
  --aiy-avatar: linear-gradient(135deg, #858585 0%, #171818 100%);
  --aiy-avatar-self: linear-gradient(135deg, #617d83 0%, #0f191a 100%);

  /* Type */
  --aiy-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --aiy-body: 'Inter', system-ui, sans-serif;
  --aiy-serif: 'Playfair Display', Georgia, serif;
  --aiy-mono: ui-monospace, Menlo, monospace;

  /* Geometry */
  --aiy-radius: 5px;        /* every surface and chip */
  --aiy-radius-inner: 4px;  /* kbd, checkbox, segmented active */
  --aiy-rail-w: 224px;
  --aiy-header-h: 56px;
  --aiy-grow-t: 160ms cubic-bezier(.16, 1, .3, 1);

  /* Density (set on <html> by the preferences popover: [data-density="airy"|"dense"]) */
  --aiy-row-pad: 12px;      /* balanced */
}

/* v1.4 · dark theme. The rail, avatars, state dots and stage hues do not change. */
html[data-theme="dark"] {
  color-scheme: dark;
  --aiy-page: #101213;
  --aiy-card: #191c1d;
  --aiy-card-hover: #1f2325;
  --aiy-inset: #15181a;
  --aiy-bar-dark: #0b0d0e;
  --aiy-ink: rgba(255, 255, 255, .92);
  --aiy-ink-85: rgba(255, 255, 255, .85);
  --aiy-ink-70: rgba(255, 255, 255, .70);
  --aiy-ink-60: rgba(255, 255, 255, .60);
  --aiy-ink-50: rgba(255, 255, 255, .50);
  --aiy-ink-45: rgba(255, 255, 255, .45);
  --aiy-ink-40: rgba(255, 255, 255, .40);
  --aiy-ink-35: rgba(255, 255, 255, .35);
  --aiy-ink-30: rgba(255, 255, 255, .30);
  --aiy-hairline-strong: rgba(255, 255, 255, .24);
  --aiy-hairline: rgba(255, 255, 255, .16);
  --aiy-hairline-soft: rgba(255, 255, 255, .09);
  --aiy-chip-border: rgba(255, 255, 255, .18);
  --aiy-cbox: rgba(255, 255, 255, .30);
  --aiy-track: rgba(255, 255, 255, .08);
  --aiy-scrim: rgba(0, 0, 0, .45);
  --aiy-hover: rgba(218, 184, 136, .10);
  --aiy-row-hover: rgba(218, 184, 136, .10);
  --aiy-hover-border: rgba(218, 184, 136, .55);
  --aiy-kpi-hover: rgba(218, 184, 136, .45);
  --aiy-bronze: #dab888;                 /* text, eyebrows, links, accents */
  --aiy-bronze-solid: #7d5c3a;           /* button and tab fills, white text */
  --aiy-bronze-hover: rgba(218, 184, 136, .55);
  --aiy-bronze-fill: rgba(218, 184, 136, .09);
  --aiy-bronze-hairline: rgba(218, 184, 136, .32);
  --aiy-urgent: #5082ff;
  --aiy-urgent-border: rgba(80, 130, 255, .5);
  --aiy-banner-hover: rgba(80, 130, 255, .08);
  --aiy-slate: #656c69;
  --aiy-danger: #c4674f;
  --aiy-fill-ink: #2b3335;
  --aiy-fill-slate: #3d4547;
  --aiy-fill-unset: #556063;
  --aiy-fill-due: #3d5157;
  --aiy-chart-mid: rgba(255, 255, 255, .5);
  --aiy-chart-muted: rgba(255, 255, 255, .28);
  --aiy-chart-faint: rgba(255, 255, 255, .08);
  --aiy-axis: rgba(255, 255, 255, .45);
}

[data-density="airy"]  { --aiy-row-pad: 18px; }
[data-density="dense"] { --aiy-row-pad: 7px; }

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--aiy-page);
  font-family: var(--aiy-body);
  font-weight: 300;
  color: var(--aiy-ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--aiy-bronze); text-decoration: none; }
a:hover { color: var(--aiy-ink); }
::selection { background: var(--aiy-bronze-light); color: var(--aiy-selection-ink); }
em { font-family: var(--aiy-serif); font-style: italic; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--aiy-hairline-strong); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Base classes (optional; the register also works inline) ---- */

.aiy-card {
  background: var(--aiy-card);
  border: 1px solid var(--aiy-hairline);
  border-radius: var(--aiy-radius);
  outline: 1px solid transparent;
  outline-offset: -2px;
  transition: border-color 200ms, outline-color 200ms;
  /* no shadow, no backdrop-filter, ever */
}
/* v1.1 · interactive cards announce themselves: bronze double-line, no layout shift */
.aiy-card-hoverable:hover {
  border-color: var(--aiy-hover-border);
  outline-color: var(--aiy-hover-border);
  background: var(--aiy-card-hover);
}

.aiy-eyebrow {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aiy-bronze);
}

.aiy-colhead {
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aiy-ink-50);
}

.aiy-title {
  font-family: var(--aiy-display);
  font-weight: 100;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.1;
}

.aiy-kpi {
  font-family: var(--aiy-display);
  font-weight: 100;
  font-size: 34px;
  letter-spacing: .02em;
  line-height: 1;
}

.aiy-mono { font-family: var(--aiy-mono); }

/* v1.3: chips are solid pills with white text; the fill carries the state colour */
.aiy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: var(--aiy-fill-slate);
  color: #fff;
  border-radius: var(--aiy-radius);
  padding: 5px 9px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* v1.3: every button is a solid fill with white text; hover magnifies, never recolors. */
.aiy-cta, .aiy-btn {
  border: 0;
  color: #fff;
  background: var(--aiy-bronze-solid);
  border-radius: var(--aiy-radius);
  padding: 7px 13px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  display: inline-block;
  transition: transform var(--aiy-grow-t);
}
.aiy-cta:hover, .aiy-btn:hover { transform: scale(1.06); }
.aiy-cta:active, .aiy-btn:active { transform: scale(1); }
.aiy-btn.secondary { background: var(--aiy-fill-ink); }
.aiy-btn.quiet { background: var(--aiy-fill-slate); }
.aiy-btn.destructive { background: var(--aiy-danger); }
.aiy-cta[disabled], .aiy-btn[disabled] { opacity: .4; cursor: default; transform: none; }

/* v1.4 · tabs, filter pills and view toggles are solid pills too */
.aiy-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: var(--aiy-radius); padding: 6px 11px;
  background: var(--aiy-fill-slate); color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: transform var(--aiy-grow-t);
}
.aiy-tab.ink { background: var(--aiy-fill-ink); }
.aiy-tab.on { background: var(--aiy-bronze-solid); }
.aiy-tab .n { font-family: var(--aiy-mono); font-size: 10px; color: rgba(255, 255, 255, .7); }
.aiy-tab:hover { transform: scale(1.06); }
.aiy-filter {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: var(--aiy-radius); padding: 6px 9px 6px 10px;
  background: var(--aiy-fill-ink); color: #fff; font-size: 11px;
  cursor: pointer; white-space: nowrap; user-select: none; color-scheme: dark;
  transition: transform var(--aiy-grow-t);
}
.aiy-filter .k { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.aiy-filter select { border: 0; background: transparent; outline: 0; color: #fff; font-size: 11px; cursor: pointer; }
.aiy-filter.on { background: var(--aiy-bronze-solid); }
.aiy-filter:hover { transform: scale(1.06); }
.aiy-vtoggle { display: inline-flex; gap: 3px; }
.aiy-vtoggle span {
  padding: 6px 11px; border-radius: var(--aiy-radius); background: var(--aiy-fill-slate); color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  user-select: none; transition: transform var(--aiy-grow-t);
}
.aiy-vtoggle span:hover { transform: scale(1.06); }
.aiy-vtoggle span.on { background: var(--aiy-bronze-solid); }

/* v1.4 · preferences popover, anchored above the rail foot (the rail is position: relative) */
.aiy-prefs {
  position: absolute; left: 12px; bottom: 78px; width: 200px;
  background: #0f191a; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--aiy-radius);
  padding: 12px; display: none; z-index: 30; color-scheme: dark;
}
.aiy-prefs.open { display: block; }
.aiy-prefs .row { display: flex; flex-direction: column; gap: 7px; padding: 7px 0; }
.aiy-prefs .row + .row { border-top: 1px solid rgba(255, 255, 255, .07); }
.aiy-prefs .lbl { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.aiy-prefs .who { font-size: 12px; color: rgba(255, 255, 255, .85); }
.aiy-prefs .mode { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(218, 184, 136, .65); }
.aiy-seg { display: flex; gap: 3px; }
.aiy-seg span {
  flex: 1; text-align: center; padding: 5px 4px; border-radius: var(--aiy-radius);
  background: #2b3335; color: #fff; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; user-select: none; transition: transform var(--aiy-grow-t);
}
.aiy-seg span:hover { transform: scale(1.06); }
.aiy-seg span.on { background: var(--aiy-bronze-solid); }

.aiy-interpret {
  border-top: 1px solid var(--aiy-bronze-hairline);
  padding-top: 12px;
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--aiy-ink-60);
}