/* ============================================================
   Differential Factor — Design tokens (colors, type, spacing, base)
   Source: claude.ai/design "Unified style guide across domains" —
   Website Style Guide v2. Applies to every *.differentialfactor.com
   property, including this one. Do not hand-edit values here without
   updating the source design project — this file should stay a
   faithful copy of design-system/tokens/{colors,typography,spacing,base}.css.
   Fonts are loaded via each page's own Google Fonts <link> (Montserrat,
   Inter, IBM Plex Mono) rather than the @import in tokens/fonts.css.
   ============================================================ */

:root {
  /* ---- Brand: Differential Green ---- */
  --df-green-300: #5CE3C0;
  --df-green-400: #2BD6AB;
  --df-green-500: #00C896; /* PRIMARY */
  --df-green-600: #00A87E;
  --df-green-700: #00835F;
  --df-green-glow: rgba(0, 200, 150, 0.16);
  --df-green-soft: rgba(0, 200, 150, 0.08);

  /* ---- Ink: near-black surfaces (dark canvas) ---- */
  --df-ink-950: #0B0E14; /* page background */
  --df-ink-900: #0F141B;
  --df-ink-850: #161B22; /* elevated surface / card */
  --df-ink-800: #1C232E;
  --df-ink-750: #232C38;
  --df-ink-700: #2A3340; /* hairline borders on dark */
  --df-ink-600: #3A4452;

  /* ---- Neutral grays (text & lines) ---- */
  --df-white: #FFFFFF;
  --df-gray-100: #F4F6F8;
  --df-gray-200: #E4E8ED;
  --df-gray-300: #D1D5DB; /* secondary text */
  --df-gray-400: #9AA4B2; /* subtle text */
  --df-gray-500: #6B7685; /* faint text */
  --df-gray-600: #4A5462;

  /* ---- Semantic status ---- */
  --df-positive: #00C896;
  --df-negative: #FF5C6C;
  --df-warning: #FFB454;
  --df-info: #5AA9FF;

  /* ---- Semantic aliases — DEFAULT THEME = DARK ---- */
  --df-bg: var(--df-ink-950);
  --df-surface: var(--df-ink-850);
  --df-surface-2: var(--df-ink-800);
  --df-surface-raised: var(--df-ink-750);
  --df-border: var(--df-ink-700);
  --df-border-strong: var(--df-ink-600);

  --df-text: var(--df-white);
  --df-text-muted: var(--df-gray-300);
  --df-text-subtle: var(--df-gray-400);
  --df-text-faint: var(--df-gray-500);

  --df-primary: var(--df-green-500);
  --df-primary-hover: var(--df-green-400);
  --df-primary-press: var(--df-green-600);
  --df-on-primary: #04130E;

  --df-focus-ring: rgba(0, 200, 150, 0.45);
  --df-overlay: rgba(7, 9, 13, 0.72);

  /* ---- Type ---- */
  --df-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --df-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --df-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --df-weight-light: 300;
  --df-weight-regular: 400;
  --df-weight-medium: 500;
  --df-weight-semibold: 600;
  --df-weight-bold: 700;
  --df-weight-black: 800;

  --df-text-display: 64px;
  --df-text-h1: 48px;
  --df-text-h2: 36px;
  --df-text-h3: 28px;
  --df-text-h4: 22px;
  --df-text-lg: 19px;
  --df-text-base: 16px;
  --df-text-sm: 14px;
  --df-text-xs: 12px;
  --df-text-2xs: 11px;

  --df-leading-tight: 1.05;
  --df-leading-snug: 1.2;
  --df-leading-normal: 1.5;
  --df-leading-relaxed: 1.65;

  --df-tracking-wordmark: 0.25em;
  --df-tracking-eyebrow: 0.18em;
  --df-tracking-wide: 0.06em;
  --df-tracking-tight: -0.02em;
  --df-tracking-normal: 0;

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

  --df-container: 1200px;
  --df-container-narrow: 800px;

  --df-radius-xs: 4px;
  --df-radius-sm: 6px;
  --df-radius-md: 10px;
  --df-radius-lg: 14px;
  --df-radius-xl: 20px;
  --df-radius-pill: 999px;

  --df-hairline: 1px solid var(--df-border);

  --df-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --df-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --df-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);
  --df-glow: 0 0 0 1px rgba(0, 200, 150, 0.35), 0 8px 32px rgba(0, 200, 150, 0.18);
  --df-ring: 0 0 0 3px var(--df-focus-ring);

  --df-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --df-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --df-dur-fast: 120ms;
  --df-dur: 200ms;
  --df-dur-slow: 360ms;
}

