/* ============================================================================
   nkda-theme.css — THE estate definition of light and dark.
   Source of truth for the naked Agility palette in both modes. The design
   skill's tokens/colors.css mirrors these values for mockups; anything that
   RENDERS reads this file, via the estate CSS bundle (assets/estate-css.html).

   Mechanism: Bootstrap 5.3's colour mode. `data-bs-theme` on <html> is the
   reader's mode; a subtree may override it deliberately (the estate bar's
   panel does). There is no second mechanism.

   Selector shape is load-bearing (verified against the shipped Bootstrap
   5.3.3 CSS):
     light: `:root, [data-bs-theme="light"]` — matches Bootstrap line 7
     dark:  `[data-bs-theme="dark"]`         — ANY element, matches line 128
   Dark deliberately does NOT key on :root — a themed subtree inside a light
   page must receive the estate's dark aliases, not Bootstrap's stock ones.
   Because these selectors TIE Bootstrap's own specificity, this file must
   load AFTER Bootstrap's stylesheet: source order decides. Host contract.

   Each mode block sets Bootstrap's variables AND the estate's semantic
   aliases TOGETHER, so the two vocabularies cannot drift apart. One
   selector, one switch, both move.

   Brand axis: `data-nkda-brand` (build-time, from channels.yaml — never a
   reader preference). Deltas override PRIMITIVES only, re-tinting both modes
   from one declaration. The layer ships EMPTY by design: the estate is one
   brand. A channel stylesheet must never define a [data-nkda-brand] block —
   deltas live here, centrally (retired-pattern register: channel-brand-block).
   ========================================================================= */

/* ---- Brand primitives — mode-invariant constants ---- */
:root {
  --nkd-purple: #713183; /* signature brand purple */
  --nkd-purple-light: #8b49a0;
  --nkd-purple-dark: #5a2768; /* derived — hover/press depth */
  --nkd-purple-tint: #dcace8; /* lilac — accent-alt */
  --nkd-purple-tint-light: #eac2f0;
  --nkd-purple-wash: #fbf3fe; /* palest lilac surface wash */

  --nkd-blue: #007acc; /* secondary / links */
  --nkd-blue-light: #3399dd;

  --nkd-orange: #e37f01; /* accent / highlight */
  --nkd-orange-light: #f3952e;

  --nkd-teal: #78c0a8; /* quote rule accent */

  --nkd-ink: #333333; /* body text */
  --nkd-ink-soft: #555555; /* muted / quote text */
  --nkd-white: #ffffff;
  --nkd-grey-50: #f8f9fa; /* muted surface */
  --nkd-grey-100: #ededed; /* quote surface */
  --nkd-grey-500: #54595f; /* secondary band */
  --nkd-grey-700: #43464c; /* menu band */
  --nkd-grey-900: #181818; /* dark page */

  --nkd-purple-on-dark: #9b5baf;
  --nkd-purple-heading-on-dark: #ddade8;
  --nkd-blue-on-dark: #3399dd;
  --nkd-orange-on-dark: #f3952e;
  --nkd-bg-dark: #181818;
  --nkd-bg-dark-alt: #1f1f1f;
  --nkd-surface-dark: #2d2d2d;
  --nkd-ink-on-dark: #f5f5f5;

  /* Environment ribbons (build banners on the live site) */
  --env-development: #008000;
  --env-canary: #b8860b;
  --env-preview: #ff8c00;
}

/* ============================================================================
   LIGHT — the default. Mirrors Bootstrap's own light selector exactly.
   ========================================================================= */
:root,
[data-bs-theme="light"] {
  color-scheme: light;

  /* ---- Bootstrap ---- */
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #333333;
  --bs-body-color-rgb: 51, 51, 51;
  --bs-emphasis-color: #000000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(51, 51, 51, 0.75);
  --bs-secondary-color-rgb: 51, 51, 51;
  --bs-secondary-bg: var(--nkd-grey-50);
  --bs-secondary-bg-rgb: 248, 249, 250;
  --bs-tertiary-color: rgba(51, 51, 51, 0.5);
  --bs-tertiary-color-rgb: 51, 51, 51;
  --bs-tertiary-bg: var(--nkd-grey-100);
  --bs-tertiary-bg-rgb: 237, 237, 237;
  --bs-heading-color: var(--nkd-purple);
  --bs-link-color: var(--nkd-blue);
  --bs-link-color-rgb: 0, 122, 204;
  --bs-link-hover-color: var(--nkd-blue-light);
  --bs-link-hover-color-rgb: 51, 153, 221;
  --bs-border-color: rgba(0, 0, 0, 0.125);
  --bs-primary: var(--nkd-purple);
  --bs-primary-rgb: 113, 49, 131;
  --bs-primary-text-emphasis: var(--nkd-purple-dark);
  --bs-primary-bg-subtle: var(--nkd-purple-wash);
  --bs-primary-border-subtle: var(--nkd-purple-tint);

  /* ---- Estate semantic aliases — reference THESE in components ---- */
  --color-primary: var(--nkd-purple);
  --color-primary-hover: var(--nkd-purple-light);
  --color-primary-active: var(--nkd-purple-dark);
  --color-secondary: var(--nkd-blue);
  --color-secondary-hover: var(--nkd-blue-light);
  --color-accent: var(--nkd-orange);
  --color-accent-hover: var(--nkd-orange-light);

  --text-heading: var(--nkd-purple);
  --text-body: var(--nkd-ink);
  --text-muted: var(--nkd-ink-soft);
  --text-on-primary: var(--nkd-white);
  --text-link: var(--nkd-blue);

  --surface-page: var(--nkd-white);
  --surface-card: var(--nkd-white);
  --surface-muted: var(--nkd-grey-50);
  --surface-quote: var(--nkd-grey-100);
  --surface-callout: var(--nkd-purple-wash);
  --surface-callout-tint: var(--nkd-purple-tint);
  --surface-brand: var(--nkd-purple);

  --border-subtle: rgba(0, 0, 0, 0.125);
  --border-strong: var(--nkd-purple);
  --border-quote: var(--nkd-teal);
}

