/* ============================================================
   put.io design tokens
   Do not edit directly. Generated from DTCG token JSON in tokens/.

   Brand constant: Yellow #FDCE45 (sacred - never changes)
   Canonical source: DTCG-compatible JSON in tokens/
   ============================================================ */

/* -- Light (default) ------------------------------------------------ */
:root {
  --button-secondary-bg: hsl(0, 0%, 95.1%);
  --button-secondary-fg: hsl(0, 0%, 9.0%);
  --input-bg: hsl(0, 0%, 100%);
  --input-border: hsl(0, 0%, 85.8%);
  --field-bg: hsl(0, 0%, 100%);
  --field-bg-disabled: hsl(0, 0%, 97.3%);
  --field-border: hsl(0, 0%, 85.8%);
  --field-border-hover: hsl(0, 0%, 78.0%);
  --field-border-focus: hsl(0, 0%, 78.0%);
  --field-text: hsl(0, 0%, 9.0%);
  --field-placeholder: hsl(0, 0%, 43.5%);
  --field-ring: 0 0 0 1px hsl(0, 0%, 78.0%);
  --panel-bg: hsl(0, 0%, 95.1%);
  --panel-border: hsl(0, 0%, 88.7%);
  --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.08);
  --background: hsl(0, 0%, 99.0%);
  --foreground: hsl(0, 0%, 9.0%);
  --foreground-muted: hsl(0, 0%, 43.5%);
  --success: hsl(153, 67.0%, 28.5%);
  --destructive: hsl(358, 65.0%, 48.7%);
  --muted: hsl(0, 0%, 97.3%);
  --muted-foreground: hsl(0, 0%, 43.5%);
  --accent: hsl(0, 0%, 95.1%);
  --accent-foreground: hsl(0, 0%, 9.0%);
  --card: hsl(0, 0%, 95.1%);
  --card-foreground: hsl(0, 0%, 9.0%);
  --popover: hsl(0, 0%, 95.1%);
  --popover-foreground: hsl(0, 0%, 9.0%);
  --input: hsl(0, 0%, 85.8%);
  --file-row-bg: transparent;
  --file-row-bg-hover: hsl(0, 0%, 97.3%);
  --notification-info-bg: hsl(0, 0%, 97.3%);
  --notification-danger-bg: hsl(360, 100%, 96.8%);
  --bg: hsl(0, 0%, 99.0%);
  --bg-secondary: hsl(0, 0%, 97.3%);
  --component-bg: hsl(0, 0%, 95.1%);
  --component-bg-hover: hsl(0, 0%, 93.0%);
  --component-bg-active: hsl(0, 0%, 90.9%);
  --line: hsl(0, 0%, 88.7%);
  --border: hsl(0, 0%, 85.8%);
  --border-hover: hsl(0, 0%, 78.0%);
  --solid: hsl(0, 0%, 56.1%);
  --solid-hover: hsl(0, 0%, 52.3%);
  --text-secondary: hsl(0, 0%, 43.5%);
  --text: hsl(0, 0%, 9.0%);
  --green-bg: hsl(136, 50.0%, 98.9%);
  --green-bg-secondary: hsl(138, 62.5%, 96.9%);
  --green-component-bg: hsl(139, 55.2%, 94.5%);
  --green-component-bg-hover: hsl(140, 48.7%, 91.0%);
  --green-component-bg-active: hsl(141, 43.7%, 86.0%);
  --green-line: hsl(143, 40.3%, 79.0%);
  --green-border: hsl(146, 38.5%, 69.0%);
  --green-border-hover: hsl(151, 40.2%, 54.1%);
  --green-solid: hsl(151, 55.0%, 41.5%);
  --green-solid-hover: hsl(152, 57.5%, 37.6%);
  --green-text-secondary: hsl(153, 67.0%, 28.5%);
  --green-text: hsl(155, 40.0%, 14.0%);
  --red-bg: hsl(359, 100%, 99.4%);
  --red-bg-secondary: hsl(359, 100%, 98.6%);
  --red-component-bg: hsl(360, 100%, 96.8%);
  --red-component-bg-hover: hsl(360, 97.9%, 94.8%);
  --red-component-bg-active: hsl(360, 90.2%, 91.9%);
  --red-line: hsl(360, 81.7%, 87.8%);
  --red-border: hsl(359, 74.2%, 81.7%);
  --red-border-hover: hsl(359, 69.5%, 74.3%);
  --red-solid: hsl(358, 75.0%, 59.0%);
  --red-solid-hover: hsl(358, 69.4%, 55.2%);
  --red-text-secondary: hsl(358, 65.0%, 48.7%);
  --red-text: hsl(354, 50.0%, 14.6%);
  --yellow-bg: hsl(60, 54.0%, 98.5%);
  --yellow-bg-secondary: hsl(52, 100%, 95.5%);
  --yellow-component-bg: hsl(55, 100%, 90.9%);
  --yellow-component-bg-hover: hsl(54, 100%, 86.6%);
  --yellow-component-bg-active: hsl(52, 97.9%, 82.0%);
  --yellow-line: hsl(50, 89.4%, 76.1%);
  --yellow-border: hsl(47, 80.4%, 68.0%);
  --yellow-border-hover: hsl(48, 100%, 46.1%);
  --yellow-solid-hover: hsl(44.7, 97.9%, 63.1%);
  --yellow-text-secondary: hsl(42, 100%, 29.0%);
  --yellow-text: hsl(40, 55.0%, 13.5%);
  --lime-3: hsl(85, 76.0%, 92.3%);
  --html-bg: hsl(0, 0%, 97.3%);
  --app-bg: hsl(0, 0%, 100%);
  --nav-bg: hsl(0, 0%, 100%);
  --nav-item-bg: transparent;
  --nav-item-bg-hover: hsl(0, 0%, 95.1%);
  --nav-item-bg-active: hsl(0, 0%, 95.1%);
  --list-item-bg: transparent;
  --list-item-bg-hover: hsl(0, 0%, 97.3%);
  --list-item-bg-active: hsl(0, 0%, 97.3%);
  --list-item-border: hsl(0, 0%, 90.9%);
  --segmented-control-bg: hsl(0, 0%, 95.1%);
  --segmented-control-bg-active: hsl(0, 0%, 100%);
  --transfer-list-item-completing-bg: hsl(85, 76.0%, 92.3%);
  --transfer-list-item-downloading-bg: hsl(85, 76.0%, 92.3%);
  --transfer-list-item-finished-bg: hsl(0, 0%, 97.3%);
  --transfer-list-item-passive-bg: hsl(0, 0%, 99.0%);
  --hi-contrast: hsl(0, 0%, 9.0%);
  --lo-contrast: hsl(0, 0%, 99.0%);
  --transparent: transparent;
  --overlay-inline: hsla(0, 0%, 0%, 0.047);
  --overlay-full: hsla(0, 0%, 0%, 0.439);
  --button-primary-bg: hsl(44.7, 97.9%, 63.1%);
  --button-primary-fg: hsl(0, 0%, 4.0%);
  --button-radius: 6px;
  --input-radius: 6px;
  --panel-radius: 10px;
  --primary: hsl(44.7, 97.9%, 63.1%);
  --primary-foreground: hsl(0, 0%, 0%);
  --success-foreground: hsl(0, 0%, 100%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --solid-foreground: hsl(0, 0%, 100%);
  --ring: hsla(47, 100%, 65%, 0.35);
  --file-row-icon: hsl(44.7, 97.9%, 63.1%);
  --yellow-solid: hsl(44.7, 97.9%, 63.1%);
  --shadow-color: hsl(0, 0%, 78.0%);
  --shadow: hsl(0, 0%, 78.0%);
  --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05);
  --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.08);
  --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.12);
  --shadow-focus-color: hsla(47, 100%, 65%, 0.35);
  --shadow-focus: 0 0 0 3px hsla(47, 100%, 65%, 0.35);
  --font-sans: "GT America", sans-serif;
  --font-display: "GT America", sans-serif;
  --font-ui-mono: "GT America Mono", monospace;
  --font-mono: "Berkeley Mono", "GT America Mono", monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-display: 6rem;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;
  --lh-loose: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-uppercase: 0.08em;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;
  --space-5: 64px;
  --space-6: 128px;
  --space-7: 256px;
  --space-8: 512px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --border-width: 1px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* -- Dark (.dark) --------------------------------------------------- */
