/* ==========================================================================
   WEB DESIGN SYSTEM — a classless-first CSS design system
   --------------------------------------------------------------------------
   Load this one file and plain semantic HTML is styled. No classes, no ids
   are required; a small, documented set of contract classes covers the few
   things semantics cannot express (see README.md, "The class contract").

   Source of truth: the Figma file "A Web-based Design System" by
   Stephanie Orkuma and Daniel Nathaniel Olobayo (see reference/).
   Every section below names the Figma frame it implements. Values marked
   "extracted" were read from the file's own exports; values marked
   "inferred" are listed in README.md, "Extraction notes".

   Layers: tokens -> reset -> base -> components -> contract.
   ========================================================================== */

@layer tokens, reset, base, components, contract;

/* ==========================================================================
   TOKENS — Figma frames: "Color Palette", "Typography", "8dp Grid Layout",
   "Elevation Doc", "Buttons", "Opacity" (Components A)
   ========================================================================== */
@layer tokens {
  :root {
    /* --- Color: Primary (extracted, "Color Palette" frame) --- */
    --color-primary-500: #000000;
    --color-primary-400: #333333;
    --color-primary-300: #545454;
    --color-primary-200: #8a8a8a;
    --color-primary-100: #b0b0b0;
    --color-primary-50: #e6e6e6;

    /* --- Color: Secondary + page ground (extracted) --- */
    --color-secondary: #ffffff;
    --color-ground: #f8f7f7;

    /* --- Color: Success (extracted) --- */
    --color-success-600: #339f00;
    --color-success-500: #38af00;
    --color-success-400: #60bf33;
    --color-success-300: #7ac954;
    --color-success-200: #a3da8a;
    --color-success-100: #c1e6b0;
    --color-success-50: #ebf7e6;

    /* --- Color: Warning (extracted) --- */
    --color-warning-600: #cbbb00;
    --color-warning-500: #dfce00;
    --color-warning-400: #e5d833;
    --color-warning-300: #eade54;
    --color-warning-200: #f0e88a;
    --color-warning-100: #f5f0b0;
    --color-warning-50: #fcfae6;

    /* --- Color: Danger (extracted) --- */
    --color-danger-600: #a0001d;
    --color-danger-500: #b00020;
    --color-danger-400: #c0334d;
    --color-danger-300: #ca546a;
    --color-danger-200: #db8a98;
    --color-danger-100: #e7b0ba;
    --color-danger-50: #f7e6e9;

    /* --- Opacity scale (extracted, "Opacity" doc + "Buttons" frame) ---
       Text emphasis on light: 87% / 60% / 38%. On dark: 87% / 60%.
       Surface overlays: 4% / 8% / 12%. */
    --color-ink-87: rgb(0 0 0 / 0.87);
    --color-ink-60: rgb(0 0 0 / 0.6);
    --color-ink-38: rgb(0 0 0 / 0.38);
    --color-paper-87: rgb(255 255 255 / 0.87);
    --color-paper-60: rgb(255 255 255 / 0.6);
    --color-overlay-4: rgb(0 0 0 / 0.04);
    --color-overlay-8: rgb(0 0 0 / 0.08);
    --color-overlay-12: rgb(0 0 0 / 0.12);

    /* --- Type families (extracted, "Typography" frame specimens) ---
       Display + Headings: "New York Extra Large" (Apple's New York serif;
       falls back to ui-serif/Georgia elsewhere).
       Paragraphs, captions, labels, code: "Space Mono". */
    --font-display: "New York Extra Large", "New York", ui-serif, Georgia,
      "Times New Roman", serif;
    --font-text: "Space Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
      Consolas, "Liberation Mono", monospace;

    /* --- Type scale (extracted): "Major Scale", base 16, ratio 1.25 ---
       Steps: 13 / 16 / 20 / 25 / 31 / 39 / 49 / 61. The frame's specimen
       text renders at 64 / 48 / 40 / 32 / 24 (multiples of 8); the tokens
       carry the scale values. See README, "Extraction notes". */
    --text-display: 61px;
    --text-1: 49px; /* Heading 1 */
    --text-2: 39px; /* Heading 2 */
    --text-3: 31px; /* Heading 3 */
    --text-4: 25px; /* Heading 4 */
    --text-lead: 20px; /* Paragraph 1 */
    --text-body: 16px; /* Paragraph 2 — also the button label */
    --text-small: 14px; /* Paragraph 3 */
    --text-caption: 13px; /* Caption (scale step; specimen renders 8px) */

    --leading-display: 1.2; /* extracted: Display + Headings */
    --leading-body: 1.4; /* extracted: Paragraph 2/Regular specimen */
    --tracking-display: -0.015em; /* extracted: -0.96px at 64px */
    --tracking-small: -0.05em; /* extracted: -0.7px at 14px (Paragraph 3) */

    /* --- Spacing (extracted): 8dp grid; 4 is the half step --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 80px;
    --space-10: 96px;

    /* --- Elevation (dp levels extracted from "Elevation Doc"; shadow
       values are Material's canonical CSS for those dp levels, except
       dp 2, which is the composite read from the "Typography" frame) --- */
    --elevation-0: none;
    --elevation-1: 0 2px 1px -1px rgb(0 0 0 / 0.2),
      0 1px 1px 0 rgb(0 0 0 / 0.14), 0 1px 3px 0 rgb(0 0 0 / 0.12);
    --elevation-2: 0 2px 2px rgb(0 0 0 / 0.2),
      0 4px 2.5px rgb(0 0 0 / 0.14), 0 1px 5px rgb(0 0 0 / 0.12);
    --elevation-3: 0 3px 3px -2px rgb(0 0 0 / 0.2),
      0 3px 4px 0 rgb(0 0 0 / 0.14), 0 1px 8px 0 rgb(0 0 0 / 0.12);
    --elevation-4: 0 2px 4px -1px rgb(0 0 0 / 0.2),
      0 4px 5px 0 rgb(0 0 0 / 0.14), 0 1px 10px 0 rgb(0 0 0 / 0.12);
    --elevation-6: 0 3px 5px -1px rgb(0 0 0 / 0.2),
      0 6px 10px 0 rgb(0 0 0 / 0.14), 0 1px 18px 0 rgb(0 0 0 / 0.12);
    --elevation-8: 0 5px 5px -3px rgb(0 0 0 / 0.2),
      0 8px 10px 1px rgb(0 0 0 / 0.14), 0 3px 14px 2px rgb(0 0 0 / 0.12);
    --elevation-12: 0 7px 8px -4px rgb(0 0 0 / 0.2),
      0 12px 17px 2px rgb(0 0 0 / 0.14), 0 5px 22px 4px rgb(0 0 0 / 0.12);
    --elevation-16: 0 8px 10px -5px rgb(0 0 0 / 0.2),
      0 16px 24px 2px rgb(0 0 0 / 0.14), 0 6px 30px 5px rgb(0 0 0 / 0.12);
    --elevation-24: 0 11px 15px -7px rgb(0 0 0 / 0.2),
      0 24px 38px 3px rgb(0 0 0 / 0.14), 0 9px 46px 8px rgb(0 0 0 / 0.12);

    /* --- Geometry (extracted, "Buttons" frame): the system is square --- */
    --radius: 0;
  }
}

