/* -------------------------------------------------------
   HARBOR-DELTA DESIGN SYSTEM
   delta-base.css  (v1.1)
   Purpose: Global tokens, typography genome, semantic
            palette, identity variables
-------------------------------------------------------- */

/* ------------------------------------------------------------
   COLOR GENOME — DELTA TOKENS
------------------------------------------------------------ */

:root {
  --delta-color-bg: #ffffff;
  --delta-color-fg: #222222;
  --delta-color-border: #dddddd;
  --delta-color-muted: #666666;
}

/* -------------------------------------------------------
   TYPOGRAPHY GENOME
-------------------------------------------------------- */

:root {
  --font-body: "Segoe UI", sans-serif;
  --font-heading: Georgia, serif;

  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
}

:root {
  /* Spacing scale */
  --space-0: 0;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-smmd: 0.75rem;
  --space-md: 1rem;
  --space-md2: 1.25rem;
  --space-mdlg: 1.5rem;
  --space-mdlg2: 1.75rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

/* ---- BRAND TOKENS ---- */

:root {
  --brand-blue: #003366;
  --brand-gold: #d4a43c;
}

/* -------------------------------------------------------
   COLOR SYSTEM (Harbor‑Delta Semantic Palette)
-------------------------------------------------------- */

/* Neutral palette */
:root {
  --neutral-50:  #fafafa;
  --neutral-100: #f0f0f0;
  --neutral-200: #e0e0e0;
  --neutral-300: #c8c8c8;
  --neutral-400: #a0a0a0;
  --neutral-500: #7a7a7a;
  --neutral-600: #555555;
  --neutral-700: #3a3a3a;
  --neutral-800: #222222;
  --neutral-900: #111111;
}

/* Harborbluee palette (deep harbor water) */
:root {
  --harborbluee-50:  #f5f8fc;
  --harborbluee-100: #dce7f5;
  --harborbluee-200: #b8d0eb;
  --harborbluee-300: #8fb6df;
  --harborbluee-400: #5f93ce;
  --harborbluee-500: #1f5fa3; /* primary */
  --harborbluee-600: #184c82;
  --harborbluee-700: #123a63;
  --harborbluee-800: #0c2742;
  --harborbluee-900: #061526;
}

/* DockBlue palette (inlet water) */
:root {
  --dockblue-50:  #f4f7fa;
  --dockblue-500: #2a6fbb;
}

/* --- DELTA HEADER COLORS & FONT --- */
:root {
--surface-1: #eef6ff;   /* light blue */
--surface-2: #dce9f9;   /* slightly darker */
}

:root {
  --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------
   SEMANTIC COLOR MAPPING
-------------------------------------------------------- */

:root {
  --color-background: var(--neutral-50);
  --color-surface: var(--neutral-100);
  --color-divider: var(--neutral-200);

  --color-text: var(--neutral-800);
  --color-text-light: var(--neutral-600);

  --color-primary: var(--harborbluee-500);
  --color-primary-light: var(--harborbluee-300);
  --color-primary-dark: var(--harborbluee-700);

  --color-accent: var(--dockblue-500);
}

/* -------------------------------------------------------
   GLOBAL TOKENS — PAGE WIDTH & LINK HOVER
   (Harbor‑Delta Section Module)
-------------------------------------------------------- */
:root {
  --color-link-hover-strong: #0066cc;
  --width-content: 800px;
}

/* -------------------------------------------------------
   GLOBAL ELEMENT RULES
-------------------------------------------------------- */

body.delta-body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  background: var(--color-background);
  color: var(--color-text);
}

/* Headings */
.delta-body h1,
.delta-body h2,
.delta-body h3 {
  font-family: var(--font-heading);
  color: var(--color-text);
}

/* Links */
.delta-body a {
  color: var(--color-primary);
  transition: color 0.2s ease;
}

.delta-body a:hover {
  color: var(--color-primary-dark);
}

/* Horizontal rule */
.delta-body hr {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin: 2rem 0;
}

/* -------------------------------------------------------
   UTILITY TOKENS
-------------------------------------------------------- */

:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 3px 6px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.14);
}

img {
  border-radius: 16px;
}

/* Radius utilities */
.u-radius--sm {
  border-radius: var(--radius-sm);
}

.u-radius--md {
  border-radius: var(--radius-md);
}

.u-radius--lg {
  border-radius: var(--radius-lg);
}

.article-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-container img {
  margin-left: auto;
  margin-right: auto;
}

.article-container h1,
.article-container h2,
.article-container h3,
.article-container h4,
.article-container h5,
.article-container h6 {
  font-family: var(--delta-heading-font, sans-serif);
}

:root {
  --delta-heading-font: "Segoe UI", sans-serif;
}

.article-container blockquote {
  border-left: 4px solid var(--blockquote-border-color, #ccc);
  padding-left: 1rem;
  margin-left: 0;
  margin-right: 0;
}

[data-article-theme="parchment"] {
  --blockquote-border-color: #bfa77a;
}

[data-article-theme="harborsky"] {
  --blockquote-border-color: #5aa7d8;
}

[data-article-theme="theodock"] {
  --blockquote-border-color: #444;
}