/* Phosphor icon webfont (MIT).
   Phosphor's per-weight stylesheets share unscoped `.ph-<name>::before { content }`
   rules, so chaining @imports for multiple weights causes the last sheet to clobber
   ::before content for every other weight (most notably duotone, which sets it to ""
   and pushes the glyph to ::after). We import a SINGLE weight (bold — the primary
   Figma UI weight) and use Phosphor's same-weight glyph variants via class suffixes:
     <i class="ph-bold ph-house"></i>          → bold outline
     <i class="ph-bold ph-house-fill"></i>     → filled (active nav states)
     <i class="ph-bold ph-house-duotone"></i>  → duotone
     <i class="ph-bold ph-house-light"></i>    → light
     <i class="ph-bold ph-house-thin"></i>     → thin
   The bold stylesheet ships every glyph in every variant, so all six visual
   styles are available without cross-sheet specificity collisions. */
@import url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/style.css");

/* ============================================================
   Dataprovider Design System — DS 2.0
   Colors & Typography Tokens
   Source: Figma "DS 2.0 _ Foundation/Components/Data Display/Data Visualization"
   ============================================================ */

/* ----------------------------------------------------------------
   Helvetica Neue — three real cuts mapped to their PostScript names.
   Figma typography variables in this DS are authored with string
   weights ("Regular" / "Medium" / "Bold") rather than numeric values;
   under the hood Figma resolves each string to the matching PostScript
   master in the family. We mirror that by declaring one @font-face per
   master with `local()` lookups by exact PostScript name. This is what
   prevents the browser from synthesizing a fake "500" when Medium is
   missing — if the local cut isn't installed it cascades to the next
   src in the chain, never to a synthesized weight.
   ---------------------------------------------------------------- */
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue"), local("Helvetica Neue"),
       local("Helvetica"), local("Arial");
  font-weight: 400;            /* Figma "Regular" → PostScript: HelveticaNeue */
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Medium"), local("Helvetica Neue Medium"),
       local("Helvetica-Medium"), local("Arial");
  font-weight: 500;            /* Figma "Medium"  → PostScript: HelveticaNeue-Medium */
  font-style: normal;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("HelveticaNeue-Bold"), local("Helvetica Neue Bold"),
       local("Helvetica-Bold"), local("Arial Bold");
  font-weight: 700;            /* Figma "Bold"    → PostScript: HelveticaNeue-Bold */
  font-style: normal;
}

