/* ─────────────────────────────────────────────────────────────
   DrillSense Design System · Core Tokens
   Industrial Precision. Dark-first. Data is the hero.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Neutral / Gray ramp (14 steps · 00 white → 14 black) */
  --ds-gray-00: #ffffff;
  --ds-gray-01: #f5f5f5;
  --ds-gray-02: #e8e8e8;
  --ds-gray-03: #dbdbdb;
  --ds-gray-04: #c1c1c1;
  --ds-gray-05: #a8a8a8;
  --ds-gray-06: #8e8e8e;
  --ds-gray-07: #6b6b6b;  /* primary mid · AA 4.5 on white */
  --ds-gray-08: #5d5d5e;
  --ds-gray-09: #444547;
  --ds-gray-10: #333333;
  --ds-gray-11: #262626;
  --ds-gray-12: #181818;
  --ds-gray-13: #111111;
  --ds-gray-14: #000000;

  /* ── Primary / Blue (brand) */
  --ds-blue-00: #f5fbfd;
  --ds-blue-01: #e5f2f7;
  --ds-blue-02: #cce5ef;
  --ds-blue-03: #b2d8e7;
  --ds-blue-04: #80bed7;
  --ds-blue-05: #3398c0;
  --ds-blue-06: #3398c0;
  --ds-blue-07: #007eb0;
  --ds-blue-08: #007eb0;  /* primary action */
  --ds-blue-09: #006699;
  --ds-blue-10: #004e82;
  --ds-blue-11: #003e6a;
  --ds-blue-12: #072d51;
  --ds-blue-13: #071c3c;
  --ds-blue-14: #000714;

  /* ── Indigo */
  --ds-indigo-07: #4272d7;
  --ds-indigo-08: #3f52b5;
  --ds-indigo-09: #2d3f94;

  /* ── Semantic */
  --ds-green-06: #40c080;
  --ds-green-07: #2ca96b;
  --ds-green-08: #007d00;
  --ds-green-09: #00631a;

  --ds-red-06: #e34f4f;
  --ds-red-07: #dd2e43;
  --ds-red-08: #c54600;  /* warning / orange-red */
  --ds-red-09: #ac0015;
  --ds-red-10: #851f41;

  --ds-yellow-07: #f4d145;
  --ds-yellow-08: #eea339;
  --ds-yellow-09: #fbaf29;

  /* ── Semantic intent (dark-first defaults) */
  --ds-bg:        var(--ds-gray-13);   /* #111 app backdrop */
  --ds-bg-raised: var(--ds-gray-12);   /* #181818 panel */
  --ds-bg-sunken: var(--ds-gray-14);   /* #000 */
  --ds-surface:   var(--ds-gray-11);   /* #262626 card */
  --ds-surface-2: #1b1b1b;
  --ds-border:    rgba(255, 255, 255, 0.08);
  --ds-border-strong: rgba(255, 255, 255, 0.16);

  --ds-fg:        var(--ds-gray-01);   /* #f5f5f5 primary text */
  --ds-fg-muted:  #a8a8a8;
  --ds-fg-subtle: #6b6b6b;
  --ds-fg-inv:    var(--ds-gray-13);

  --ds-accent:       var(--ds-blue-07); /* #00adf1 data-glow */
  --ds-accent-hover: var(--ds-blue-08);
  --ds-accent-press: var(--ds-blue-10);
  --ds-accent-soft:  rgba(0, 126, 176, 0.12);

  --ds-success: #13864a;
  --ds-warning: #b35f00;
  --ds-danger:  #dd2e43;
  --ds-info:    var(--ds-blue-07);

  /* ── Light mode token overrides */
  --ds-light-bg:     #ffffff;
  --ds-light-surface:#f5f5f5;
  --ds-light-border: #e8e8e8;
  --ds-light-fg:     #111111;
  --ds-light-fg-muted: #6b6b6b;

  /* ── Type */
  --ds-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ds-font-mono: "Roboto Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Scale (from Figma CORE-Typography) */
  --ds-fs-4xl: 44px;  --ds-lh-4xl: 48px;
  --ds-fs-3xl: 36px;  --ds-lh-3xl: 40px;
  --ds-fs-2xl: 30px;  --ds-lh-2xl: 36px;
  --ds-fs-xl:  24px;  --ds-lh-xl:  32px;
  --ds-fs-lg:  20px;  --ds-lh-lg:  28px;
  --ds-fs-md:  18px;  --ds-lh-md:  28px;
  --ds-fs-sm:  16px;  --ds-lh-sm:  24px;
  --ds-fs-body-lg: 16px; --ds-lh-body-lg: 24px;
  --ds-fs-body-md: 14px; --ds-lh-body-md: 20px;
  --ds-fs-body-sm: 12px; --ds-lh-body-sm: 16px;
  --ds-fs-body-xs: 10px; --ds-lh-body-xs: 14px;
  --ds-fs-body-2xs: 8px; --ds-lh-body-2xs: 12px;

  --ds-fw-regular: 400;
  --ds-fw-medium:  500;
  --ds-fw-semibold:600;
  --ds-fw-bold:    700;

  --ds-tracking-tight: -0.02em;
  --ds-tracking-normal: 0;
  --ds-tracking-mono: 0.02em;

  /* ── Spacing (4px base) */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  --ds-space-20: 80px;

  /* ── Radius */
  --ds-radius-none: 0;
  --ds-radius-sm: 4px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 12px;  /* default button / input */
  --ds-radius-xl: 16px;
  --ds-radius-2xl: 24px; /* section / modal */
  --ds-radius-full: 9999px;

  /* ── Elevation (subtle, cool accent on press — dark-first) */
  --ds-shadow-sm: 0 2px 4px 1px rgba(3,4,4,0.06), 0 2px 2px 0 rgba(3,4,4,0.06);
  --ds-shadow-md: 0 4px 8px 2px rgba(3,4,4,0.08), 0 2px 4px 0 rgba(3,4,4,0.08);
  --ds-shadow-lg: 0 12px 24px 4px rgba(3,4,4,0.14), 0 4px 8px 0 rgba(3,4,4,0.10);
  --ds-shadow-xl: 0 24px 48px 8px rgba(0,0,0,0.28), 0 8px 16px 0 rgba(0,0,0,0.18);
  --ds-focus-ring: 0 0 0 3px rgba(0,126,176,0.40);

  /* ── Motion (reserved, short) */
  --ds-ease:       cubic-bezier(0.2, 0, 0, 1);
  --ds-ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-dur-fast:   120ms;
  --ds-dur-base:   180ms;
  --ds-dur-slow:   280ms;

  /* ── Grid */
  --ds-grid-cols-desktop: 12;
  --ds-grid-gutter-desktop: 32px;
  --ds-grid-margin-desktop: 80px;
}