/* ============================================================
   LIGHT THEME scope — v3: nav + hero on marketing/tool entry points.
   Apply class="theme-light" on a container. Data-dense bands (tables,
   scorecards) stay on the root dark theme per v3's tool/dashboard
   exception — do not wrap those in theme-light.
   ============================================================ */
.theme-light {
  --df-bg: var(--df-white);
  --df-surface: var(--df-white);
  --df-surface-2: var(--df-gray-100);
  --df-surface-raised: var(--df-white);
  --df-border: var(--df-gray-200);
  --df-border-strong: var(--df-gray-300);

  /* Real 3-tier hierarchy, not a full collapse. The earlier "everything
     reads as too-light gray" reports were diagnosed while a separate,
     since-fixed bug (:root-aliased custom properties frozen at <html>,
     never seeing this block's overrides) was silently forcing the WRONG,
     dark-theme text colors onto light-theme pages — so the spec's actual
     light-theme values were never fairly tested. Now that call sites
     reference these tokens directly, giving them real values:
       --df-text        ink-950  ~19:1  headlines, primary body
       --df-text-muted   gray-600 ~8.5:1  paragraphs, explanatory text, table headers
       --df-text-subtle/
       --df-text-faint   gray-500 ~4.2:1  short captions/labels/hashes ONLY —
                                          collapsed together so nothing dips to
                                          gray-400, which the spec's own contrast
                                          section says fails even for captions. */
  --df-text: var(--df-ink-950);
  --df-text-muted: var(--df-gray-600);
  --df-text-subtle: var(--df-gray-500);
  --df-text-faint: var(--df-gray-500);

  --df-primary: var(--df-green-600);
  --df-primary-hover: var(--df-green-500);
  --df-primary-press: var(--df-green-700);
  --df-on-primary: var(--df-white);

  --df-overlay: rgba(11, 14, 20, 0.45);
}

/* ============================================================
   v4: dark "highlight" island — for the one dark gradient panel
   per screen (results/recommendation panel on a tool). Nesting a
   plain dark div inside a theme-light ancestor is not enough:
   theme-light's overrides cascade down, so bg/surface/border/text/
   primary must all be explicitly restated here, not just text.
   Apply directly on the panel; components nested inside (cards,
   tables) that read var(--df-surface)/var(--df-border)/etc. will
   pick these up automatically.
   ============================================================ */
.df-dark-island {
  --df-bg: var(--df-ink-950);
  --df-surface: var(--df-ink-850);
  --df-surface-2: var(--df-ink-800);
  --df-surface-raised: var(--df-ink-750);
  --df-border: var(--df-ink-700);
  --df-border-strong: var(--df-ink-600);
  --df-text: var(--df-white);
  --df-text-muted: var(--df-gray-300);
  --df-text-subtle: var(--df-gray-400);
  --df-text-faint: var(--df-gray-500);
  --df-primary: var(--df-green-500);
  --df-primary-hover: var(--df-green-400);
  --df-primary-press: var(--df-green-600);
  --df-on-primary: #04130E;
  background: linear-gradient(160deg, var(--df-ink-800), var(--df-ink-900));
  box-shadow: var(--df-shadow-lg);
}

/* ---- Base reset & primitives ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--df-bg);
  color: var(--df-text);
  font-family: var(--df-font-body);
  font-size: var(--df-text-base);
  line-height: var(--df-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--df-green-glow); color: var(--df-white); }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--df-ring); border-radius: var(--df-radius-sm); }

.df-grid-bg {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

.df-signal-bg {
  background:
    radial-gradient(60% 80% at 85% 0%, var(--df-green-soft), transparent 60%),
    var(--df-bg);
}

/* ---- Reusable type classes ---- */
.df-eyebrow {
  font-family: var(--df-font-display);
  font-weight: var(--df-weight-semibold);
  font-size: var(--df-text-xs);
  line-height: 1;
  letter-spacing: var(--df-tracking-eyebrow);
  text-transform: uppercase;
}
.df-mono {
  font-family: var(--df-font-mono);
  font-weight: var(--df-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* ---- Badge (live/status pill) ---- */
.df-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--df-font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .3rem .65rem; border-radius: var(--df-radius-pill);
  border: 1px solid var(--df-border);
}
.df-badge .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.df-badge.tone-live { color: var(--df-positive); border-color: rgba(0,200,150,.35); background: var(--df-green-soft); }
.df-badge.tone-live .dot { background: var(--df-positive); animation: df-pulse 1.8s ease-in-out infinite; }
.df-badge.tone-neutral { color: var(--df-text-subtle); }
.df-badge.tone-neutral .dot { background: var(--df-text-faint); }
.df-badge.tone-warning { color: var(--df-warning); border-color: rgba(255,180,84,.35); background: rgba(255,180,84,.08); }
.df-badge.tone-warning .dot { background: var(--df-warning); }
@keyframes df-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- Button ---- */
.df-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--df-font-body); font-weight: 700; font-size: .83rem;
  padding: .6rem 1.3rem; border-radius: var(--df-radius-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: filter var(--df-dur) var(--df-ease), border-color var(--df-dur) var(--df-ease), color var(--df-dur) var(--df-ease);
  white-space: nowrap;
}
.df-btn-primary { background: var(--df-primary); color: var(--df-on-primary); }
.df-btn-primary:hover { filter: brightness(1.08); }
.df-btn-outline { background: transparent; border-color: var(--df-primary); color: var(--df-primary); }

