/* Pencil Box tokens: the Department of Information flavor of Roma.
   GENERATED from _data/tokens.json. Do not edit by hand.
   Dark is the default. Put data-theme="light" on <html> or any section for Manila. */

:root {
  /* Primitives. Components use the roles below, not these. */
  --color-black-100: #232323; /* Department Black */
  --color-black-90: #393939;
  --color-black-75: #5A5A5A;
  --color-black-65: #707070;
  --color-black-50: #919191;
  --color-black-40: #A7A7A7;
  --color-black-30: #BDBDBD;
  --color-black-20: #D3D3D3;
  --color-black-10: #E9E9E9;
  --color-manila-100: #FBFBF4; /* Manila */
  --color-blue-100: #0000FF; /* Beaurocracy Blue */
  --color-blue-75: #4040FF;
  --color-blue-50: #8080FF;
  --color-blue-25: #BFBFFF;
  --color-blue-20: #CCCCFF;
  --color-blue-15: #D9D9FF;
  --color-blue-10: #E6E6FF;
  --color-blue-5: #F2F2FF;
  --color-blue-900: #1C1C4F;
  --color-red-100: #FF2576; /* Embargo Red */
  --color-red-75: #FF5C98;
  --color-red-50: #FF92BB;
  --color-red-25: #FFC9DD;
  --color-red-10: #FFE9F1;
  --color-red-700: #C82561;
  --color-red-900: #44232F;
  --color-yellow-100: #FFD600; /* Safety Yellow */
  --color-yellow-75: #FFE040;
  --color-yellow-50: #FFEB80;
  --color-yellow-25: #FFF5BF;
  --color-yellow-10: #FFFBE6;
  --color-green-100: #98F2A8; /* Ledger Green */
  --color-green-75: #B2F5BE;
  --color-green-50: #CCF9D4;
  --color-green-25: #E5FCE9;
  --color-green-10: #F5FEF6;

  /* Layout */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-none: 0;
  --radius-full: 999px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --control-height-sm: 32px;
  --control-height-md: 44px;
  --control-height-lg: 56px;

  /* Type */
  --font-display: neue-haas-grotesk-display, "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text: neue-haas-grotesk-text, "Neue Haas Grotesk Text Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-reading: "Libre Baskerville", Baskerville, Georgia, "Times New Roman", serif;
  --text-heading-xl: 900 2.75rem/1.05 var(--font-display);
  --text-heading-l: 900 2.0rem/1.1 var(--font-display);
  --text-heading-m: 900 1.5rem/1.15 var(--font-display);
  --text-heading-s: 700 1.25rem/1.2 var(--font-display);
  --text-display-light: 400 2.75rem/1.05 var(--font-display);
  --text-action-lg: 700 1.125rem/1.0 var(--font-text);
  --text-action-md: 700 1.0rem/1.0 var(--font-text);
  --text-label-m: 700 0.875rem/1.0 var(--font-text);
  --text-label-s: 700 0.75rem/1.0 var(--font-text);
  --text-body-l: 400 1.125rem/1.4 var(--font-text);
  --text-body-m: 400 1.0rem/1.45 var(--font-text);
  --text-body-s: 400 0.875rem/1.45 var(--font-text);
  --text-caption: 400 0.75rem/1.4 var(--font-text);
  --text-reading-m: 400 1.125rem/1.5 var(--font-reading);
  --text-reading-l: 400 1.375rem/1.45 var(--font-reading);
}

