/* Dataframe Labs design system · tokens and components · approved 22 Aug 2026
   Source of truth: brand-identity/claude-design/design-system.md */

:root{
  /* color · core */
  --dfl-page:#FFFFFF; --dfl-surface:#F7F9FB; --dfl-rule:#E2E8ED; --dfl-rule-strong:#101923;
  --dfl-ink:#101923; --dfl-text:#3D4852; --dfl-muted:#6B7785; --dfl-placeholder:#8C96A2; --dfl-disabled:#D3D9DF;
  --dfl-accent:#1261A6; --dfl-accent-hover:#0E4D84; --dfl-accent-active:#0A3A64; --dfl-accent-soft:#E9F2F9;
  --dfl-exception:#81394A; --dfl-exception-hover:#652C3A; --dfl-exception-soft:#F3E6E9;
  /* color · graphite ramp */
  --dfl-g50:#F7F9FB; --dfl-g100:#E2E8ED; --dfl-g200:#D3D9DF; --dfl-g300:#B3BBC4; --dfl-g400:#8C96A2; --dfl-g500:#6B7785;
  --dfl-g600:#56636F; --dfl-g700:#3D4852; --dfl-g800:#2C3945; --dfl-g900:#1B2733; --dfl-g950:#101923;
  /* color · signal blue ramp */
  --dfl-b50:#F4F9FC; --dfl-b100:#E9F2F9; --dfl-b200:#C5DDF4; --dfl-b300:#9AC5EC; --dfl-b400:#6AAAE2; --dfl-b500:#3A8FD6;
  --dfl-b600:#1A76C4; --dfl-b700:#1261A6; --dfl-b800:#0E4D84; --dfl-b900:#0A3A64; --dfl-b950:#072A48;
  /* color · burgundy ramp */
  --dfl-r50:#FAF4F5; --dfl-r100:#F3E6E9; --dfl-r200:#E6CDD3; --dfl-r300:#D4A6B1; --dfl-r400:#C2858F; --dfl-r500:#B36A7A;
  --dfl-r600:#9C4E60; --dfl-r700:#81394A; --dfl-r800:#652C3A; --dfl-r900:#4A1F2B; --dfl-r950:#33141D;
  /* color · semantic */
  --dfl-positive:#1F7A5C; --dfl-positive-soft:#E4F1EC; --dfl-caution:#B0681B; --dfl-caution-soft:#F7EEE1;
  --dfl-negative:#A83A3A; --dfl-negative-soft:#F6E6E6;
  /* color · data series */
  --dfl-s1:#1261A6; --dfl-s2:#1F7A5C; --dfl-s3:#B0681B; --dfl-s4:#5B4FA8; --dfl-s5:#81394A; --dfl-s6:#6B7785;
  /* type */
  --dfl-font-sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --dfl-font-mono:'IBM Plex Mono',Menlo,Consolas,monospace;
  --dfl-font-wordmark:'Public Sans','Helvetica Neue',Arial,sans-serif;
  /* type scale · homepage (monumental, 1.2x of the system table) */
  --dfl-display:125px; --dfl-h1:58px; --dfl-h2:53px; --dfl-h3:36px; --dfl-h4:22px;
  --dfl-lede:24px; --dfl-body:20px; --dfl-small:17px; --dfl-caption:14px; --dfl-label:12px; --dfl-kicker:12px; --dfl-data:13px;
  /* spacing */
  --dfl-space-1:4px; --dfl-space-2:8px; --dfl-space-3:12px; --dfl-space-4:16px; --dfl-space-6:24px; --dfl-space-8:32px;
  --dfl-space-12:48px; --dfl-space-16:64px; --dfl-space-24:96px; --dfl-space-28:112px; --dfl-space-32:128px;
  --dfl-section:112px; --dfl-band:128px; --dfl-gutter:24px; --dfl-container:1296px; --dfl-container-pad:56px;
  /* elevation (tooltips and dialogs only; never cards) */
  --dfl-shadow-1:0 4px 12px rgba(16,25,35,.08); --dfl-shadow-2:0 12px 32px rgba(16,25,35,.12);
  --dfl-radius:0;
}

/* base */
html,body{margin:0;background:var(--dfl-page);color:var(--dfl-ink);font-family:var(--dfl-font-sans);-webkit-font-smoothing:antialiased}
*,*:before,*:after{box-sizing:border-box}
a{color:var(--dfl-accent)} a:hover{color:var(--dfl-accent-hover)}
.dfl-root{background:var(--dfl-page);color:var(--dfl-ink);font-family:var(--dfl-font-sans)}
.dfl-container{width:min(100% - 2*var(--dfl-container-pad),var(--dfl-container));margin:0 auto}