:root {
  /* ---------- Brand · Color/Purple ---------- 
     Authoritative values from Foundation file: */
  --dp-purple-100:  #E8E0F8;
  --dp-purple-200:  #D5CCE9;
  --dp-purple-300:  #C3B7D9;
  --dp-purple-400:  #B0A3CA;
  --dp-purple-500:  #9D8EBB;
  --dp-purple-600:  #78669C;
  --dp-purple-700:  #523D7E;
  --dp-purple-800:  #2D145F;
  --dp-purple-900:  #1A0B36;
  --dp-purple-1000: #0F071D;

  /* ---------- Blue · Color/Blue ----------
     14-step primitive scale from DS 2.0 · Foundation file (node 111:27).
     The Blue/500 hue (#2D4BFF) is Dataprovider's primary action / link
     colour; the lighter steps tint canvases and borders, the darker
     steps surface high-contrast emphasis. Each step is a primitive —
     consume them through the BG/* and Border/* aliases below, not directly. */
  --dp-blue-25:  #FCFCFF;
  --dp-blue-50:  #FAFAFF;
  --dp-blue-75:  #F2F4FF;
  --dp-blue-100: #EAEDFF;
  --dp-blue-125: #E6E9FF;
  --dp-blue-150: #E3E7FF;
  --dp-blue-200: #D5DBFF;
  --dp-blue-300: #C0C9FF;
  --dp-blue-400: #8193FF;
  --dp-blue-500: #2D4BFF;   /* primary action · link · focus */
  --dp-blue-600: #243CCC;
  --dp-blue-700: #1B2D99;
  --dp-blue-800: #121E66;
  --dp-blue-900: #090F33;

  /* ---------- BG / Brand / Primary — Color · BG / Brand / Primary ----------
     Semantic surface tokens for the Brand · Primary family. Each one
     references a Color/SHADES/Primary/* primitive (which in this file
     is the Blue scale). Use these in product surfaces — never the raw
     hex / --dp-blue-* tokens. */
  --dp-bg-brand-primary-25:  var(--dp-blue-25);
  --dp-bg-brand-primary-50:  var(--dp-blue-50);
  --dp-bg-brand-primary-75:  var(--dp-blue-75);
  --dp-bg-brand-primary-100: var(--dp-blue-100);
  --dp-bg-brand-primary-125: var(--dp-blue-125);
  --dp-bg-brand-primary-150: var(--dp-blue-150);
  --dp-bg-brand-primary-200: var(--dp-blue-200);
  --dp-bg-brand-primary-300: var(--dp-blue-300);
  --dp-bg-brand-primary-400: var(--dp-blue-400);
  --dp-bg-brand-primary-500: var(--dp-blue-500);
  --dp-bg-brand-primary-600: var(--dp-blue-600);
  --dp-bg-brand-primary-700: var(--dp-blue-700);
  --dp-bg-brand-primary-800: var(--dp-blue-800);
  --dp-bg-brand-primary-900: var(--dp-blue-900);

  /* ---------- Border / Brand / Secondary — Color · BORDER / Brand / Secondary -
     Three border roles, each wired to a SHADES/Primary/* step. */
  --dp-border-brand-secondary-light: var(--dp-blue-200);   /* Light → Primary/200 */
  --dp-border-brand-secondary-base:  var(--dp-blue-400);   /* Base  → Primary/400 */
  --dp-border-brand-secondary-dark:  var(--dp-blue-500);   /* Dark  → Primary/500 */

  /* ---------- Neutrals · Color/Grey ----------
     Authoritative values from Foundation file: */
  --dp-grey-100:  #FFFFFF;
  --dp-grey-125:  #FAFAFA;
  --dp-grey-150:  #F6F6F6;
  --dp-grey-200:  #F3F3F3;
  --dp-grey-300:  #E7E7E7;
  --dp-grey-400:  #DCDCDC;
  --dp-grey-500:  #C4C4C4;
  --dp-grey-600:  #919191;
  --dp-grey-700:  #4E4E4E;
  --dp-grey-800:  #323232;
  --dp-grey-900:  #030303;

  /* Legacy shade aliases → grey */
  --dp-shade-0:   var(--dp-grey-100);
  --dp-shade-25:  var(--dp-grey-125);
  --dp-shade-50:  var(--dp-grey-150);
  --dp-shade-100: var(--dp-grey-200);
  --dp-shade-150: var(--dp-grey-300);
  --dp-shade-200: var(--dp-grey-400);
  --dp-shade-700: var(--dp-grey-700);
  --dp-shade-800: var(--dp-grey-800);
  --dp-shade-900: var(--dp-grey-900);

  /* ---------- Semantic · color/positive | negative | warning ----------
     All values pulled from component fills:
       /Sub-components/.../ListItemHero (bullet)     → 83,204,103
       /Loader/State*ColorGreen                      → 66,163,82 (track), 203,240,209 (rail)
       /Label/TypeGreen                              → 33,82,41 (text)
       /Admin/external/TypeNegative                  → 252,231,233 (bg) + 221,17,34 (border)
                                                       + 133,10,20 (text/icon)
       /Loader/State*ColorRed                        → 248,207,211 (rail)
       /Filter-system/external/TypeCaution           → 255,246,204 (bg) + 255,210,0 (border)
       /Label/TypeYellow                             → 255,237,153 (bg) + 102,84,0 (text)  */

  /* Color · Green (positive) — Foundation file */
  --dp-green-100:  #EEFAF0;
  --dp-green-200:  #CBF0D2;
  --dp-green-300:  #BAEBC3;
  --dp-green-400:  #8ED89A;
  --dp-green-500:  #53CC67;
  --dp-green-600:  #42A353;
  --dp-green-700:  #20522A;
  --dp-green-800:  #1A3D1F;
  --dp-green-900:  #08140A;

  /* Color · Red (negative) — Foundation file */
  --dp-red-100:    #FCE7E9;
  --dp-red-200:    #F8CFD4;
  --dp-red-300:    #F2A0A7;
  --dp-red-400:    #EB717A;
  --dp-red-500:    #DD1122;
  --dp-red-600:    #B10E1C;
  --dp-red-700:    #850B14;
  --dp-red-800:    #42050A;
  --dp-red-900:    #2D0207;

  /* Color · Yellow (warning) — Foundation file */
  --dp-yellow-100: #FFFCE6;
  --dp-yellow-200: #FFF6CD;
  --dp-yellow-300: #FFEE99;
  --dp-yellow-400: #FFE362;
  --dp-yellow-500: #FFD200;
  --dp-yellow-600: #CCA801;
  --dp-yellow-700: #9A7E01;
  --dp-yellow-800: #665500;
  --dp-yellow-900: #4D3F00;

  /* Legacy positive/negative/warning aliases */
  --dp-positive-50:   var(--dp-green-100);
  --dp-positive-100:  var(--dp-green-200);
  --dp-positive-500:  var(--dp-green-500);
  --dp-positive-700:  var(--dp-green-600);
  --dp-positive-800:  var(--dp-green-700);
  --dp-negative-100:  var(--dp-red-100);
  --dp-negative-200:  var(--dp-red-200);
  --dp-negative-500:  var(--dp-red-500);
  --dp-negative-700:  var(--dp-red-700);
  --dp-warning-50:    var(--dp-yellow-200);
  --dp-warning-100:   var(--dp-yellow-300);
  --dp-warning-500:   var(--dp-yellow-500);
  --dp-warning-700:   var(--dp-yellow-800);

  /* Aliases retained for back-compat with existing components/cards */
  --dp-success:        var(--dp-positive-500);
  --dp-success-soft:   var(--dp-positive-50);
  --dp-danger:         var(--dp-negative-500);
  --dp-danger-soft:    var(--dp-negative-100);
  --dp-warning:        var(--dp-warning-500);
  --dp-warning-soft:   var(--dp-warning-50);
  --dp-warning-line:   var(--dp-warning-100);

  /* ---------- Action / button ink ---------- */
  --dp-button-fg: rgb(9, 15, 51);       /* primary button background only */

  /* ---------- Legacy neutral aliases (kept so existing cards still resolve) ---------- */
  --dp-black:      var(--dp-shade-900);
  --dp-gray-700:   var(--dp-shade-800);
  --dp-gray-600:   var(--dp-shade-700);
  --dp-gray-300:   var(--dp-shade-200);
  --dp-gray-200:   var(--dp-shade-150);
  --dp-gray-100:   var(--dp-shade-100);
  --dp-gray-75:    var(--dp-shade-50);
  --dp-gray-50:    var(--dp-shade-25);
  --dp-white:      var(--dp-shade-0);

  /* ---------- Shadows ----------
     Authoritative values lifted from the Figma source (boxShadow strings on
     Button, Filter, Sheet, Modal, Dropdown, Drag-Active components). */
  --dp-shadow-xs:    0 1px 2px -1px rgba(16,24,40,0.10), 0 1px 3px 0 rgba(16,24,40,0.10);   /* buttons (enabled / hover) */
  --dp-shadow-sm:    0 1.125px 2.25px 0 rgba(18,19,26,0.25);                                /* pointer / cursor hint */
  --dp-shadow-md:    0 4px 4px 0 rgba(0,0,0,0.25);                                          /* filter chips, dropdown collapsed/expanded */
  --dp-shadow-lg:    0 4px 6px -2px rgba(0,0,0,0.05), 0 12px 16px -4px rgba(0,0,0,0.10);    /* small dashboards, admin panels */
  --dp-shadow-xl:    0 8px 8px -4px rgba(0,0,0,0.04), 0 20px 24px -4px rgba(0,0,0,0.10);    /* modals, sheets, large dropdowns */
  --dp-shadow-2xl:   0 12px 16px -4px rgba(0,0,0,0.20), 0 4px 4px 0 rgba(0,0,0,0.25);       /* drag / rearrange active */

  /* alias retained for back-compat with earlier docs */
  --dp-shadow-modal: var(--dp-shadow-xl);

  /* ---------- Radii · Alias (semantic, references Scale primitives) ----------
     Per Foundation file:
       xs   → Scale/50 (2)
       sm   → Scale/100 (4)
       md   → Scale/150 (6)
       lg   → Scale/200 (8)
       xl   → Scale/300 (12)
       2xl  → Scale/400 (16)
       3xl  → Scale/500 (20)
       4xl  → Scale/600 (24)
       5xl  → Scale/800 (32)
       Circle → 999                                                 */
  --dp-radius-xs:     var(--dp-scale-50);    /* 2  */
  --dp-radius-sm:     var(--dp-scale-100);   /* 4  */
  --dp-radius-md:     var(--dp-scale-150);   /* 6  */
  --dp-radius-lg:     var(--dp-scale-200);   /* 8  */
  --dp-radius-xl:     var(--dp-scale-300);   /* 12 */
  --dp-radius-2xl:    var(--dp-scale-400);   /* 16 */
  --dp-radius-3xl:    var(--dp-scale-500);   /* 20 */
  --dp-radius-4xl:    var(--dp-scale-600);   /* 24 */
  --dp-radius-5xl:    var(--dp-scale-800);   /* 32 */
  --dp-radius-circle: 999px;

  /* Legacy radius aliases */
  --dp-radius-0: 0px;
  --dp-radius-1: var(--dp-radius-xs);
  --dp-radius-2: var(--dp-radius-sm);
  --dp-radius-3: var(--dp-radius-lg);
  --dp-radius-4: var(--dp-radius-xl);
  --dp-radius-5: var(--dp-radius-2xl);
  --dp-radius-pill: var(--dp-radius-circle);

  /* ---------- Primitives · Scale (numeric base) ----------
     The Foundation file defines an 86-token primitive `Scale/*` collection.
     Every spacing/sizing alias in the DS resolves to one of these.
     Naming: `Scale/<NN0>` where the parens show the px value, e.g. Scale/100 (4).
     Values are unitless multiples of 1px in 4-unit steps. */
  --dp-scale-0:     0px;
  --dp-scale-25:    1px;
  --dp-scale-50:    2px;
  --dp-scale-100:   4px;
  --dp-scale-150:   6px;
  --dp-scale-200:   8px;
  --dp-scale-300:   12px;
  --dp-scale-400:   16px;
  --dp-scale-500:   20px;
  --dp-scale-600:   24px;
  --dp-scale-700:   28px;
  --dp-scale-800:   32px;
  --dp-scale-900:   36px;
  --dp-scale-1000:  40px;
  --dp-scale-1100:  44px;
  --dp-scale-1200:  48px;
  --dp-scale-1300:  52px;
  --dp-scale-1400:  56px;
  --dp-scale-1500:  60px;
  --dp-scale-1600:  64px;
  --dp-scale-1700:  68px;
  --dp-scale-1800:  72px;
  --dp-scale-1900:  76px;
  --dp-scale-2000:  80px;

  /* ---------- Alias · Spacing (semantic) ----------
     Each alias references a primitive Scale token. Mirrors Figma's
     Alias collection so token references survive renames of raw values. */
  --dp-space-none:  var(--dp-scale-0);     /* 0  */
  --dp-space-3xs:   var(--dp-scale-25);    /* 1  */
  --dp-space-2xs:   var(--dp-scale-100);   /* 4  */
  --dp-space-xs:    var(--dp-scale-200);   /* 8  */
  --dp-space-sm:    var(--dp-scale-300);   /* 12 */
  --dp-space-md:    var(--dp-scale-400);   /* 16 */
  --dp-space-lg:    var(--dp-scale-600);   /* 24 */
  --dp-space-xl:    var(--dp-scale-800);   /* 32 */
  --dp-space-2xl:   var(--dp-scale-1200);  /* 48 */
  --dp-space-3xl:   var(--dp-scale-1300);  /* 52 */
  --dp-space-4xl:   var(--dp-scale-1600);  /* 64 */
  --dp-space-5xl:   var(--dp-scale-2000);  /* 80 */

  /* Legacy --dp-space-N aliases (kept for back-compat with existing cards) */
  --dp-space-1: var(--dp-space-2xs);   /* 4  */
  --dp-space-2: var(--dp-space-xs);    /* 8  */
  --dp-space-3: var(--dp-space-sm);    /* 12 */
  --dp-space-4: var(--dp-space-md);    /* 16 */
  --dp-space-5: var(--dp-space-lg);    /* 24 */
  --dp-space-6: var(--dp-space-xl);    /* 32 */
  --dp-space-7: var(--dp-space-2xl);   /* 48 */
  --dp-space-8: var(--dp-space-4xl);   /* 64 */
  --dp-space-9: var(--dp-space-5xl);   /* 80 */

  /* ---------- Type families · Typography/Family ---------- */
  --dp-font-primary: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --dp-font-sans:    var(--dp-font-primary);  /* alias */
  --dp-font-display: var(--dp-font-primary);
  --dp-font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;

  /* ---------- Weights · Typography/Weight ---------- */
  --dp-fw-regular: 400;
  --dp-fw-medium:  500;
  --dp-fw-bold:    700;

  /* ---------- Size · Typography/Size/Display ---------- */
  --dp-fs-display-small: 48px;
  --dp-fs-display-base:  56px;
  --dp-fs-display-large: 64px;

  /* ---------- Size · Typography/Size/Heading ---------- */
  --dp-fs-h6:            20px;
  --dp-fs-h5:            24px;
  --dp-fs-h4:            28px;
  --dp-fs-h3:            32px;
  --dp-fs-h2:            36px;
  --dp-fs-h1:            40px;
  --dp-fs-heading-display:       48px;
  --dp-fs-heading-display-large: 56px;

  /* ---------- Size · Typography/Size/Body, Text ---------- */
  --dp-fs-text-xs:    10px;
  --dp-fs-text-small: 12px;
  --dp-fs-text-base:  14px;   /* default body */
  --dp-fs-text-large: 16px;

  /* ---------- Legacy size aliases ---------- */
  --dp-fs-10: var(--dp-fs-text-xs);
  --dp-fs-12: var(--dp-fs-text-small);
  --dp-fs-14: var(--dp-fs-text-base);
  --dp-fs-16: var(--dp-fs-text-large);
  --dp-fs-20: var(--dp-fs-h6);
  --dp-fs-24: var(--dp-fs-h5);
  --dp-fs-28: var(--dp-fs-h4);
  --dp-fs-32: var(--dp-fs-h3);
  --dp-fs-36: var(--dp-fs-h2);
  --dp-fs-40: var(--dp-fs-h1);
  --dp-fs-48: var(--dp-fs-heading-display);
  --dp-fs-56: var(--dp-fs-heading-display-large);
  --dp-fs-64: var(--dp-fs-display-large);

  /* ---------- Line heights ---------- */
  --dp-lh-tight:  1;
  --dp-lh-snug:   1.2;
  --dp-lh-normal: 1.5;

  /* ---------- Content color scale (Foundations · Content) ----------
     Authoritative semantic text colors. Each maps to a SHADES token.
     Use these for any element copy / icon fills; do not pick from the
     raw palette directly. */
  --dp-content-primary:   rgb(45, 20, 95);     /* SHADES/Tertiary/Darker — body, headings, primary icons */
  --dp-content-secondary: rgb(120, 102, 156);  /* SHADES/Tertiary/Base   — labels, captions, dropdown headings */
  --dp-content-tertiary:  rgb(157, 142, 187);  /* SHADES/Tertiary/Light  — placeholder, disabled, hint icons */
  --dp-content-highlight: rgb(45, 75, 255);    /* SHADES/Secondary/Dark  — links, focus, accent */

  /* ---------- Semantic foreground / background ----------
     Aliases route to the Content scale above. */
  --fg1: var(--dp-content-primary);
  --fg2: var(--dp-content-secondary);
  --fg3: var(--dp-content-tertiary);
  --fg: var(--dp-content-primary);    /* shorthand alias used by preview cards */
  --fg-brand: var(--dp-content-primary);
  --fg-link: var(--dp-content-highlight);
  --fg-accent: var(--dp-content-highlight);

  --bg-canvas: var(--dp-white);
  --bg-tint: var(--dp-purple-75);
  --bg-tint-strong: var(--dp-purple-200);
  --bg-cover: var(--dp-purple-150);
  --bg-elevated: var(--dp-white);
  --line: var(--dp-gray-300);
  --line-soft: var(--dp-gray-200);
}