.dark {
  --button-secondary-bg: hsl(0, 0%, 13.6%);
  --button-secondary-fg: hsl(0, 0%, 93.0%);
  --input-bg: hsl(0, 0%, 8.5%);
  --input-border: hsl(0, 0%, 24.3%);
  --field-bg: hsl(0, 0%, 8.5%);
  --field-bg-disabled: hsl(0, 0%, 11.0%);
  --field-border: hsl(0, 0%, 24.3%);
  --field-border-hover: hsl(0, 0%, 31.2%);
  --field-border-focus: hsl(0, 0%, 31.2%);
  --field-text: hsl(0, 0%, 93.0%);
  --field-placeholder: hsl(0, 0%, 62.8%);
  --field-ring: 0 0 0 1px hsl(0, 0%, 31.2%);
  --panel-bg: hsl(0, 0%, 13.6%);
  --panel-border: hsl(0, 0%, 20.5%);
  --panel-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.5);
  --background: hsl(0, 0%, 8.5%);
  --foreground: hsl(0, 0%, 93.0%);
  --foreground-muted: hsl(0, 0%, 62.8%);
  --success: hsl(151, 51.7%, 28.4%);
  --destructive: hsl(358, 65.0%, 40.4%);
  --muted: hsl(0, 0%, 11.0%);
  --muted-foreground: hsl(0, 0%, 62.8%);
  --accent: hsl(0, 0%, 13.6%);
  --accent-foreground: hsl(0, 0%, 93.0%);
  --card: hsl(0, 0%, 13.6%);
  --card-foreground: hsl(0, 0%, 93.0%);
  --popover: hsl(0, 0%, 13.6%);
  --popover-foreground: hsl(0, 0%, 93.0%);
  --input: hsl(0, 0%, 24.3%);
  --file-row-bg: transparent;
  --file-row-bg-hover: hsl(0, 0%, 11.0%);
  --notification-info-bg: hsl(0, 0%, 13.6%);
  --notification-danger-bg: hsl(356, 43.4%, 16.4%);
  --bg: hsl(0, 0%, 8.5%);
  --bg-secondary: hsl(0, 0%, 11.0%);
  --component-bg: hsl(0, 0%, 13.6%);
  --component-bg-hover: hsl(0, 0%, 15.8%);
  --component-bg-active: hsl(0, 0%, 17.9%);
  --line: hsl(0, 0%, 20.5%);
  --border: hsl(0, 0%, 24.3%);
  --border-hover: hsl(0, 0%, 31.2%);
  --solid: hsl(0, 0%, 43.9%);
  --solid-hover: hsl(0, 0%, 49.4%);
  --text-secondary: hsl(0, 0%, 62.8%);
  --text: hsl(0, 0%, 93.0%);
  --green-bg: hsl(146, 30.0%, 7.4%);
  --green-bg-secondary: hsl(155, 44.2%, 8.4%);
  --green-component-bg: hsl(155, 46.7%, 10.9%);
  --green-component-bg-hover: hsl(154, 48.4%, 12.9%);
  --green-component-bg-active: hsl(154, 49.7%, 14.9%);
  --green-line: hsl(154, 50.9%, 17.6%);
  --green-border: hsl(153, 51.8%, 21.8%);
  --green-border-hover: hsl(151, 51.7%, 28.4%);
  --green-solid: hsl(151, 55.0%, 41.5%);
  --green-solid-hover: hsl(151, 49.3%, 46.5%);
  --green-text-secondary: hsl(151, 50.0%, 53.2%);
  --green-text: hsl(137, 72.0%, 94.0%);
  --red-bg: hsl(353, 23.0%, 9.8%);
  --red-bg-secondary: hsl(357, 34.4%, 12.0%);
  --red-component-bg: hsl(356, 43.4%, 16.4%);
  --red-component-bg-hover: hsl(356, 47.6%, 19.2%);
  --red-component-bg-active: hsl(356, 51.1%, 21.9%);
  --red-line: hsl(356, 55.2%, 25.9%);
  --red-border: hsl(357, 60.2%, 31.8%);
  --red-border-hover: hsl(358, 65.0%, 40.4%);
  --red-solid: hsl(358, 75.0%, 59.0%);
  --red-solid-hover: hsl(358, 85.3%, 64.0%);
  --red-text-secondary: hsl(358, 100%, 69.5%);
  --red-text: hsl(351, 89.0%, 96.0%);
  --yellow-bg: hsl(45, 100%, 5.5%);
  --yellow-bg-secondary: hsl(46, 100%, 6.7%);
  --yellow-component-bg: hsl(45, 100%, 8.7%);
  --yellow-component-bg-hover: hsl(45, 100%, 10.4%);
  --yellow-component-bg-active: hsl(47, 100%, 12.1%);
  --yellow-line: hsl(49, 100%, 14.3%);
  --yellow-border: hsl(49, 90.3%, 18.4%);
  --yellow-border-hover: hsl(50, 100%, 22.0%);
  --yellow-solid-hover: hsl(44.7, 97.9%, 63.1%);
  --yellow-text-secondary: hsl(48, 100%, 47.0%);
  --yellow-text: hsl(53, 100%, 91.0%);
  --lime-3: hsl(85, 45%, 12%);
  --html-bg: hsl(0, 0%, 0%);
  --app-bg: hsl(0, 0%, 8.5%);
  --nav-bg: hsl(0, 0%, 8.5%);
  --nav-item-bg: transparent;
  --nav-item-bg-hover: hsl(0, 0%, 13.6%);
  --nav-item-bg-active: hsl(0, 0%, 13.6%);
  --list-item-bg: transparent;
  --list-item-bg-hover: hsl(0, 0%, 11.0%);
  --list-item-bg-active: hsl(0, 0%, 11.0%);
  --list-item-border: hsl(0, 0%, 17.9%);
  --segmented-control-bg: hsl(0, 0%, 8.5%);
  --segmented-control-bg-active: hsl(0, 0%, 13.6%);
  --transfer-list-item-completing-bg: hsl(0, 0%, 13.6%);
  --transfer-list-item-downloading-bg: hsl(0, 0%, 13.6%);
  --transfer-list-item-finished-bg: hsl(0, 0%, 11.0%);
  --transfer-list-item-passive-bg: hsl(0, 0%, 11.0%);
  --hi-contrast: hsl(0, 0%, 93.0%);
  --lo-contrast: hsl(0, 0%, 8.5%);
  --overlay-inline: hsla(0, 0%, 0%, 0.439);
  --overlay-full: hsla(0, 0%, 0%, 0.565);
  --shadow-color: hsl(0, 0%, 0%);
  --shadow: hsl(0, 0%, 0%);
  --shadow-sm: 0 1px 2px hsla(0, 0%, 0%, 0.4);
  --shadow-md: 0 4px 12px hsla(0, 0%, 0%, 0.5);
  --shadow-lg: 0 16px 40px hsla(0, 0%, 0%, 0.6);
}

/* -- Document base ------------------------------------------------- */
html {
  background: var(--html-bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;        /* 14–15 responsive base, per app convention */
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--app-bg);
  color: var(--text);
  margin: 0;
}

/* -- Semantic type ------------------------------------------------- */

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  margin: 0;
}

/* Numeric / tabular UI text — transfer speeds, storage sizes, timestamps */
.num, .tabular {
  font-family: var(--font-ui-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

.subheading {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--text);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-3);
}

.lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

small, .caption {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.button-text {
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  letter-spacing: 0;
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--border-hover);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }

/* -- Utility classes ---------------------------------------------- */
.fg-1      { color: var(--text); }
.fg-2      { color: var(--text-secondary); }
.fg-yellow { color: var(--yellow-text-secondary); }
.fg-green  { color: var(--green-text-secondary); }
.fg-red    { color: var(--red-text-secondary); }

.bg-1           { background: var(--bg); }
.bg-2           { background: var(--bg-secondary); }
.bg-component   { background: var(--component-bg); }
.bg-yellow      { background: var(--yellow-solid); color: var(--primary-foreground); }