/* type */
.dfl-display{font-size:var(--dfl-display);font-weight:600;letter-spacing:-0.045em;line-height:.94;margin:0}
.dfl-h1{font-size:var(--dfl-h1);font-weight:600;letter-spacing:-0.03em;line-height:1.02;margin:0}
.dfl-h2{font-size:var(--dfl-h2);font-weight:500;letter-spacing:-0.03em;line-height:1.05;margin:0}
.dfl-h3{font-size:var(--dfl-h3);font-weight:600;letter-spacing:-0.02em;line-height:1.1;margin:0}
.dfl-h4{font-size:var(--dfl-h4);font-weight:500;line-height:1.3;margin:0}
.dfl-lede{font-size:var(--dfl-lede);line-height:1.5;color:var(--dfl-text);margin:0}
.dfl-body{font-size:var(--dfl-body);line-height:1.6;color:var(--dfl-text);margin:0;max-width:72ch}
.dfl-small{font-size:var(--dfl-small);line-height:1.55;color:var(--dfl-text);margin:0}
.dfl-caption{font-size:var(--dfl-caption);line-height:1.45;color:var(--dfl-muted);margin:0}
.dfl-kicker{font-family:var(--dfl-font-mono);font-size:var(--dfl-kicker);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dfl-accent);margin:0}
.dfl-label{font-family:var(--dfl-font-mono);font-size:var(--dfl-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dfl-muted);margin:0}
.dfl-mono{font-family:var(--dfl-font-mono)}
.dfl-data{font-family:var(--dfl-font-mono);font-size:var(--dfl-data);font-variant-numeric:tabular-nums}
.dfl-accent{color:var(--dfl-accent)} .dfl-exception{color:var(--dfl-exception)}

/* logo */
.dfl-lockup{display:inline-flex;align-items:center;color:var(--dfl-ink);text-decoration:none}
.dfl-lockup svg{flex-shrink:0}
.dfl-wordmark{display:inline-flex;align-items:baseline;gap:.42em;font-family:var(--dfl-font-wordmark);line-height:1;letter-spacing:.075em;text-transform:uppercase;white-space:nowrap}
.dfl-wordmark b{font-weight:600} .dfl-wordmark span{font-weight:500}

