/* -------------------------------------------------------
   HARBOR-DELTA DESIGN SYSTEM
   delta-extensions.css  (v1.1)
   Purpose: Article themes, accent modules, experimental
            overrides, Harborbluee & DockBlue variants
-------------------------------------------------------- */

/* ------------------------------------------------------------
   ARTICLE THEMES — BASE HOOK
   ------------------------------------------------------------ */

.article-container[data-article-theme] {
  --delta-color-fg: #000; /* universal body text color */
  border-left: 4px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

/* ------------------------------------------------------------
   THEME: ALERT  (canvas-matching)
   ------------------------------------------------------------ */

.article-container[data-article-theme="alert"] {
  --delta-color-bg: #ffffff;
  --delta-color-fg: black; /* ALERT is the ONLY theme with its own fg */
  --delta-color-border: rgb(180, 11, 14);

  background: var(--page-canvas-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: SOFTBLUE
   ------------------------------------------------------------ */

.article-container[data-article-theme="softblue"] {
  --delta-color-bg: #f4f8ff;
  --delta-color-border: #bcd3f7;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: GOLD
   ------------------------------------------------------------ */

.article-container[data-article-theme="gold"] {
  --delta-color-bg: #fffdf5;
  --delta-color-border: #e8d48a;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: PARCHMENT
   ------------------------------------------------------------ */

.article-container[data-article-theme="parchment"] {
  --delta-color-bg: #faf6e9;
  --delta-color-border: #d8c9a3;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: RED
   ------------------------------------------------------------ */

.article-container[data-article-theme="red"] {
  --delta-color-bg: #faf6e9;
  --delta-color-border: red;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: OMINOUS
   ------------------------------------------------------------ */

.article-container[data-article-theme="ominous"] {
  --delta-color-bg: #dddfd9;
  --delta-color-border: #000;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* ------------------------------------------------------------
   THEME: NEUTRAL
   ------------------------------------------------------------ */

.article-container[data-article-theme="neutral"] {
  --delta-color-bg: #f8f8f8;
  --delta-color-border: #ccc;

  background: var(--delta-color-bg);
  border-left-color: var(--delta-color-border);
}

/* -------------------------------------------------------
   ARTICLE THEMES
-------------------------------------------------------- */

/* DockBlue Theme (inlet water) */
.article-container.article-dockblue {
  --article-border-color: var(--dockblue-500);
  --article-border-width: 3px;
  --article-bg: var(--dockblue-50);

  --article-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --article-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.10);
  --article-shadow-lg: 0 8px 16px rgba(42, 111, 187, 0.15);

  background: var(--article-bg);
  border: var(--article-border-width) solid var(--article-border-color);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);

  box-shadow:
    var(--article-shadow-sm),
    var(--article-shadow-md),
    var(--article-shadow-lg);
}

.article-container.article-dockblue:hover {
  box-shadow:
    var(--article-shadow-sm),
    var(--article-shadow-md),
    0 12px 24px rgba(42, 111, 187, 0.22);
  transform: translateY(-2px);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Harborbluee Theme (deep harbor water) */
.article-container.article-harborbluee {
  --article-border-color: var(--harborbluee-500);
  --article-border-width: 3px;
  --article-bg: var(--harborbluee-50);

  --article-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --article-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.09);
  --article-shadow-lg: 0 8px 16px rgba(31, 95, 163, 0.18);

  background: var(--article-bg);
  border: var(--article-border-width) solid var(--article-border-color);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);

  box-shadow:
    var(--article-shadow-sm),
    var(--article-shadow-md),
    var(--article-shadow-lg);
}

.article-container.article-harborbluee:hover {
  box-shadow:
    var(--article-shadow-sm),
    var(--article-shadow-md),
    0 12px 24px rgba(31, 95, 163, 0.26);
  transform: translateY(-2px);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* HarborSky Theme (future option) */
.article-container.article-harborsky {
  --article-border-color: var(--harborbluee-300);
  --article-border-width: 2px;
  --article-bg: var(--neutral-50);

  background: var(--article-bg);
  border: var(--article-border-width) solid var(--article-border-color);
  border-radius: var(--radius-md);
  padding: var(--delta-space-5);
}

/* ------------------------------------------------------------
   HARBOR.CSS THEMES — PORTED TO DELTA
   ------------------------------------------------------------ */

/* Border-only themes */
.article-container.article-softblue {
  --article-border-color: #2a6f97;
}

.article-container.article-gold {
  --article-border-color: #c9a227;
}

.article-container.article-green {
  --article-border-color: #0a281b;
  --article-border-width: 2px;
}

.article-container.article-red {
  --article-border-color: #8b0000;
  --article-border-width: 2px;
}

/* Full themes */
.article-container.article-preeminent {
  --article-border-color: #c9a227;
  --article-bg: #f7f2dd;
}

.article-container.article-parchment {
  --article-border-color: #e8dcc7;
  --article-border-width: 3px;
  --article-bg: #fdf8f1;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.article-container.article-escha {
  --article-border-color: #d5802f;
  --article-border-width: 1px;
  --article-bg: #ede8da;
}

.article-container.article-gray {
  --article-border-color: black;
  --article-border-width: 1px;
  --article-bg: #f1f1f1;
}

.article-container.article-ominous {
  --article-border-color: black;
  --article-border-width: 2px;
  --article-bg: #dddfd9;
}

.article-container.article-dockblue {
  --article-border-color: #2a6fbb;
  --article-border-width: 3px;
  --article-bg: #f4f7fa;
}

.article-container.article-wtl {
  --article-border-color: rgb(125, 247, 226);
  --article-bg: black;
  --article-border-width: 4px;
  --article-color: white;
}

.article-container.article-antimatter {
  --article-border-color: #81c1d2;
  --article-bg: black;
  --article-border-width: 4px;
  --article-color: white;
}

.article-container.article-gold-black {
  --article-border-color: #c9a227;
  --article-bg: #f4f7fa;
  --article-border-width: 2px;
}

.article-container.article-pale-loft {
  --article-border-color: grey;
  --article-bg: #ffffff;
  --article-border-width: 1px;
}

/* Full gold theme */
.article-container.article-gold-theme {
  --article-border-color: #c9a227;
  --article-bg: #fffdf5;
}

.article-container.article-gold-theme h1,
.article-container.article-gold-theme h2,
.article-container.article-gold-theme h3 {
  color: #c9a227;
}

.article-container.article-gold-theme hr {
  border-color: #c9a227;
}

.article-container.article-gold-theme strong {
  color: #b8860b;
}

.article-container.article-gold-theme a {
  color: #c9a227;
}

.article-container.article-gold-theme a:hover {
  color: #d4af37;
}

/* VS Series */
.article-container.article-versus {
  --article-border-color: #660000;
  --article-border-width: 2px;
  --article-bg: #f5ecd6;
}

/* -------------------------------------------------------
   ACCENT MODULES
-------------------------------------------------------- */

.delta-accent-blue {
  background: var(--harborbluee-500);
  height: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--delta-space-4);
}

.delta-accent-dock {
  background: var(--dockblue-500);
  height: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--delta-space-4);
}

/* -------------------------------------------------------
   EXPERIMENTAL OVERRIDES
-------------------------------------------------------- */

.delta-soften {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.delta-lift {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------
   FUTURE MODULES PLACEHOLDER
-------------------------------------------------------- */

.delta-future {
  /* Reserved for Harbor‑Delta Prime expansions */
}