/* ==========================================================================
   RESET — a minimal modern reset; carries no design decisions of its own.
   ========================================================================== */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
}

/* ==========================================================================
   BASE — the document itself. Figma frames: "Typography", "Color Palette",
   "Data Table", "Accordion", "Structured List", "Modal" (Components A + B).
   ========================================================================== */
@layer base {
  html {
    font-size: var(--text-body);
    scroll-behavior: smooth;
  }

  body {
    background: var(--color-ground);
    color: var(--color-primary-500);
    font-family: var(--font-text);
    font-size: var(--text-body);
  }

  ::selection {
    background: var(--color-primary-500);
    color: var(--color-secondary);
  }

  /* Visible focus everywhere (the file documents a Focus state for fields;
     one ring serves every interactive element). */
  :focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  /* --- Page shell: header / main / footer ------------------------------- */
  body > header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--color-secondary);
  }

  body > main {
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--space-5);
  }

  body > footer {
    padding: var(--space-5);
    border-top: 1px solid var(--color-primary-50);
    color: var(--color-ink-60);
    font-size: var(--text-small);
  }

  nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  section,
  article {
    margin-block: var(--space-7);
  }

  /* --- Headings: "Typography" frame -------------------------------------
     The frame shows Regular / Medium / Semibold / Heavy / Black variants
     of every style and marks none as default; the base mapping uses
     Regular, and <strong> inside a heading steps up to Heavy (800). */
  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-display);
    margin-block: var(--space-5) var(--space-3);
  }

  h1 strong,
  h2 strong,
  h3 strong,
  h4 strong {
    font-weight: 800;
  }

  h1 {
    font-size: var(--text-1);
    letter-spacing: var(--tracking-display);
  }

  h2 {
    font-size: var(--text-2);
  }

  h3 {
    font-size: var(--text-3);
  }

  h4 {
    font-size: var(--text-4);
  }

  /* h5 / h6 continue the mapping with Paragraph 1 / Paragraph 2 styles. */
  h5 {
    font-size: var(--text-lead);
    font-weight: 400;
    line-height: var(--leading-display);
    margin-block: var(--space-4) var(--space-2);
  }

  h6 {
    font-size: var(--text-body);
    font-weight: 700;
    line-height: var(--leading-body);
    margin-block: var(--space-4) var(--space-2);
  }

  /* --- Body text --------------------------------------------------------- */
  p {
    margin-block-end: var(--space-3);
    max-width: 75ch;
  }

  small {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-small);
  }

  strong,
  b {
    font-weight: 700;
  }

  mark {
    background: var(--color-warning-100);
    color: inherit;
    padding-inline: var(--space-1);
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  /* --- Links: "Link" frame (Components A) --------------------------------
     Default / hover treatments are inferred from the system's tokens:
     the frame's states were named but not exported (see README). */
  a {
    color: var(--color-primary-500);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  a:visited {
    color: var(--color-primary-400);
  }

  a:hover {
    color: var(--color-primary-300);
    background: var(--color-overlay-12);
  }

  a:active {
    color: var(--color-primary-500);
  }

  /* --- Lists: "Structured List" frame (Components B) --------------------- */
  ul,
  ol {
    margin-block-end: var(--space-3);
    padding-inline-start: var(--space-4);
  }

  li {
    margin-block-end: var(--space-2);
  }

  li::marker {
    color: var(--color-primary-200);
  }

  /* A list whose items are rows (the structured-list pattern): separate
     with hairlines instead of markers when it stands inside an article
     or is marked role="list". Kept conservative: plain lists elsewhere
     keep their markers. */
  article ul {
    list-style: none;
    padding-inline-start: 0;
  }

  article li {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-primary-50);
    margin-block-end: 0;
  }

  article li:first-child {
    border-top: 1px solid var(--color-primary-50);
  }

  /* --- Quotation, code, rules -------------------------------------------- */
  blockquote {
    font-family: var(--font-display);
    font-size: var(--text-lead);
    line-height: var(--leading-body);
    border-inline-start: 4px solid var(--color-primary-500);
    padding-inline-start: var(--space-4);
    margin-block: var(--space-4);
  }

  blockquote p {
    max-width: none;
  }

  code,
  kbd,
  samp {
    font-family: var(--font-text);
    font-size: 0.9375em;
  }

  code {
    background: var(--color-primary-50);
    padding-inline: var(--space-1);
  }

  pre {
    background: var(--color-primary-50);
    padding: var(--space-3);
    overflow-x: auto;
    margin-block-end: var(--space-3);
  }

  pre code {
    background: none;
    padding: 0;
  }

  kbd {
    background: var(--color-secondary);
    border: 1px solid var(--color-primary-100);
    box-shadow: 0 2px 0 var(--color-primary-100);
    padding-inline: var(--space-1);
  }

  hr {
    border: none;
    border-top: 1px solid var(--color-primary-100);
    margin-block: var(--space-5);
  }

  /* --- Figures ------------------------------------------------------------ */
  figure {
    margin-block: var(--space-4);
  }

  figcaption {
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-small);
    color: var(--color-ink-60);
    margin-block-start: var(--space-2);
  }

  /* Inline icons follow the file's 24px icon grid ("Iconography"). */
  p svg,
  li svg,
  a svg,
  button svg {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: -6px;
  }

  /* --- Data Table: "Data Table" frame (Components B) ----------------------
     Header row set in the label style, hairline row separators, and a
     hover wash from the overlay scale. Exact frame values were not
     exported; built from the system's tokens (see README). */
  table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-4);
    background: var(--color-secondary);
  }

  caption {
    text-align: start;
    font-weight: 700;
    padding-block: var(--space-2);
  }

  th,
  td {
    text-align: start;
    padding: var(--space-3);
    vertical-align: top;
  }

  thead th {
    font-size: var(--text-small);
    font-weight: 700;
    border-bottom: 2px solid var(--color-primary-500);
  }

  tbody th {
    font-weight: 700;
  }

  tbody td,
  tbody th {
    border-bottom: 1px solid var(--color-primary-50);
  }

  tbody tr:hover {
    background: var(--color-overlay-4);
  }

  tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--color-primary-500);
  }

  /* --- Accordion: "Accordion" frame, carried by <details> ----------------- */
  details {
    border-bottom: 1px solid var(--color-primary-50);
  }

  details:first-of-type {
    border-top: 1px solid var(--color-primary-50);
  }

  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::after {
    content: "+";
    font-size: var(--text-lead);
    line-height: 1;
  }

  details[open] > summary::after {
    content: "−";
  }

  details > :last-child {
    margin-block-end: var(--space-3);
  }
}