/* ============================================================================
   DARK — any element, mirroring Bootstrap's own dark selector, so a themed
   subtree (the estate bar panel) gets the estate's dark, not stock dark.
   ========================================================================= */
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* ---- Bootstrap ---- */
  --bs-body-bg: var(--nkd-bg-dark);
  --bs-body-bg-rgb: 24, 24, 24;
  --bs-body-color: var(--nkd-ink-on-dark);
  --bs-body-color-rgb: 245, 245, 245;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(245, 245, 245, 0.75);
  --bs-secondary-color-rgb: 245, 245, 245;
  --bs-secondary-bg: var(--nkd-surface-dark);
  --bs-secondary-bg-rgb: 45, 45, 45;
  --bs-tertiary-color: rgba(245, 245, 245, 0.5);
  --bs-tertiary-color-rgb: 245, 245, 245;
  --bs-tertiary-bg: var(--nkd-bg-dark-alt);
  --bs-tertiary-bg-rgb: 31, 31, 31;
  --bs-heading-color: var(--nkd-purple-heading-on-dark);
  --bs-link-color: #66b3ff;
  --bs-link-color-rgb: 102, 179, 255;
  --bs-link-hover-color: var(--nkd-blue-on-dark);
  --bs-link-hover-color-rgb: 51, 153, 221;
  --bs-border-color: rgba(255, 255, 255, 0.125);
  --bs-primary: var(--nkd-purple-on-dark);
  --bs-primary-rgb: 155, 91, 175;
  --bs-primary-text-emphasis: var(--nkd-purple-heading-on-dark);
  --bs-primary-bg-subtle: #2d2436;
  --bs-primary-border-subtle: var(--nkd-purple-dark);

  /* ---- Estate semantic aliases ---- */
  --color-primary: var(--nkd-purple-on-dark);
  --color-primary-hover: #b27fc2;
  --color-primary-active: var(--nkd-purple);
  --color-secondary: var(--nkd-blue-on-dark);
  --color-secondary-hover: #66b3ff;
  --color-accent: var(--nkd-orange-on-dark);
  --color-accent-hover: #ffb151;

  --text-heading: var(--nkd-purple-heading-on-dark);
  --text-body: var(--nkd-ink-on-dark);
  --text-muted: #b0b0b0;
  --text-on-primary: var(--nkd-white);
  --text-link: #66b3ff;

  --surface-page: var(--nkd-bg-dark);
  --surface-card: var(--nkd-surface-dark);
  --surface-muted: var(--nkd-bg-dark-alt);
  --surface-quote: #333333;
  --surface-callout: #2d2436;
  /* Dark value previously MISSING estate-wide — the light lilac leaked into
     dark pages. The tint steps to the deep-purple callout family. */
  --surface-callout-tint: #3a2d49;
  --surface-brand: var(--nkd-purple);

  --border-subtle: rgba(255, 255, 255, 0.125);
  --border-strong: var(--nkd-purple-on-dark);
  --border-quote: var(--nkd-teal);
}

/* ============================================================================
   Bootstrap component branding — VARIABLES ONLY, the estate way. Bootstrap
   bakes each button variant's colours into --bs-btn-* custom properties on
   the class, so overriding --bs-primary alone never recolours a button; the
   estate maps the variants onto the brand aliases here, ONCE. Because the
   values are aliases, both modes come out right with no dark block. Channels
   use stock Bootstrap markup (.btn btn-primary / btn-light / btn-outline-*)
   and never restyle chrome (retired-pattern register).
   ========================================================================= */
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-color: var(--text-on-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-hover-color: var(--text-on-primary);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-active-color: var(--text-on-primary);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  --bs-btn-disabled-color: var(--text-on-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--text-on-primary);
  --bs-btn-active-bg: var(--color-primary-active);
  --bs-btn-active-border-color: var(--color-primary-active);
  --bs-btn-active-color: var(--text-on-primary);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
}

/* ============================================================================
   BRAND LAYER — ships EMPTY. Ordered after the mode blocks (specificity ties;
   source order decides). A property's delta overrides primitives only:

     [data-nkda-brand="example"] { --nkd-purple: #7a3d92; }
     [data-nkda-brand="example"][data-bs-theme="dark"] { --nkd-purple: #a86ec0; }

   Deltas are authored HERE, never in a channel stylesheet. Using this axis is
   a positioning decision (the estate is one brand), not a technical option to
   fill because it exists.
   ========================================================================= */

/* Fragment references: the shared link hook emits the class; the surrounding
   prose owns colour and weight. Navigation and title hints are native HTML. */
a.nkda-fragment-link,
a.nkda-fragment-link:hover,
a.nkda-fragment-link:visited {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--bs-secondary-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.nkda-link-icon {
  display: inline-block;
  margin-inline-start: 0.2em;
  font-size: 0.55em;
  font-weight: normal;
  color: inherit;
  text-decoration: none;
}
a.nkda-fragment-link:hover,
a.nkda-fragment-link:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}