/* ============================================================================
   DULAC CONSULTING — DESIGN TOKENS
   colors_and_type.css
   Dark-first, high-contrast engineering brand. Node / connection motif.
   Fonts: Archivo (display), IBM Plex Sans (body), IBM Plex Mono (labels).
   Loaded from Google Fonts CDN — see note in README (no source fonts provided).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- TYPE FAMILIES ---------------------------------------------------- */
  --font-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============================================================
     COLOR — INK (background ramp, deepest → raised surface)
     Near-black, faint cool cast. Never pure #000.
     ============================================================ */
  --ink-900: #06080B;   /* deepest void / behind everything */
  --ink-850: #080B0F;   /* page background */
  --ink-800: #0B0F15;   /* primary surface */
  --ink-700: #0F141C;   /* panel */
  --ink-600: #141B24;   /* card / raised */
  --ink-500: #1A222D;   /* hover surface */
  --ink-400: #212C38;   /* pressed / active surface */

  /* ---- LINES / BORDERS -------------------------------------- */
  --line-1: #1C2632;    /* hairline, subtle dividers */
  --line-2: #2A3744;    /* default border */
  --line-3: #3A4A5A;    /* strong border / focus ring base */

  /* ---- FOREGROUND (text ramp) ------------------------------- */
  --fg-1: #ECF1F6;      /* primary text / headings */
  --fg-2: #A6B4C2;      /* secondary text */
  --fg-3: #6C7A8A;      /* tertiary / captions / muted labels */
  --fg-4: #475360;      /* faint / disabled / placeholder */

  /* ============================================================
     COLOR — SIGNAL (the brand accent: electric lime)
     "Active node." Used sparingly: primary actions, live data,
     highlights, connection lines lighting up.
     ============================================================ */
  --signal:        #C4F24B;   /* primary accent */
  --signal-bright: #D7FF6B;   /* hover / glow peak */
  --signal-dim:    #93B53A;   /* pressed / darker on-accent */
  --signal-ink:    #0B1300;   /* text/icon ON signal fills */
  --signal-08: rgba(196, 242, 75, 0.08);
  --signal-14: rgba(196, 242, 75, 0.14);
  --signal-24: rgba(196, 242, 75, 0.24);

  /* ---- DATA accents (charts / multi-series ONLY) ------------ */
  --data-cyan:   #56D6E6;
  --data-amber:  #F5B642;
  --data-coral:  #FF7A6B;
  --data-violet: #9C8CFF;

  /* ---- SEMANTIC --------------------------------------------- */
  --success: #4FD08A;
  --warning: #F5B642;
  --danger:  #FF6257;
  --info:    #56D6E6;
  --success-bg: rgba(79, 208, 138, 0.12);
  --warning-bg: rgba(245, 182, 66, 0.12);
  --danger-bg:  rgba(255, 98, 87, 0.12);
  --info-bg:    rgba(86, 214, 230, 0.12);

  /* ============================================================
     ELEVATION — on dark, depth = border + faint lift + glow.
     Shadows are subtle; the signal glow marks "live" elements.
     ============================================================ */
  --shadow-e1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-e2: 0 4px 14px rgba(0,0,0,0.45);
  --shadow-e3: 0 18px 48px rgba(0,0,0,0.55);
  --glow-signal: 0 0 0 1px var(--signal-24), 0 0 24px -4px rgba(196,242,75,0.45);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,0.04);   /* top highlight on cards */

  /* ---- RADII (precise / engineering — kept tight) ----------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---- SPACING (4px base grid) ------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- MOTION ----------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */ /* default, decisive */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  /* ---- GRID / MOTIF helpers --------------------------------- */
  --grid-line: rgba(255,255,255,0.035);   /* blueprint grid */
  --node-dot:  rgba(196,242,75,0.55);

  /* ============================================================
     SEMANTIC TYPE TOKENS
     size / line-height / weight / tracking per role.
     ============================================================ */
  --display-font: var(--font-display);
  --display-size: clamp(48px, 7vw, 92px);
  --display-weight: 600;
  --display-tracking: -0.03em;
  --display-leading: 0.98;

  --h1-size: clamp(36px, 4.6vw, 60px);
  --h1-weight: 600;
  --h1-tracking: -0.025em;
  --h1-leading: 1.02;

  --h2-size: clamp(28px, 3.2vw, 40px);
  --h2-weight: 600;
  --h2-tracking: -0.02em;
  --h2-leading: 1.08;

  --h3-size: 24px;
  --h3-weight: 600;
  --h3-tracking: -0.015em;
  --h3-leading: 1.15;

  --h4-size: 18px;
  --h4-weight: 600;
  --h4-tracking: -0.01em;
  --h4-leading: 1.25;

  --body-lg-size: 19px;
  --body-lg-leading: 1.6;
  --body-size: 16px;
  --body-leading: 1.6;
  --body-sm-size: 14px;
  --body-sm-leading: 1.55;

  --label-size: 13px;
  --label-weight: 500;
  --label-tracking: 0.02em;

  --eyebrow-size: 12px;
  --eyebrow-weight: 500;
  --eyebrow-tracking: 0.18em;      /* uppercase mono kicker */

  --mono-size: 13px;
  --caption-size: 12px;
}

/* ============================================================================
   BASE ELEMENT STYLES (semantic classes usable directly)
   ============================================================================ */

.dulac-display {
  font-family: var(--display-font);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: var(--display-leading);
  color: var(--fg-1);
}

.dulac-h1 { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-tracking); line-height: var(--h1-leading); color: var(--fg-1); }
.dulac-h2 { font-family: var(--font-display); font-size: var(--h2-size); font-weight: var(--h2-weight); letter-spacing: var(--h2-tracking); line-height: var(--h2-leading); color: var(--fg-1); }
.dulac-h3 { font-family: var(--font-display); font-size: var(--h3-size); font-weight: var(--h3-weight); letter-spacing: var(--h3-tracking); line-height: var(--h3-leading); color: var(--fg-1); }
.dulac-h4 { font-family: var(--font-display); font-size: var(--h4-size); font-weight: var(--h4-weight); letter-spacing: var(--h4-tracking); line-height: var(--h4-leading); color: var(--fg-1); }

.dulac-body-lg { font-family: var(--font-body); font-size: var(--body-lg-size); line-height: var(--body-lg-leading); color: var(--fg-2); }
.dulac-body    { font-family: var(--font-body); font-size: var(--body-size);    line-height: var(--body-leading);    color: var(--fg-2); }
.dulac-body-sm { font-family: var(--font-body); font-size: var(--body-sm-size); line-height: var(--body-sm-leading); color: var(--fg-2); }

.dulac-label   { font-family: var(--font-body); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-tracking); color: var(--fg-2); }

.dulac-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--signal);
}

.dulac-mono    { font-family: var(--font-mono); font-size: var(--mono-size); color: var(--fg-2); }
.dulac-caption { font-family: var(--font-mono); font-size: var(--caption-size); letter-spacing: 0.04em; color: var(--fg-3); }

/* utility: signal glow text */
.dulac-signal { color: var(--signal); }