/* Generated by scripts/build.mjs from tokens.json. Do not edit. */
/* portfolio-design-system 1.1.1 */

:root {
  /* palette */
  --black     : #000000; /* page background */
  --grey-900  : #111111; /* hero image gradient base; the chat element's layer */
  --grey-850  : #2a2a2a; /* hero image gradient top */
  --grey-800  : #333333; /* hairline rules on black */
  --redact    : #4a4a4a; /* spec bar, the redacted block */
  --grey-600  : #666666; /* strong border on black; muted text on light */
  --grey-500  : #8a8a8a; /* slide media placeholder ground */
  --grey-400  : #a3a3a3; /* secondary text on black */
  --grey-250  : #d0d0d0; /* mega menu surface, top of the gradient */
  --grey-200  : #d8d8d4; /* body text on black, one step down from white */
  --card-slide: #dcdcd7; /* the slide panel */
  --grey-150  : #dedede; /* mega menu surface, bottom of the gradient */
  --grey-100  : #e6e6e6; /* filled button hover */
  --off-white : #f2f1ec; /* the card and light prose surface */
  --white     : #ffffff; /* text, and the single accent */
  --lime      : #d4ff3a; /* slide media placeholder label */
  --green     : #00e572; /* the chat composer: the one place to act */
  --red       : #ff6b6b; /* chat error text */
  --black-94  : rgba(0, 0, 0, 0.94); /* lightbox backdrop */
  --black-55  : rgba(0, 0, 0, 0.55); /* click-to-load embed scrim */
  --black-35  : rgba(0,0,0,0.35); /* embed scrim on hover; open mega menu outline */
  --white-08  : rgba(255,255,255,0.08); /* hero image grid line */
  --grey-35   : rgba(128,128,128,0.35); /* table rule inside an accordion row */

  /* semantic (dark) */
  --bg           : var(--black); /* = #000000 */
  --text         : var(--white); /* = #ffffff */
  --text-2       : var(--grey-200); /* = #d8d8d4 */
  --text-3       : var(--grey-400); /* = #a3a3a3 */
  --text-muted   : var(--grey-600); /* = #666666 */
  --border       : var(--grey-800); /* = #333333 */
  --border-strong: var(--grey-600); /* = #666666 */
  --accent       : var(--white); /* = #ffffff */
  --accent-hover : var(--grey-100); /* = #e6e6e6 */
  --accent-text  : var(--black); /* = #000000 */
  --surface      : var(--off-white); /* = #f2f1ec */
  --surface-2    : var(--card-slide); /* = #dcdcd7 */
  --surface-menu : var(--grey-250); /* = #d0d0d0 */
  --on-surface   : var(--black); /* = #000000 */
  --on-surface-2 : var(--grey-400); /* = #a3a3a3 */
  --scrim        : var(--black-55); /* = rgba(0, 0, 0, 0.55) */
  --scrim-hover  : var(--black-35); /* = rgba(0,0,0,0.35) */
  --overlay      : var(--black-94); /* = rgba(0, 0, 0, 0.94) */
  --hairline     : var(--grey-35); /* = rgba(128,128,128,0.35) */
  --grid-line    : var(--white-08); /* = rgba(255,255,255,0.08) */
  --layer        : var(--grey-900); /* = #111111 */
  --action       : var(--green); /* = #00e572 */
  --error        : var(--red); /* = #ff6b6b */

  /* type */
  --font-sans        : "Helvetica Neue", "Inter", Helvetica, Arial, sans-serif;
  --font-mono        : "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --type-11          : 11px;
  --type-12          : 12px;
  --type-13          : 13px;
  --type-14          : 14px;
  --type-15          : 15px;
  --type-16          : 16px;
  --type-17          : 17px;
  --type-18          : 18px;
  --type-20          : 20px;
  --type-22          : 22px;
  --type-24          : 24px;
  --type-28          : 28px;
  --type-32          : 32px;
  --type-34          : 34px;
  --type-40          : 40px;
  --type-44          : 44px;
  --type-96          : 96px;
  --type-140         : 140px;
  --type-hero        : clamp(120px, 14vw, 240px);
  --type-hero-sm     : clamp(56px, 19vw, 120px);
  --type-statement   : clamp(80px, 11vw, 200px);
  --type-statement-sm: clamp(48px, 15vw, 80px);
  --tracking-tightest: -0.05em;
  --tracking-hero    : -0.045em;
  --tracking-tighter : -0.04em;
  --tracking-tight   : -0.03em;
  --tracking-snug    : -0.02em;
  --tracking-body    : -0.01em;
  --tracking-wide    : 0.01em;
  --tracking-wider   : 0.02em;
  --tracking-mono    : 0.06em;
  --tracking-caps    : 0.08em;
  --tracking-widest  : 0.1em;
  --tracking-logo    : 0.22em;
  --leading-flat     : 0.8;
  --leading-crop     : 0.85;
  --leading-none     : 1;
  --leading-tight    : 1.15;
  --leading-snug     : 1.3;
  --leading-body     : 1.35;
  --leading-copy     : 1.4;
  --leading-open     : 1.5;
  --leading-loose    : 1.6;
  --weight-extralight: 200;
  --weight-light     : 300;
  --weight-regular   : 400;
  --weight-medium    : 500;
  --weight-bold      : 700;

  /* space and size */
  --space-4      : 4px;
  --space-8      : 8px;
  --space-10     : 10px;
  --space-12     : 12px;
  --space-16     : 16px;
  --space-20     : 20px;
  --space-24     : 24px;
  --space-32     : 32px;
  --space-36     : 36px;
  --space-40     : 40px;
  --space-48     : 48px;
  --space-60     : 60px;
  --space-64     : 64px;
  --space-80     : 80px;
  --space-120    : 120px;
  --space-160    : 160px;
  --space-200    : 200px;
  --size-touch   : 44px;
  --size-control : 48px;
  --size-mark    : 26px;
  --size-mark-h  : 27px;
  --size-pixel   : 36px;
  --size-pixel-sm: 26px;
  --radius-none  : 0;
  --radius-sm    : 6px;
  --radius-phone : 28px;

  /* motion */
  --dur-fast: 0.16s;
  --dur-base: 0.2s;
  --dur-bar : 0.22s;
  --dur-slow: 0.3s;
  --ease    : ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* layout */
  --gutter: 40px; /* page side padding; 20px below the sm breakpoint */
  --nav-h : 96px; /* fixed nav height; 72px below the sm breakpoint */
  --max   : 1920px; /* content container cap */
}

/* Layout tokens shrink below the sm breakpoint (768px). */
@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --nav-h: 72px;
  }
}

/* Reserved for Phase 4. The light semantic set is defined there; until a
   page needs it this selector is intentionally empty. */
/* [data-theme="light"] { } */