/* Dark: the default. Department Black is the dominant color of any page. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: var(--color-black-100);
  --color-bg-surface: var(--color-black-100);
  --color-bg-muted: var(--color-black-90);
  --color-bg-inverse: var(--color-manila-100);
  --color-bg-accent: var(--color-red-100);
  --color-bg-accent-subtle: var(--color-red-900);
  --color-bg-emphasis: var(--color-blue-100);
  --color-text-primary: var(--color-manila-100);
  --color-text-secondary: var(--color-black-20);
  --color-text-muted: var(--color-black-40);
  --color-text-inverse: var(--color-black-100);
  --color-text-accent: var(--color-red-75);
  --color-text-link: var(--color-blue-50);
  --color-text-on-accent: var(--color-manila-100);
  --color-text-on-emphasis: var(--color-manila-100);
  --color-border-subtle: var(--color-black-75);
  --color-border-default: var(--color-manila-100);
  --color-border-focus: var(--color-blue-50);
  --color-border-accent: var(--color-red-100);
  --color-action-primary-bg: var(--color-manila-100);
  --color-action-primary-bg-hover: var(--color-black-10);
  --color-action-primary-bg-pressed: var(--color-black-20);
  --color-action-primary-text: var(--color-black-100);
  --color-action-secondary-bg: var(--color-black-90);
  --color-action-secondary-bg-hover: var(--color-black-75);
  --color-action-secondary-bg-pressed: var(--color-black-65);
  --color-action-secondary-text: var(--color-manila-100);
  --color-action-disabled-bg: var(--color-black-90);
  --color-action-disabled-text: var(--color-black-65);
  --color-feedback-danger-bg: var(--color-red-900);
  --color-feedback-danger-fg: var(--color-red-75);
  --color-feedback-success-bg: var(--color-green-100);
  --color-feedback-success-fg: var(--color-black-100);
  --color-feedback-info-bg: var(--color-blue-900);
  --color-feedback-info-fg: var(--color-blue-50);
  --color-feedback-warning-bg: var(--color-yellow-100);
  --color-feedback-warning-fg: var(--color-black-100);
}

/* Light: Manila, the secondary color. Opt in with data-theme="light". */
[data-theme="light"] {
  color-scheme: light;
  --color-bg-page: var(--color-manila-100);
  --color-bg-surface: var(--color-manila-100);
  --color-bg-muted: var(--color-black-10);
  --color-bg-inverse: var(--color-black-100);
  --color-bg-accent: var(--color-red-100);
  --color-bg-accent-subtle: var(--color-red-10);
  --color-bg-emphasis: var(--color-blue-100);
  --color-text-primary: var(--color-black-100);
  --color-text-secondary: var(--color-black-75);
  --color-text-muted: var(--color-black-65);
  --color-text-inverse: var(--color-manila-100);
  --color-text-accent: var(--color-red-700);
  --color-text-link: var(--color-blue-100);
  --color-text-on-accent: var(--color-manila-100);
  --color-text-on-emphasis: var(--color-manila-100);
  --color-border-subtle: var(--color-black-20);
  --color-border-default: var(--color-black-100);
  --color-border-focus: var(--color-blue-100);
  --color-border-accent: var(--color-red-100);
  --color-action-primary-bg: var(--color-black-100);
  --color-action-primary-bg-hover: var(--color-black-90);
  --color-action-primary-bg-pressed: var(--color-black-75);
  --color-action-primary-text: var(--color-manila-100);
  --color-action-secondary-bg: var(--color-black-10);
  --color-action-secondary-bg-hover: var(--color-black-20);
  --color-action-secondary-bg-pressed: var(--color-black-30);
  --color-action-secondary-text: var(--color-black-100);
  --color-action-disabled-bg: var(--color-black-10);
  --color-action-disabled-text: var(--color-black-40);
  --color-feedback-danger-bg: var(--color-red-10);
  --color-feedback-danger-fg: var(--color-red-700);
  --color-feedback-success-bg: var(--color-green-100);
  --color-feedback-success-fg: var(--color-black-100);
  --color-feedback-info-bg: var(--color-blue-10);
  --color-feedback-info-fg: var(--color-blue-100);
  --color-feedback-warning-bg: var(--color-yellow-100);
  --color-feedback-warning-fg: var(--color-black-100);
}

/* Focus ring: Beaurocracy Blue, never Embargo Red, so focus never reads as an error. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--border-width-2) solid var(--color-border-focus);
  outline-offset: 2px;
}