/*
 * Dataworks Design System — colors & type tokens
 * All values centralised here; consumers use semantic vars, not raw palette.
 */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------------------------------------------------------------
   * COLOR — palette
   * ------------------------------------------------------------ */

  /* Ink — deep neutrals (slightly cool) */
  --ink-950: #0A0E14;   /* primary dark background */
  --ink-900: #10141C;   /* elevated surface on dark */
  --ink-800: #1A1F29;   /* card on dark */
  --ink-700: #242A36;   /* border on dark */
  --ink-600: #3A4150;   /* muted icon on dark */
  --ink-500: #5B6373;   /* body muted on dark */
  --ink-400: #7C8494;   /* secondary text on dark */
  --ink-300: #A2A9B6;   /* tertiary text */
  --ink-200: #C9CDD5;
  --ink-100: #E3E6EB;   /* paper surface on light */
  --ink-050: #F2F4F7;   /* paper background on light */
  --paper:   #FAFBFC;   /* true light background */
  --white:   #FFFFFF;

  /* Signal — single accent, high-contrast cyan */
  --signal-600: #0090B8;
  --signal-500: #00B4E0;   /* primary accent */
  --signal-400: #3DC7EB;
  --signal-300: #7ADAF0;
  --signal-100: #D7F2FA;   /* tinted surface */
  --signal-tint-dark: rgba(0, 180, 224, 0.14);   /* accent tint on dark */

  /* Semantic status — used sparingly (alerts, badges) */
  --success-500: #2BBE7A;
  --warning-500: #F2B33A;
  --danger-500:  #E6524B;

  /* ---------------------------------------------------------------
   * COLOR — semantic (use these, not raw palette)
   * Default = dark mode (primary brand mode)
   * ------------------------------------------------------------ */

  --bg:            var(--ink-950);
  --bg-elevated:   var(--ink-900);
  --surface-1:     var(--ink-900);
  --surface-2:     var(--ink-800);
  --surface-3:     var(--ink-700);

  --fg:            var(--ink-100);
  --fg-muted:      var(--ink-300);
  --fg-subtle:     var(--ink-500);
  --fg-on-accent:  var(--ink-950);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-accent: var(--signal-500);

  --accent:        var(--signal-500);
  --accent-hover:  var(--signal-400);
  --accent-press:  var(--signal-600);
  --accent-tint:   var(--signal-tint-dark);

  --focus-ring:    var(--signal-500);

  /* ---------------------------------------------------------------
   * COLOR — light (paper) mode — used for documents, proposals
   * ------------------------------------------------------------ */

  --paper-bg:        var(--paper);
  --paper-surface-1: var(--white);
  --paper-surface-2: var(--ink-050);
  --paper-fg:        var(--ink-950);
  --paper-fg-muted:  var(--ink-500);
  --paper-border:    rgba(10, 14, 20, 0.08);

  /* ---------------------------------------------------------------
   * TYPE — families
   * ------------------------------------------------------------ */

  --font-display: 'Space Grotesk', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------------------------------------------------------------
   * TYPE — scale (modular, 1.25)
   * ------------------------------------------------------------ */

  --fs-xs:     12px;
  --fs-sm:     14px;
  --fs-base:   16px;
  --fs-md:     18px;
  --fs-lg:     22px;
  --fs-xl:     28px;
  --fs-2xl:    36px;
  --fs-3xl:    48px;
  --fs-4xl:    64px;
  --fs-5xl:    88px;  /* hero */

  /* Line-heights */
  --lh-tight:  1.0;
  --lh-snug:   1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Letter-spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.16em;
  --ls-wordmark: 0.12em;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------------------------------------------------------------
   * SPACING — 4px 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;

  /* ---------------------------------------------------------------
   * RADII
   * ------------------------------------------------------------ */

  --radius-sm:   6px;   /* buttons, inputs, chips */
  --radius-md:  12px;   /* cards, media */
  --radius-lg:  16px;   /* panels */
  --radius-xl:  24px;
  --radius-pill: 999px; /* chips only */

  /* ---------------------------------------------------------------
   * SHADOWS — light-mode only (dark mode uses borders)
   * ------------------------------------------------------------ */

  --shadow-sm: 0 1px 2px rgba(9, 14, 22, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(9, 14, 22, 0.12);
  --shadow-lg: 0 16px 48px -12px rgba(9, 14, 22, 0.24);

  /* ---------------------------------------------------------------
   * MOTION
   * ------------------------------------------------------------ */

  --ease:       cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in:    cubic-bezier(0.4, 0.0, 1, 1);
  --dur-micro:  160ms;
  --dur:        240ms;
  --dur-slow:   400ms;

  /* ---------------------------------------------------------------
   * LAYOUT
   * ------------------------------------------------------------ */

  --container:       1240px;
  --container-prose: 72ch;
  --nav-height:       72px;
}

/* =================================================================
 * SEMANTIC TYPE CLASSES
 * ================================================================= */

.ds-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  font-size: var(--fs-md);
  color: var(--fg);
}

.ds-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.ds-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
}

.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
}

.ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.ds-lede {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.ds-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg);
}

.ds-small {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.ds-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--fg);
}

.ds-stat {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

/* Utility reset so cards render predictably */
.ds-reset, .ds-reset * {
  box-sizing: border-box;
}
.ds-reset {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
}