/* ==========================================================================
   COMPONENTS — carried by elements, attributes and pseudo-classes alone.
   Figma frames: "Buttons", "Text Input", "Dropdown", "Checkbox",
   "Radio Buttons", "Toggle", "Slider", "Date Picker", "File Uploader",
   "Pop Over", "Progress Bar", "Modal", "Search" (Components A + B).
   ========================================================================== */
@layer components {
  /* --- Buttons: "Buttons" frame (extracted) -------------------------------
     Kinds: Primary (the default) / Secondary / Ghost (contract classes).
     States in the frame: Active / Hover / Selected / Disabled.
     "Selected" is a toggle state, so in HTML it maps to
     [aria-pressed="true"]; :active is the momentary press.
     Label: Space Mono Bold 16px / 22px, tracking 0.1px.
     Padding: 16px vertical x 32px horizontal. Radius: 0.
     Primary wears the frame's signature offset outline: a 2px border copy
     of the button, shifted 4px right and 4px down (drawn with ::after on
     <button>; <input> buttons approximate it — see README). */
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    --btn-bg: var(--color-primary-500);
    --btn-fg: var(--color-paper-87);
    --btn-frame: var(--color-primary-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-text);
    font-size: var(--text-body);
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.1px;
    white-space: nowrap;
    cursor: pointer;
  }

  button {
    position: relative;
    isolation: isolate;
  }

  button::after {
    content: "";
    position: absolute;
    inset: 4px -4px -4px 4px;
    border: 2px solid var(--btn-frame);
    pointer-events: none;
  }

  button:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover {
    --btn-bg: var(--color-primary-300);
    --btn-fg: var(--color-secondary);
    --btn-frame: var(--color-primary-300);
  }

  button:active::after {
    inset: 0 -1px -1px 0; /* pressed: the frame sits flush (Selected) */
  }

  button[aria-pressed="true"],
  input[type="submit"][aria-pressed="true"],
  input[type="reset"][aria-pressed="true"],
  input[type="button"][aria-pressed="true"] {
    --btn-bg: var(--color-primary-400);
    --btn-fg: var(--color-secondary);
    --btn-frame: var(--color-primary-400);
  }

  button[aria-pressed="true"]::after {
    content: none; /* the frame's Selected state carries no offset outline */
  }

  button:disabled,
  input[type="submit"]:disabled,
  input[type="reset"]:disabled,
  input[type="button"]:disabled {
    --btn-bg: var(--color-primary-100);
    --btn-fg: var(--color-paper-60);
    --btn-frame: var(--color-primary-100);
    cursor: not-allowed;
  }

  /* <input> buttons are replaced elements and cannot paint ::after, so the
     offset outline exists only on <button> and a[role="button"]. An
     <input type="submit"> still matches every other Primary value. */

  /* A button that is really a link keeps the Primary treatment. */
  a[role="button"] {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--color-primary-500);
    color: var(--color-paper-87);
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.1px;
    text-decoration: none;
  }

  a[role="button"]::after {
    content: "";
    position: absolute;
    inset: 4px -4px -4px 4px;
    border: 2px solid var(--color-primary-500);
    pointer-events: none;
  }

  a[role="button"]:hover {
    background: var(--color-primary-300);
    color: var(--color-secondary);
  }

  a[role="button"]:hover::after {
    border-color: var(--color-primary-300);
  }

  /* --- Form scaffolding ---------------------------------------------------- */
  form {
    margin-block: var(--space-4);
  }

  fieldset {
    border: 1px solid var(--color-primary-100);
    padding: var(--space-4);
    margin-block-end: var(--space-4);
  }

  legend {
    font-weight: 700;
    padding-inline: var(--space-2);
  }

  label {
    display: block;
    font-size: var(--text-small);
    font-weight: 700;
    margin-block-end: var(--space-2);
  }

  /* Choice labels (checkbox / radio / switch) sit inline with their box. */
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-body);
    font-weight: 400;
    cursor: pointer;
    margin-block-end: var(--space-3);
  }

  label:has(> input:disabled) {
    color: var(--color-ink-38);
    cursor: not-allowed;
  }

  /* --- Text fields: "Text Input", "Dropdown", "Date Picker",
         "File Uploader", "Search" frames ----------------------------------
     The frames name Default / Focus / Error / Disabled states; their exact
     specs were not exported (Figma MCP limit), so fields are built from
     the system's tokens: white surface, primary-100 border, 8dp-grid
     padding, danger-500 for error. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="color"],
  select,
  textarea {
    display: block;
    width: 100%;
    padding: var(--space-3);
    background: var(--color-secondary);
    color: var(--color-primary-500);
    border: 1px solid var(--color-primary-100);
    border-radius: var(--radius);
    margin-block-end: var(--space-4);
  }

  textarea {
    min-height: 128px;
    resize: vertical;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--color-ink-60);
    opacity: 1;
  }

  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="password"]:hover,
  input[type="search"]:hover,
  input[type="tel"]:hover,
  input[type="url"]:hover,
  input[type="number"]:hover,
  input[type="date"]:hover,
  select:hover,
  textarea:hover {
    border-color: var(--color-primary-300);
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="number"]:focus,
  input[type="date"]:focus,
  select:focus,
  textarea:focus {
    border-color: var(--color-primary-500);
    outline: 2px solid var(--color-primary-500);
    outline-offset: 0;
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    background: var(--color-primary-50);
    color: var(--color-ink-38);
    border-color: var(--color-primary-50);
    cursor: not-allowed;
  }

  /* Error: the frame's "Error Text" is danger-500 (#B00020). */
  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"],
  input:user-invalid,
  select:user-invalid,
  textarea:user-invalid {
    border-color: var(--color-danger-500);
  }

  input[aria-invalid="true"]:focus,
  input:user-invalid:focus {
    outline-color: var(--color-danger-500);
  }

  /* The chevron for the Dropdown (select), drawn without any asset. */
  select {
    appearance: none;
    padding-inline-end: var(--space-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 20px;
  }

  select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b0b0' stroke-width='2'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
  }

  /* --- Checkbox + Radio: "Checkbox" / "Radio Buttons" frames --------------
     24px hit geometry follows the file's icon grid. Square for checkbox
     (the system has radius 0), round for radio. */
  input[type="checkbox"],
  input[type="radio"] {
    appearance: none;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    background: var(--color-secondary);
    border: 2px solid var(--color-primary-500);
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
  }

  input[type="radio"] {
    border-radius: 50%;
  }

  input[type="checkbox"]:checked {
    background-color: var(--color-primary-500);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
    background-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
  }

  input[type="checkbox"]:indeterminate {
    background-color: var(--color-primary-500);
    background-image: linear-gradient(var(--color-secondary),
        var(--color-secondary));
    background-size: 12px 2px;
    background-position: center;
    background-repeat: no-repeat;
  }

  input[type="radio"]:checked {
    background-image: radial-gradient(circle,
        var(--color-primary-500) 0 6px, transparent 7px);
    background-position: center;
    background-repeat: no-repeat;
  }

  input[type="checkbox"]:disabled,
  input[type="radio"]:disabled {
    border-color: var(--color-primary-100);
    cursor: not-allowed;
  }

  input[type="checkbox"]:disabled:checked {
    background-color: var(--color-primary-100);
  }

  input[type="radio"]:disabled:checked {
    background-image: radial-gradient(circle,
        var(--color-primary-100) 0 6px, transparent 7px);
  }

  /* --- Slider: input[type=range] ("Slider" frame) -------------------------- */
  input[type="range"] {
    appearance: none;
    width: 100%;
    height: 24px;
    background: transparent;
    cursor: pointer;
    margin-block-end: var(--space-4);
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--color-primary-100);
  }

  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -10px;
    background: var(--color-primary-500);
    border: none;
    border-radius: var(--radius);
  }

  input[type="range"]::-moz-range-track {
    height: 4px;
    background: var(--color-primary-100);
  }

  input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--color-primary-500);
    border: none;
    border-radius: var(--radius);
  }

  input[type="range"]:disabled::-webkit-slider-thumb {
    background: var(--color-primary-100);
  }

  input[type="range"]:disabled::-moz-range-thumb {
    background: var(--color-primary-100);
  }

  /* --- File Uploader: input[type=file] ("File Uploader" frame) ------------ */
  input[type="file"] {
    display: block;
    width: 100%;
    margin-block-end: var(--space-4);
    cursor: pointer;
  }

  input[type="file"]::file-selector-button {
    padding: var(--space-2) var(--space-4);
    margin-inline-end: var(--space-3);
    background: var(--color-secondary);
    color: var(--color-ink-87);
    border: 1px solid var(--color-primary-500);
    border-radius: var(--radius);
    font-family: var(--font-text);
    font-weight: 700;
    cursor: pointer;
  }

  input[type="file"]::file-selector-button:hover {
    background: var(--color-primary-50);
    color: var(--color-primary-500);
  }

  /* --- Progress Bar: <progress> ("Progress Bar" frame) ---------------------- */
  progress {
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    border: none;
    background: var(--color-primary-50);
    margin-block: var(--space-3);
  }

  progress::-webkit-progress-bar {
    background: var(--color-primary-50);
  }

  progress::-webkit-progress-value {
    background: var(--color-primary-500);
  }

  progress::-moz-progress-bar {
    background: var(--color-primary-500);
  }

  /* Indeterminate progress doubles as the classless loading indicator
     (the frame's circular "Loading Spinner" has no semantic element;
     see README). */
  progress:indeterminate {
    background: linear-gradient(90deg,
        var(--color-primary-50) 0%,
        var(--color-primary-100) 50%,
        var(--color-primary-50) 100%);
    background-size: 200% 100%;
    animation: wds-progress-slide 1.2s linear infinite;
  }

  progress:indeterminate::-webkit-progress-bar {
    background: transparent;
  }

  @keyframes wds-progress-slide {
    from {
      background-position: 100% 0;
    }

    to {
      background-position: -100% 0;
    }
  }

  /* --- Modal: <dialog> ("Modal" frame; elevation 24 per "Elevation Doc") --- */
  dialog {
    border: none;
    border-radius: var(--radius);
    padding: var(--space-5);
    max-width: min(560px, calc(100vw - var(--space-5)));
    background: var(--color-secondary);
    color: var(--color-primary-500);
    box-shadow: var(--elevation-24);
  }

  dialog::backdrop {
    background: rgb(0 0 0 / 0.6); /* the 60% step of the opacity scale */
  }

  dialog > :first-child {
    margin-top: 0;
  }

  /* --- Pop Over: [popover] ("Pop Over" frame; menus sit at elevation 8) ---- */
  [popover] {
    border: none;
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    background: var(--color-secondary);
    color: var(--color-primary-500);
    box-shadow: var(--elevation-8);
  }
}

