/* ==========================================================================
   DataCore Design Tokens
   Direction: a "spec sheet" aesthetic — dense, legible, data-forward.
   Graphite + paper base, one signal-teal accent, mono numerals for anything
   measured (prices, benchmarks, specs). Signature element: the spec-bar
   (a filled comparison bar sitting beside every measurable value) and the
   rating ring badge.
   ========================================================================== */

:root{
  /* --- Color: base --- */
  --dc-ink:        #10131A;  /* graphite — header/footer, dark surfaces */
  --dc-ink-soft:   #1B2029;  /* raised dark surface */
  --dc-paper:      #FAFAFA;  /* page background */
  --dc-surface:    #FFFFFF;  /* card / table surface */
  --dc-line:       #E4E7EC;  /* hairline borders */
  --dc-line-soft:  #EEF0F3;

  /* --- Color: text --- */
  --dc-text:       #14171F;
  --dc-text-soft:  #5B6472;
  --dc-text-faint: #8A93A3;
  --dc-text-on-ink:#F3F5F7;

  /* --- Color: signal accent (teal) --- */
  --dc-signal:      #12A594;
  --dc-signal-dim:  #0D7B6E;
  --dc-signal-tint: #E3F5F2;

  /* --- Color: semantic --- */
  --dc-amber:       #F5A524;
  --dc-amber-tint:  #FDF3E0;
  --dc-positive:    #1A9E6D;
  --dc-positive-tint: #E6F6EF;
  --dc-negative:    #E1483F;
  --dc-negative-tint: #FCEAE9;

  /* --- Type families --- */
  --dc-font-display: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", sans-serif;
  --dc-font-body:    "Inter", "Inter Fallback", "Segoe UI", Arial, sans-serif;
  --dc-font-mono:    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Type scale --- */
  --dc-fs-xs:   0.75rem;
  --dc-fs-sm:   0.875rem;
  --dc-fs-base: 1rem;
  --dc-fs-md:   1.125rem;
  --dc-fs-lg:   1.375rem;
  --dc-fs-xl:   1.75rem;
  --dc-fs-2xl:  2.25rem;
  --dc-fs-3xl:  3rem;

  /* --- Spacing (4px base) --- */
  --dc-sp-1: 4px;
  --dc-sp-2: 8px;
  --dc-sp-3: 12px;
  --dc-sp-4: 16px;
  --dc-sp-5: 24px;
  --dc-sp-6: 32px;
  --dc-sp-7: 48px;
  --dc-sp-8: 64px;
  --dc-sp-9: 96px;

  /* --- Radius: sharp-ish, technical, never pill-shaped --- */
  --dc-radius-sm: 4px;
  --dc-radius-md: 8px;
  --dc-radius-lg: 12px;

  /* --- Shadow: flat, low elevation only --- */
  --dc-shadow-sm: 0 1px 2px rgba(16,19,26,0.06);
  --dc-shadow-md: 0 4px 16px rgba(16,19,26,0.08);

  /* --- Layout --- */
  --dc-container: 1240px;
  --dc-container-narrow: 780px;
  --dc-header-h: 68px;
  --dc-entity-nav-h: 47px;
}

@media (prefers-color-scheme: dark){
  /* Reserved hook — theme ships light by default; dark mode can be toggled
     via body.dc-dark for sites that want it, without a second stylesheet. */
}