/* ── Semantic element presets (optional, scoped) */
.ds {
  color: var(--ds-fg);
  background: var(--ds-bg);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-fs-body-md);
  line-height: var(--ds-lh-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds h1, .ds .h1 { font-size: var(--ds-fs-4xl); line-height: var(--ds-lh-4xl); font-weight: var(--ds-fw-semibold); letter-spacing: var(--ds-tracking-tight); color: var(--ds-fg); }
.ds h2, .ds .h2 { font-size: var(--ds-fs-3xl); line-height: var(--ds-lh-3xl); font-weight: var(--ds-fw-semibold); letter-spacing: var(--ds-tracking-tight); color: var(--ds-fg); }
.ds h3, .ds .h3 { font-size: var(--ds-fs-2xl); line-height: var(--ds-lh-2xl); font-weight: var(--ds-fw-semibold); color: var(--ds-fg); }
.ds h4, .ds .h4 { font-size: var(--ds-fs-xl);  line-height: var(--ds-lh-xl);  font-weight: var(--ds-fw-semibold); color: var(--ds-fg); }
.ds h5, .ds .h5 { font-size: var(--ds-fs-lg);  line-height: var(--ds-lh-lg);  font-weight: var(--ds-fw-semibold); color: var(--ds-fg); }
.ds h6, .ds .h6 { font-size: var(--ds-fs-md);  line-height: var(--ds-lh-md);  font-weight: var(--ds-fw-semibold); color: var(--ds-fg); }
.ds p, .ds .body { font-size: var(--ds-fs-body-md); line-height: var(--ds-lh-body-md); color: var(--ds-fg); }
.ds .body-lg { font-size: var(--ds-fs-body-lg); line-height: var(--ds-lh-body-lg); }
.ds .body-sm { font-size: var(--ds-fs-body-sm); line-height: var(--ds-lh-body-sm); }
.ds .body-xs { font-size: var(--ds-fs-body-xs); line-height: var(--ds-lh-body-xs); }
.ds .muted   { color: var(--ds-fg-muted); }
.ds .mono    { font-family: var(--ds-font-mono); letter-spacing: var(--ds-tracking-mono); }
.ds code, .ds .code {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  background: var(--ds-surface);
  padding: 1px 6px;
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
}

/* Metric — the hero type, used everywhere data is shown */
.ds .metric {
  font-family: var(--ds-font-sans);
  font-feature-settings: "tnum" 1, "cv08" 1;
  font-variant-numeric: tabular-nums;
  font-weight: var(--ds-fw-semibold);
  letter-spacing: var(--ds-tracking-tight);
  color: var(--ds-fg);
}
.ds .metric-xl { font-size: 64px; line-height: 64px; font-weight: var(--ds-fw-bold); }
.ds .metric-lg { font-size: 48px; line-height: 52px; }
.ds .metric-md { font-size: 36px; line-height: 40px; }
.ds .metric-sm { font-size: 24px; line-height: 28px; }

/* Light-mode override scope */
.ds--light {
  --ds-bg: var(--ds-light-bg);
  --ds-bg-raised: #fafafa;
  --ds-surface: var(--ds-light-surface);
  --ds-border: rgba(0,0,0,0.08);
  --ds-border-strong: rgba(0,0,0,0.16);
  --ds-fg: var(--ds-light-fg);
  --ds-fg-muted: var(--ds-light-fg-muted);
  --ds-fg-subtle: #a8a8a8;
}