/* buttons and links */
.dfl-btn{font-family:var(--dfl-font-sans);font-size:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;height:52px;padding:0 28px;border:1px solid var(--dfl-ink);background:var(--dfl-ink);color:#fff;display:inline-flex;align-items:center;gap:12px;text-decoration:none;cursor:pointer;border-radius:var(--dfl-radius)}
.dfl-btn:hover{background:var(--dfl-g900);border-color:var(--dfl-g900)} .dfl-btn:active{background:var(--dfl-g800)}
.dfl-btn:focus-visible{outline:2px solid var(--dfl-accent);outline-offset:2px}
.dfl-btn[disabled],.dfl-btn.is-disabled{background:var(--dfl-disabled);border-color:var(--dfl-disabled);color:var(--dfl-placeholder);cursor:not-allowed}
.dfl-btn--secondary{background:transparent;color:var(--dfl-ink)} .dfl-btn--secondary:hover{background:var(--dfl-surface)} .dfl-btn--secondary:active{background:var(--dfl-rule)}
.dfl-btn--reverse{background:#fff;color:var(--dfl-ink);border-color:#fff}
.dfl-btn--small{height:36px;padding:0 14px;font-size:10px;font-family:var(--dfl-font-mono);letter-spacing:.08em}
.dfl-btn--small[aria-pressed=true]{background:var(--dfl-ink);color:#fff}
.dfl-link{color:var(--dfl-accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.dfl-arrow{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dfl-accent);text-decoration:none}
.dfl-arrow:hover{text-decoration:underline;text-underline-offset:4px}

/* tags */
.dfl-tag{font-family:var(--dfl-font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;display:inline-block;background:var(--dfl-surface);color:var(--dfl-text);border:1px solid var(--dfl-rule)}
.dfl-tag--domain{background:var(--dfl-accent-soft);color:var(--dfl-accent);border-color:transparent}
.dfl-tag--exception{background:var(--dfl-exception-soft);color:var(--dfl-exception);border-color:transparent}
.dfl-tag--positive{background:var(--dfl-positive-soft);color:var(--dfl-positive);border-color:transparent}
.dfl-tag--caution{background:var(--dfl-caution-soft);color:var(--dfl-caution);border-color:transparent}

/* nav */
.dfl-nav{height:88px;display:flex;align-items:center;justify-content:space-between}
.dfl-nav__links{display:flex;gap:36px;align-items:center;font-size:17px;color:var(--dfl-ink)}
.dfl-nav__links a{color:var(--dfl-ink);text-decoration:none}
.dfl-nav__links a[aria-current]{font-weight:500;border-bottom:1px solid var(--dfl-ink);padding-bottom:2px}

/* brackets */
.dfl-frame{display:grid;grid-template-columns:56px 1fr 56px;gap:32px}
.dfl-frame__br{position:relative} .dfl-frame__br svg{position:absolute;inset:0;width:100%;height:100%}
.dfl-frame__br path{fill:none;stroke:var(--dfl-ink);stroke-width:2.6;vector-effect:non-scaling-stroke}
.dfl-frame--reverse .dfl-frame__br path{stroke:#fff}

/* sections */
.dfl-section{padding:var(--dfl-section) 0;background:var(--dfl-page)}
.dfl-section--surface{background:var(--dfl-surface)}
.dfl-section--band{background:var(--dfl-ink);color:#fff;padding:var(--dfl-band) 0}
.dfl-section--band .dfl-body,.dfl-section--band .dfl-lede{color:var(--dfl-b200)}
.dfl-section--band .dfl-kicker{color:var(--dfl-b400)}

/* hero */
.dfl-hero{position:relative;padding:56px 0 96px;overflow:hidden}
.dfl-hero__vis{position:absolute;right:0;top:0;width:56%;height:100%;z-index:0}
.dfl-hero__vis:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0) 40%)}
.dfl-hero__in{position:relative;z-index:1;padding:40px 0}
.dfl-hero .dfl-display{max-width:9ch;margin-bottom:34px}
.dfl-hero .dfl-lede{max-width:32ch;margin-bottom:38px}

/* statement */
.dfl-statement{font-size:58px;font-weight:500;letter-spacing:-0.025em;line-height:1.15;margin:0 0 32px;max-width:22ch}
.dfl-statement b{color:var(--dfl-accent);font-weight:500}
.dfl-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px;padding-top:32px;border-top:1px solid var(--dfl-g200)}
.dfl-points b{display:block;font-size:19px;font-weight:600;margin-bottom:8px}
.dfl-points p{font-size:18px;line-height:1.55;color:var(--dfl-text);margin:0}

/* domain grid */
.dfl-section__head{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:48px}
.dfl-domains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--dfl-rule);border-top:2px solid var(--dfl-ink)}
.dfl-domain{display:block;background:var(--dfl-page);padding:40px 28px 36px;text-decoration:none;color:var(--dfl-ink);min-height:300px;position:relative}
.dfl-domain:hover{background:var(--dfl-surface)}
.dfl-domain__n{font-family:var(--dfl-font-mono);font-size:13px;color:var(--dfl-accent)}
.dfl-domain h3{font-size:36px;font-weight:600;letter-spacing:-0.02em;margin:20px 0 14px}
.dfl-domain p{font-size:18px;line-height:1.55;color:var(--dfl-text);margin:0 0 48px}
.dfl-domain .dfl-arrow{position:absolute;left:28px;bottom:32px}

/* two-column band content */
.dfl-split{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:start}
.dfl-split--even{grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.dfl-facts{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px;padding-top:40px;border-top:1px solid var(--dfl-g800)}
.dfl-facts b{display:block;font-size:19px;font-weight:500;margin-bottom:8px}
.dfl-facts span{font-size:18px;color:var(--dfl-g400);line-height:1.55}
.dfl-spec{margin:36px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;padding-top:28px;border-top:1px solid var(--dfl-g200)}
.dfl-spec dt{font-family:var(--dfl-font-mono);font-size:12px;color:var(--dfl-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.dfl-spec dd{margin:0;font-size:17px;color:var(--dfl-ink)}

/* research cards */
.dfl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.dfl-card{background:var(--dfl-surface);padding:40px 36px 36px;min-height:340px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.dfl-card:hover{outline:1px solid var(--dfl-ink)}
.dfl-card__tag{font-size:16px;color:var(--dfl-accent);font-weight:500}
.dfl-card h3{font-size:29px;font-weight:500;letter-spacing:-0.015em;line-height:1.25;margin:16px 0 12px}
.dfl-card p{font-size:18px;line-height:1.6;color:var(--dfl-text);margin:0 0 auto}
.dfl-card time{display:block;font-family:var(--dfl-font-mono);font-size:13px;color:var(--dfl-muted);margin-top:36px}

/* engagement list (closing band) */
.dfl-shapes{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.dfl-shapes li{padding:20px 0;border-top:1px solid var(--dfl-g800);font-size:19px;line-height:1.5}
.dfl-shapes li b{display:block;font-weight:500;margin-bottom:4px} .dfl-shapes li span{color:var(--dfl-g400);font-size:16px}

/* tables */
.dfl-table{border-collapse:collapse;width:100%}
.dfl-table th{font-family:var(--dfl-font-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dfl-muted);text-align:left;padding:12px 16px;background:var(--dfl-surface);border-bottom:1px solid var(--dfl-rule)}
.dfl-table td{font-size:14px;color:var(--dfl-text);padding:12px 16px;border-bottom:1px solid var(--dfl-rule)}
.dfl-table td.num,.dfl-table th.num{font-family:var(--dfl-font-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.dfl-table tr:hover td{background:var(--dfl-surface)} .dfl-table tr[aria-selected=true] td{background:var(--dfl-accent-soft)}

/* forms */
.dfl-field label{font-size:12px;font-weight:500;color:var(--dfl-ink);display:block;margin-bottom:6px}
.dfl-input{font-family:var(--dfl-font-sans);font-size:14px;height:44px;width:100%;padding:0 14px;border:1px solid var(--dfl-g300);background:#fff;color:var(--dfl-ink);border-radius:0}
.dfl-input::placeholder{color:var(--dfl-placeholder)}
.dfl-input:focus{border-color:var(--dfl-accent);outline:2px solid var(--dfl-accent);outline-offset:1px}
.dfl-input.is-error{border-color:var(--dfl-negative)} .dfl-field__error{font-family:var(--dfl-font-mono);font-size:9px;color:var(--dfl-negative);margin-top:8px}
textarea.dfl-input{height:96px;padding:12px 14px}

/* callouts */
.dfl-callout{border:1px solid var(--dfl-rule);padding:16px 20px;background:var(--dfl-surface)}
.dfl-callout--exception{border-color:var(--dfl-exception);background:#fff}
.dfl-callout .dfl-label{margin-bottom:8px}

/* footer */
.dfl-footer{padding:48px 0 20px}
.dfl-footer__grid{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:32px}
.dfl-footer__links{display:flex;gap:48px;font-size:17px;color:var(--dfl-text);line-height:2}
.dfl-footer__base{font-family:var(--dfl-font-mono);font-size:11px;color:var(--dfl-muted);margin:0;width:100%;padding-top:20px;border-top:1px solid var(--dfl-rule)}
.dfl-menu{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:0;background:transparent}
.dfl-menu i{display:block;width:22px;height:1.5px;background:#101923}

/* responsive */
@media (max-width:1023px){
  :root{--dfl-container-pad:32px;--dfl-display:80px;--dfl-h1:44px;--dfl-h2:40px;--dfl-section:80px;--dfl-band:96px}
  .dfl-nav{height:72px} .dfl-nav__links{display:none} .dfl-menu{display:flex}
  .dfl-statement{font-size:40px} .dfl-split,.dfl-split--even{grid-template-columns:1fr;gap:40px}
  .dfl-domains{grid-template-columns:1fr 1fr} .dfl-cards{grid-template-columns:1fr} .dfl-section__head{grid-template-columns:1fr;gap:16px}
  .dfl-hero__vis{width:70%}
}
@media (max-width:767px){
  :root{--dfl-container-pad:20px;--dfl-display:52px;--dfl-h1:36px;--dfl-h2:32px;--dfl-h3:28px;--dfl-lede:18px;--dfl-body:17px;--dfl-section:64px;--dfl-band:72px}
  .dfl-hero{padding:32px 0 0} .dfl-hero__vis{position:relative;width:100%;height:240px;margin-top:32px} .dfl-hero__vis:after{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 40%)}
  .dfl-hero .dfl-display{max-width:none} .dfl-hero__in{padding:0}
  .dfl-frame{grid-template-columns:20px 1fr 20px;gap:14px}
  .dfl-statement{font-size:30px} .dfl-points{grid-template-columns:1fr;gap:24px}
  .dfl-domains{grid-template-columns:1fr} .dfl-domain{min-height:0;padding:28px 24px 64px}
  .dfl-facts,.dfl-spec,.dfl-shapes{grid-template-columns:1fr}
  .dfl-card{min-height:0;padding:28px}
  .dfl-closing{grid-template-columns:1fr !important;gap:32px !important}
  .dfl-footer__grid{align-items:flex-start} .dfl-footer__links{gap:32px}
  .dfl-btn{height:48px;padding:0 20px;font-size:14px}
}