/* -------------------------------------------------------
   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;
}

/* -------------------------------------------------------
   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;
}

/* -------------------------------------------------------
   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 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);
}