/* ==========================================================================
   CONTRACT — the only classes in the system. Each exists because semantics
   alone cannot express it; each is documented in README.md. No utility
   classes, no ids, nothing else.
   ========================================================================== */
@layer contract {
  /* --- .display ------------------------------------------------------------
     The Display style (61px serif). No heading level means "display";
     h1 is Heading 1. Apply to a <p> or heading when the Display style —
     not a document outline level — is what is wanted. */
  .display {
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 400;
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
  }

  /* --- Button variants ------------------------------------------------------
     HTML has one <button>; the frame has three kinds. Primary is the
     default above; these two classes select the other kinds.
     Values extracted from the "Buttons" frame. */
  .btn-secondary {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink-87);
    background: transparent;
    color: var(--color-ink-87);
    border: 1px solid var(--color-primary-500);
  }

  .btn-secondary::after {
    content: none; /* Secondary carries no offset outline in the frame */
  }

  .btn-secondary:hover {
    --btn-bg: var(--color-primary-50);
    --btn-fg: var(--color-primary-500);
    background: var(--color-primary-50);
    color: var(--color-primary-500);
    border-color: transparent;
  }

  .btn-secondary[aria-pressed="true"] {
    background: var(--color-primary-100);
    color: var(--color-secondary);
    border-color: transparent;
  }

  .btn-secondary:disabled {
    background: transparent;
    color: var(--color-ink-38);
    border-color: var(--color-primary-100);
  }

  .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-primary-500);
    background: transparent;
    color: var(--color-primary-500);
  }

  .btn-ghost::after {
    content: none;
  }

  .btn-ghost:hover {
    background: transparent;
    color: var(--color-ink-38); /* in the frame, Ghost hover only dims */
  }

  .btn-ghost[aria-pressed="true"] {
    background: transparent;
    color: var(--color-primary-400);
  }

  .btn-ghost:disabled {
    background: transparent;
    color: var(--color-ink-38);
  }

  /* Danger: the palette assigns danger to negative actions, but the
     "Buttons" frame draws only the three monochrome kinds. This variant
     composes the Primary structure from the danger scale (see README). */
  .btn-danger {
    --btn-bg: var(--color-danger-500);
    --btn-fg: var(--color-paper-87);
    --btn-frame: var(--color-danger-500);
  }

  .btn-danger:hover {
    --btn-bg: var(--color-danger-400);
    --btn-fg: var(--color-secondary);
    --btn-frame: var(--color-danger-400);
  }

  .btn-danger[aria-pressed="true"] {
    --btn-bg: var(--color-danger-600);
    --btn-fg: var(--color-secondary);
    --btn-frame: var(--color-danger-600);
  }

  .btn-danger:disabled {
    --btn-bg: var(--color-danger-100);
    --btn-fg: var(--color-paper-60);
    --btn-frame: var(--color-danger-100);
  }

  /* --- .switch ---------------------------------------------------------------
     The "Toggle" frame's control is a checkbox with a track and a sliding
     knob; a bare checkbox cannot draw the track, so the checkbox carries
     this one class. Geometry follows the system: square, 8dp multiples,
     resting elevation 1 per the "Elevation Doc". */
  input[type="checkbox"].switch {
    width: 48px;
    height: 24px;
    border: 2px solid var(--color-primary-500);
    background: var(--color-secondary);
    background-image: none;
    position: relative;
  }

  input[type="checkbox"].switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--color-primary-500);
    transition: left 150ms ease-in-out, background 150ms ease-in-out;
  }

  input[type="checkbox"].switch:checked {
    background: var(--color-primary-500);
    background-image: none;
  }

  input[type="checkbox"].switch:checked::after {
    left: 26px;
    background: var(--color-secondary);
  }

  input[type="checkbox"].switch:disabled {
    border-color: var(--color-primary-100);
    background: var(--color-primary-50);
  }

  input[type="checkbox"].switch:disabled::after {
    background: var(--color-primary-100);
  }

  input[type="checkbox"].switch:disabled:checked {
    background: var(--color-primary-100);
  }

  input[type="checkbox"].switch:disabled:checked::after {
    background: var(--color-secondary);
  }

  /* --- .card -------------------------------------------------------------------
     A raised surface. HTML has no "card" element. Per the "Elevation Doc",
     a card rests at 1dp. */
  .card {
    background: var(--color-secondary);
    box-shadow: var(--elevation-1);
    padding: var(--space-4);
    margin-block: var(--space-4);
  }

  .card > :first-child {
    margin-top: 0;
  }

  .card > :last-child {
    margin-bottom: 0;
  }

  /* --- .notice -------------------------------------------------------------------
     The notification banner ("Progress Indicator and Notification" frame).
     A banner's severity is not an element, so severity rides on classes:
     the bare .notice is neutral (primary); add one variant class for
     success / warning / danger. */
  .notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background: var(--color-secondary);
    border-inline-start: 4px solid var(--color-primary-500);
    box-shadow: var(--elevation-2);
    padding: var(--space-3) var(--space-4);
    margin-block: var(--space-4);
  }

  .notice p {
    margin: 0;
  }

  .notice-success {
    border-inline-start-color: var(--color-success-500);
    background: var(--color-success-50);
  }

  .notice-warning {
    border-inline-start-color: var(--color-warning-500);
    background: var(--color-warning-50);
  }

  .notice-danger {
    border-inline-start-color: var(--color-danger-500);
    background: var(--color-danger-50);
  }

  /* --- .tabs ---------------------------------------------------------------------
     Content Switcher / "Tabs and Tags" frame. Tabs need a shared scope and
     a selected state that CSS can see; native radio inputs carry the state
     (no ids needed — each radio is wrapped in its label). Required shape:

       <div class="tabs">
         <label><input type="radio" name="x" checked> First </label>
         <section> …panel… </section>
         <label><input type="radio" name="x"> Second </label>
         <section> …panel… </section>
       </div>

     Each label must be immediately followed by its panel. The selected
     treatment (ink text + 4px ink bar under the tab) is composed from the
     system's tokens; the frame's exact tab spec was not exported. */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin-block: var(--space-4);
  }

  .tabs > label {
    order: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
    margin: 0;
    font-size: var(--text-body);
    font-weight: 700;
    color: var(--color-ink-60);
    border-bottom: 4px solid transparent;
    cursor: pointer;
  }

  .tabs > label > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .tabs > label:hover {
    color: var(--color-primary-500);
    background: var(--color-overlay-4);
  }

  .tabs > label:has(> input:checked) {
    color: var(--color-primary-500);
    border-bottom-color: var(--color-primary-500);
  }

  .tabs > label:has(> input:focus-visible) {
    outline: 2px solid var(--color-primary-500);
    outline-offset: -2px;
  }

  .tabs > section {
    order: 1;
    flex-basis: 100%;
    display: none;
    margin: 0;
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-primary-50);
  }

  .tabs > label:has(> input:checked) + section {
    display: block;
  }

  /* --- Motion ------------------------------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}