/* Ive — an ink-and-light system for CDS.
   The ground is derived from the CDS wordmark's blue, taken to near-black so it
   reads as ink rather than as a brand wash. One accent, the brand blue itself,
   used as a line and a signal — never as a fill.
   Same variable names as the Nocturne sheet: pages swap by changing one link.
   To retune the whole site to the exact logo blue, change --color-brand. */

:root {
  --color-brand: #4d9be8;             /* the one hue in the system */

  --color-bg: #070b12;
  --color-surface: #101722;
  --color-surface-2: #17202e;         /* nested inside a surface — a card's own rows */
  --color-well: #0b1119;              /* inset below a surface — data panels */
  --color-bg-veil: rgba(7,11,18,0.82);
  --color-bg-veil-strong: rgba(7,11,18,0.9);
  --color-bg-scrim: rgba(7,11,18,0.6);

  --color-text: #eef2f7;              /* cool ivory, never pure white */
  --color-accent: var(--color-brand);
  --color-accent-2: #2b7fd4;
  --color-divider: rgba(238,242,247,0.10);

  /* Cool slate ramp, contrast-checked against the ground. */
  --color-neutral-100: #f7f9fc;
  --color-neutral-200: #e6ebf2;
  --color-neutral-300: #c4cdd9;
  --color-neutral-400: #a3aebd;
  --color-neutral-500: #8b95a3;
  --color-neutral-600: #7c8695;        /* 5.4:1 on --color-bg — floor for small text */
  --color-neutral-700: #5c6675;
  --color-neutral-800: #2e3643;
  --color-neutral-900: #1a2029;

  /* A control's edge must clear 3:1 to exist; a decorative bar must stay quiet
     enough that the lit one still reads. */
  --color-edge: #5c6675;
  --color-bar: #38465a;

  --color-accent-100: #eff7ff;
  --color-accent-200: #d3e8fb;
  --color-accent-300: #8ec5f5;
  --color-accent-400: #4d9be8;
  --color-accent-500: #2b7fd4;
  --color-accent-600: #1f60a4;
  --color-accent-700: #1a4877;
  --color-accent-800: #14283f;
  --color-accent-900: #0e1c2c;

  --color-accent-2-100: #eff7ff;
  --color-accent-2-200: #d3e8fb;
  --color-accent-2-300: #8ec5f5;
  --color-accent-2-400: #4d9be8;
  --color-accent-2-500: #2b7fd4;
  --color-accent-2-600: #1f60a4;
  --color-accent-2-700: #1a4877;
  --color-accent-2-800: #14283f;
  --color-accent-2-900: #0e1c2c;

  /* Presence at page scale comes from a ground that lifts one step and a
     hairline — the eye notices the change, not the colour. */
  --color-section: #0b1220;
  --color-section-glow: #101a2c;
  --color-section-ghost: #16223a;

  /* One ground per portfolio area, at low chroma on the ink base. You should
     feel which area you are in without being told. */
  --color-area-net: #0d1729;
  --color-area-sec: #1b1020;
  --color-area-collab: #0a1a24;
  --color-area-compute: #0b1c1c;
  --color-area-cloud: #131328;
  --color-area-power: #1d1710;

  /* A warm classical serif for the voice, a quiet grotesque for the work.
     Headings sit at 400 — hierarchy is size and space, never weight. */
  --font-heading: "EB Garamond", Georgia, serif;
  --font-heading-weight: 400;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 18px;
  --space-6: 28px;
  --space-8: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Elevation is an edge and the absence of light beneath. Never a stack. */
  --shadow-sm: 0 0 0 1px rgba(238,242,247,0.07);
  --shadow-md: 0 0 0 1px rgba(238,242,247,0.08), 0 30px 70px -24px rgba(0,0,0,0.85);
  --shadow-lg: 0 0 0 1px rgba(238,242,247,0.10), 0 50px 110px -30px rgba(0,0,0,0.9);
}