/* ============================================================
   Semantic typography classes
   ============================================================ */

html, body {
  font-family: var(--dp-font-sans);
  font-size: var(--dp-fs-14);
  line-height: var(--dp-lh-normal);
  color: var(--fg1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dp-display, h1.dp-display {
  font-family: var(--dp-font-display);
  font-weight: var(--dp-fw-bold);
  font-size: var(--dp-fs-128);
  line-height: var(--dp-lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-brand);
}

h1, .dp-h1 {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-bold);
  font-size: var(--dp-fs-32);
  line-height: var(--dp-lh-snug);
  color: var(--fg-brand);
  margin: 0;
}
h2, .dp-h2 {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-bold);
  font-size: var(--dp-fs-28);
  line-height: var(--dp-lh-snug);
  color: var(--fg-brand);
  margin: 0;
}
h3, .dp-h3 {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-bold);
  font-size: var(--dp-fs-24);
  line-height: var(--dp-lh-snug);
  color: var(--fg-brand);
  margin: 0;
}
h4, .dp-h4 {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-bold);
  font-size: var(--dp-fs-20);
  line-height: var(--dp-lh-snug);
  color: var(--fg-brand);
  margin: 0;
}
.dp-eyebrow {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-regular);
  font-size: var(--dp-fs-32);
  line-height: var(--dp-lh-snug);
  color: var(--fg-brand);
}
.dp-lead {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-regular);
  font-size: var(--dp-fs-16);
  line-height: var(--dp-lh-normal);
  color: var(--fg1);
}
p, .dp-p {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-regular);
  font-size: var(--dp-fs-14);
  line-height: var(--dp-lh-normal);
  color: var(--fg1);
  margin: 0;
}
.dp-small {
  font-size: var(--dp-fs-12);
  line-height: var(--dp-lh-normal);
  color: var(--fg2);
}
.dp-label {
  font-family: var(--dp-font-sans);
  font-weight: var(--dp-fw-bold);
  font-size: var(--dp-fs-14);
  line-height: var(--dp-lh-tight);
  color: var(--fg1);
}
.dp-mono, code, kbd, samp {
  font-family: var(--dp-font-mono);
  font-size: 0.92em;
}
a, .dp-link {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover, .dp-link:hover { text-decoration: underline; }

/* ============================================================
   Project utilities (RevealVisitor-specific additions)
   ============================================================ */

/* Skip-link for keyboard a11y — hidden until focused. */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 8px 14px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--dp-purple-900);
  color: var(--dp-white);
  border-radius: var(--dp-radius-md);
  z-index: 9999;
}