/* ============================================================
   Shared header/footer chrome — matches the menu structure and
   visual pattern of www.differentialfactor.com (dark gradient nav
   with a Tools/Demos dropdown, dark gradient footer with social
   icons + legal sub-nav). Nav/footer are dark islands (see
   .df-dark-island above) on every subdomain, this site included.
   ============================================================ */
.df-nav-links { display: flex; align-items: center; gap: 1.5rem; }
.df-nav-links a { color: var(--df-text-muted); font-size: .85rem; font-weight: 500;
  text-decoration: none; letter-spacing: .02em; transition: color var(--df-dur) var(--df-ease); }
.df-nav-links a:hover { color: var(--df-text); }
.df-nav-links .df-nav-cta { background: var(--df-primary); color: var(--df-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 1.25rem; border-radius: var(--df-radius-md);
  font-family: var(--df-font-display); font-weight: 600; font-size: .85rem; letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(0,200,150,.20); transition: filter var(--df-dur) var(--df-ease), box-shadow var(--df-dur) var(--df-ease); }
.df-nav-links .df-nav-cta:hover { filter: brightness(1.05); box-shadow: 0 8px 28px rgba(0,200,150,.30); }

.df-nav-dropdown { position: relative; }
.df-nav-dropdown-btn { display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--df-text-muted); font-size: .85rem; font-weight: 500; letter-spacing: .02em;
  transition: color var(--df-dur) var(--df-ease); padding: 0; }
.df-nav-dropdown-btn:hover, .df-nav-dropdown:hover .df-nav-dropdown-btn,
.df-nav-dropdown:focus-within .df-nav-dropdown-btn { color: var(--df-text); }
.df-nav-dropdown-btn .chev { font-size: 10px; transition: transform var(--df-dur) var(--df-ease); }
.df-nav-dropdown:hover .chev, .df-nav-dropdown:focus-within .chev { transform: rotate(180deg); }
.df-nav-dropdown-menu { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -4px);
  padding-top: .75rem; opacity: 0; visibility: hidden;
  transition: opacity var(--df-dur) var(--df-ease), transform var(--df-dur) var(--df-ease), visibility var(--df-dur); }
.df-nav-dropdown:hover .df-nav-dropdown-menu, .df-nav-dropdown:focus-within .df-nav-dropdown-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.df-nav-dropdown-menu-inner { width: 14rem; border-radius: var(--df-radius-md);
  border: 1px solid var(--df-ink-700); background: var(--df-ink-900); box-shadow: var(--df-shadow-md); overflow: hidden; }
.df-nav-dropdown-menu-inner a { display: block; padding: .75rem 1rem; font-size: .85rem;
  color: var(--df-text-muted); text-decoration: none; transition: color var(--df-dur), background var(--df-dur); }
.df-nav-dropdown-menu-inner a:hover { color: var(--df-text); background: var(--df-ink-800); }
.df-nav-dropdown-menu-inner a + a { border-top: 1px solid var(--df-ink-700); }

.df-footer-social { display: flex; align-items: center; gap: 1.1rem; }
.df-footer-social a { color: var(--df-text-muted); transition: color var(--df-dur) var(--df-ease); display: flex; }
.df-footer-social a:hover { color: var(--df-primary); }
.df-footer-social svg { width: 18px; height: 18px; }
.df-footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem;
  font-size: .82rem; font-weight: 500; color: var(--df-text-subtle); }
.df-footer-legal a { color: inherit; text-decoration: none; transition: color var(--df-dur); }
.df-footer-legal a:hover { color: var(--df-primary); text-decoration: underline; text-underline-offset: 3px; }
.df-btn-outline:hover { background: var(--df-green-soft); }