/*
 * DataDab "Control Room" theme — token layer.
 * Single source of truth for the site-wide redesign (see design-exploration/REDESIGN_PLAN.md).
 *
 * Two token sets live here:
 *   1. --cr-*  : the new Control Room tokens. All NEW code must use these.
 *   2. Legacy aliases: old --color-* / --font-* names mapped onto the new palette so
 *      pages whose inline styles still reference legacy vars render correctly during
 *      the phased migration. The purge script (ops/scripts/, Phase 3) removes legacy
 *      references; when the purge completes this alias block can be deleted.
 */

:root{
  /* ---- surfaces ---- */
  --cr-bg:#0C0E10;
  --cr-surface:#101317;
  --cr-surface-2:#16191d;
  --cr-border:#22262B;
  --cr-border-2:#2c3238;

  /* ---- text ---- */
  --cr-text:#E8EAED;
  --cr-muted:#9aa1a9;
  --cr-faint:#98a0a8;

  /* ---- accents ---- */
  --cr-amber:#FFB000;
  --cr-green:#3FE07F;
  --cr-red:#FF5C5C;

  /* ---- type ---- */
  --font-display:'Space Grotesk',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* ---- shape & motion ---- */
  --clip-notch:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  --transition-fast:.15s ease;

  /* ============================================================
     LEGACY ALIASES (temporary — removed after Phase 3 purge)
     Old name -> new value. Order matters for readability only.
     ============================================================ */
  --color-ivory:var(--cr-bg);          /* was page cream        */
  --color-sand:var(--cr-surface);      /* was light band        */
  --color-cream:var(--cr-surface);     /* was light band        */
  --color-warm-gray:var(--cr-border);  /* was hairline          */
  --color-charcoal:var(--cr-text);     /* was body text         */
  --color-deep-navy:var(--cr-surface-2);/* was dark section     */
  --color-forest:#141a16;              /* was green-dark section */
  --color-sage:var(--cr-green);
  --color-bronze:var(--cr-amber);
  --color-rust:var(--cr-red);
  --font-body:var(--font-display);
  --font-accent:var(--font-mono);
  /* keep spacing + easing tokens as-is (layout-neutral) */
  --space-xs:.5rem;--space-sm:1rem;--space-md:2rem;--space-lg:4rem;--space-xl:6rem;--space-2xl:8rem;
  --transition-smooth:cubic-bezier(.4,0,.2,1);
}

/* ---- base element layer ---- */
/* Universal reset (parity with legacy main.css — required by every page's layout math) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--cr-bg);} /* prevents white flash before CSS/fonts settle */
body{
  font-family:var(--font-display);
  background:var(--cr-bg);
  color:var(--cr-text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:var(--cr-amber);color:var(--cr-bg);}
:focus-visible{outline:2px solid var(--cr-amber);outline-offset:2px;}

/* dark scrollbar (WebKit) */
::-webkit-scrollbar{width:12px;background:var(--cr-bg);}
::-webkit-scrollbar-thumb{background:var(--cr-border-2);border:3px solid var(--cr-bg);}
::-webkit-scrollbar-thumb:hover{background:var(--cr-faint);}

/* legibility guardrails */
html body .stat-label{color:#C6CBD1!important}
html body .finding-stat-label{color:#b9b7af!important}
.problem-number,.framework-number,.pattern-num,.scope-number{color:var(--cr-amber)!important}
.badge-green,.badge[data-badge="green"]{color:#7CEBA8!important}
.pct-cell,.rank-cell,.metric-label,.comparison-label{color:var(--cr-muted)!important}

html body .stat-label{color:#C6CBD1!important}
html body .finding-stat-label{color:#b9b7af!important}
.problem-number,.framework-number,.pattern-num,.scope-number{color:var(--cr-amber)!important}
.badge-green,.badge[data-badge="green"]{color:#7CEBA8!important}

/* shared Control Room primitives */
ul[class],ol[class]{list-style:none;} /* classed lists are UI components, not prose */
.cr-grid-bg{
  background-image:
    linear-gradient(var(--cr-surface-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--cr-surface-2) 1px,transparent 1px);
  background-size:44px 44px;
}
.cr-status-dot{width:7px;height:7px;border-radius:50%;background:var(--cr-green);box-shadow:0 0 8px var(--cr-green);display:inline-block;}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* Contain decorative absolute ornaments (legacy corner-glow pseudo-elements) */
section,.hero,.proof-section,.cta-section{overflow-x:clip}

/* ---- CTA visibility & spacing (article pages ship dark-on-dark buttons) ---- */
html body .cta-primary{background:var(--cr-amber)!important;color:#16191d!important;clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)!important}
html body .cta-primary:hover{filter:brightness(1.12)}
html body .cta-section .cta-primary{margin-top:.25rem}
html body .hero-cta-group .cta-secondary,html body .cta-section .cta-secondary{margin-top:.25rem}

/* ---- "Where To Go Next" link lists on case-study articles ---- */
.links-section .approach-list{
  background:var(--cr-surface);
  border:1px solid var(--cr-border);
  border-left:2px solid var(--cr-amber);
  padding:1.5rem 1.75rem;
  max-width:820px;
  margin:0 auto;
}
.links-section .approach-list li{color:var(--cr-muted)}
.links-section .approach-list li::before{color:var(--cr-amber)}
.links-section .approach-list a{color:var(--cr-text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--cr-amber)}
.links-section .approach-list a:hover{color:var(--cr-amber)}

/* ---- Hero CTA spacing + secondary button (article pages ship unstyled secondary) ---- */
html body .cta-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
html body section.hero .cta-actions{margin-top:2.75rem}
html body .cta-section .cta-actions{margin-top:2.25rem}
html body .cta-secondary{
  display:inline-flex;align-items:center;
  padding:.95rem 1.8rem;
  background:transparent;color:var(--cr-text);
  border:1px solid var(--cr-border-2);border-radius:0;
  font-family:var(--font-display);font-size:.95rem;font-weight:600;
  text-decoration:none;white-space:nowrap;
}
html body .cta-secondary:hover{border-color:var(--cr-amber);color:var(--cr-amber)}

/* hero CTA row wrapper on case-study articles */
html body .hero-cta{margin-top:2.75rem}
html body .hero .hero-answer{margin-bottom:0}

html body .cta-section{text-align:center}
html body .cta-section .cta-actions{justify-content:center}

/* ---- Vertical rhythm floor: no section ships without breathing space ---- */
html body main > section{padding-top:clamp(4rem,8vw,7rem);padding-bottom:clamp(4rem,8vw,7rem)}

/* ---- FAQ sections on tool pages ship without vertical padding ---- */
html body .faq-section{padding-top:clamp(4rem,7vw,6rem)!important;padding-bottom:clamp(4rem,7vw,6rem)!important}

/* ---- research report heroes: mobile clearance under top bar ---- */
@media(max-width:700px){
  html body .hero,html body .hero-vis{padding-top:7rem!important}
}