/* The house style, generated from DopeCode 0.1.0 by pixelpickr 0.4.1.
 * Edit the house, not this file: `pixelpickr build` writes it, and
 * `pixelpickr build --check` fails when it differs.
 */

:root {
  color-scheme: light dark;

  /* Swatches */
  --house-swatch-amber-100: #FFE3B0; /* Amber 100 */
  --house-swatch-amber-300: #FFC65C; /* Amber 300 */
  --house-swatch-amber-500: #FFB224; /* Amber 500 */
  --house-swatch-amber-600: #E89A12; /* Amber 600 */
  --house-swatch-amber-800: #8F5806; /* Amber 800 */
  --house-swatch-ink-900: #0F0D0A; /* Ink 900 */
  --house-swatch-ink-800: #17130F; /* Ink 800 */
  --house-swatch-ink-700: #1B1712; /* Ink 700 */
  --house-swatch-ink-650: #211C16; /* Ink 650 */
  --house-swatch-ink-600: #241E18; /* Ink 600 */
  --house-swatch-ink-500: #3A322A; /* Ink 500 */
  --house-swatch-ink-300: #9A8F82; /* Ink 300 */
  --house-swatch-bone: #F4EFE8; /* Bone */
  --house-swatch-paper: #F7F4EF; /* Paper */
  --house-swatch-sheet: #FFFDFA; /* Sheet */
  --house-swatch-hairline: #E0D8CB; /* Hairline */
  --house-swatch-raised-light: #F0EBE2;
  --house-swatch-dim-light: #6B6055;

  /* Colour roles that do not flip */
  --house-color-primary-container: #FFE3B0; /* Tint fills, documents and pages only */
  --house-color-on-primary-container: #17130F; /* Ink on primary-container */
  --house-color-primary-fixed: #FFB224; /* The mark, the filled button, the selection rail, a bar in flight */
  --house-color-primary-fixed-dim: #FFC65C; /* The hairline of a focused field, and selected text behind on-primary-fixed */
  --house-color-on-primary-fixed: #17130F; /* Ink on an amber fill, in both appearances */
  --house-color-on-primary-fixed-variant: #17130F; /* Lower-emphasis ink on primary-fixed */
  --house-color-secondary: #8F5806; /* The 2px ring outside a focused control, in both appearances */
  --house-color-on-secondary: #F7F4EF; /* Ink on secondary */
  --house-color-secondary-container: #FFE3B0; /* A quieter fill in the second accent's family */
  --house-color-on-secondary-container: #17130F; /* Ink on secondary-container */
  --house-color-secondary-fixed: #FFB224; /* The second accent as a fill that is the same in light and dark */
  --house-color-secondary-fixed-dim: #FFC65C; /* A stronger tone of the fixed second accent */
  --house-color-on-secondary-fixed: #17130F; /* Ink on secondary-fixed */
  --house-color-on-secondary-fixed-variant: #17130F; /* Lower-emphasis ink on secondary-fixed */
  --house-color-tertiary-container: #FFE3B0; /* A quieter fill in the contrasting accent's family */
  --house-color-on-tertiary-container: #17130F; /* Ink on tertiary-container */
  --house-color-tertiary-fixed: #FFB224; /* The contrasting accent as a fill that is the same in light and dark */
  --house-color-tertiary-fixed-dim: #FFC65C; /* A stronger tone of the fixed contrasting accent */
  --house-color-on-tertiary-fixed: #17130F; /* Ink on tertiary-fixed */
  --house-color-on-tertiary-fixed-variant: #17130F; /* Lower-emphasis ink on tertiary-fixed */
  --house-color-page: #FFFDFA; /* A page someone would print: a score, a tab, a letter */
  --house-color-on-page: #17130F; /* The ink on a page, whatever the window's appearance */
  --house-color-on-page-variant: #6B6055; /* What is quieter on a page */
  --house-color-page-outline: #E0D8CB; /* The hairline round a page */
  --house-color-anodised: #241E18; /* An instrument's faceplate */

  /* Typefaces */
  --house-typeface-brand: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --house-typeface-plain: -apple-system, BlinkMacSystemFont, system-ui, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale */
  --house-typescale-display-large-face: var(--house-typeface-brand); /* A website's hero */
  --house-typescale-display-large-size: 48px;
  --house-typescale-display-large-weight: 700;
  --house-typescale-display-large-emphasized: 700;
  --house-typescale-display-large-tracking: 0;
  --house-typescale-display-large-leading: normal;
  --house-typescale-display-large-case: none;
  --house-typescale-display-medium-face: var(--house-typeface-brand); /* A website's section opener */
  --house-typescale-display-medium-size: 36px;
  --house-typescale-display-medium-weight: 700;
  --house-typescale-display-medium-emphasized: 700;
  --house-typescale-display-medium-tracking: 0;
  --house-typescale-display-medium-leading: normal;
  --house-typescale-display-medium-case: none;
  --house-typescale-display-small-face: var(--house-typeface-brand); /* The wordmark */
  --house-typescale-display-small-size: 30px;
  --house-typescale-display-small-weight: 700;
  --house-typescale-display-small-emphasized: 700;
  --house-typescale-display-small-tracking: 0;
  --house-typescale-display-small-leading: normal;
  --house-typescale-display-small-case: none;
  --house-typescale-headline-large-face: var(--house-typeface-plain); /* A website's headings */
  --house-typescale-headline-large-size: 28px;
  --house-typescale-headline-large-weight: 600;
  --house-typescale-headline-large-emphasized: 600;
  --house-typescale-headline-large-tracking: 0;
  --house-typescale-headline-large-leading: normal;
  --house-typescale-headline-large-case: none;
  --house-typescale-headline-medium-face: var(--house-typeface-plain); /* The welcome screen's heading */
  --house-typescale-headline-medium-size: 22px;
  --house-typescale-headline-medium-weight: 600;
  --house-typescale-headline-medium-emphasized: 600;
  --house-typescale-headline-medium-tracking: 0;
  --house-typescale-headline-medium-leading: normal;
  --house-typescale-headline-medium-case: none;
  --house-typescale-headline-small-face: var(--house-typeface-plain); /* An empty state's heading */
  --house-typescale-headline-small-size: 20px;
  --house-typescale-headline-small-weight: 600;
  --house-typescale-headline-small-emphasized: 600;
  --house-typescale-headline-small-tracking: 0;
  --house-typescale-headline-small-leading: normal;
  --house-typescale-headline-small-case: none;
  --house-typescale-title-large-face: var(--house-typeface-plain); /* The window title: the only 17 in a Mac window */
  --house-typescale-title-large-size: 17px;
  --house-typescale-title-large-weight: 600;
  --house-typescale-title-large-emphasized: 600;
  --house-typescale-title-large-tracking: 0;
  --house-typescale-title-large-leading: normal;
  --house-typescale-title-large-case: none;
  --house-typescale-title-medium-face: var(--house-typeface-plain); /* A dialog's or a sheet's title */
  --house-typescale-title-medium-size: 15px;
  --house-typescale-title-medium-weight: 600;
  --house-typescale-title-medium-emphasized: 600;
  --house-typescale-title-medium-tracking: 0;
  --house-typescale-title-medium-leading: normal;
  --house-typescale-title-medium-case: none;
  --house-typescale-title-small-face: var(--house-typeface-plain); /* A group's heading inside a pane */
  --house-typescale-title-small-size: 13px;
  --house-typescale-title-small-weight: 600;
  --house-typescale-title-small-emphasized: 600;
  --house-typescale-title-small-tracking: 0;
  --house-typescale-title-small-leading: normal;
  --house-typescale-title-small-case: none;
  --house-typescale-body-large-face: var(--house-typeface-plain); /* Prose and field values */
  --house-typescale-body-large-size: 13px;
  --house-typescale-body-large-weight: 400;
  --house-typescale-body-large-emphasized: 400;
  --house-typescale-body-large-tracking: 0;
  --house-typescale-body-large-leading: normal;
  --house-typescale-body-large-case: none;
  --house-typescale-body-medium-face: var(--house-typeface-plain); /* A name someone chose, in a list row; emphasized when selected */
  --house-typescale-body-medium-size: 12px;
  --house-typescale-body-medium-weight: 400;
  --house-typescale-body-medium-emphasized: 600;
  --house-typescale-body-medium-tracking: 0;
  --house-typescale-body-medium-leading: normal;
  --house-typescale-body-medium-case: none;
  --house-typescale-body-small-face: var(--house-typeface-plain); /* A detail row's key: 11 is the Mac panel's body size */
  --house-typescale-body-small-size: 11px;
  --house-typescale-body-small-weight: 400;
  --house-typescale-body-small-emphasized: 400;
  --house-typescale-body-small-tracking: 0;
  --house-typescale-body-small-leading: normal;
  --house-typescale-body-small-case: none;
  --house-typescale-label-large-face: var(--house-typeface-plain); /* Buttons and segments; emphasized when primary or selected. On touch, in a control at least 44 tall */
  --house-typescale-label-large-size: 13px;
  --house-typescale-label-large-weight: 400;
  --house-typescale-label-large-emphasized: 600;
  --house-typescale-label-large-tracking: 0;
  --house-typescale-label-large-leading: normal;
  --house-typescale-label-large-case: none;
  --house-typescale-label-medium-face: var(--house-typeface-plain); /* Chips and badges */
  --house-typescale-label-medium-size: 11px;
  --house-typescale-label-medium-weight: 500;
  --house-typescale-label-medium-emphasized: 500;
  --house-typescale-label-medium-tracking: 0;
  --house-typescale-label-medium-leading: normal;
  --house-typescale-label-medium-case: none;
  --house-typescale-label-small-face: var(--house-typeface-brand); /* Eyebrows and column headers */
  --house-typescale-label-small-size: 10px;
  --house-typescale-label-small-weight: 500;
  --house-typescale-label-small-emphasized: 500;
  --house-typescale-label-small-tracking: 0.1em;
  --house-typescale-label-small-leading: normal;
  --house-typescale-label-small-case: uppercase;

  /* Corners */
  --house-corner-none: 0px; /* List and table rows: flush and square */
  --house-corner-extra-small: 6px; /* Chips, and a segment inside its control */
  --house-corner-small: 8px; /* Buttons and fields */
  --house-corner-medium: 10px; /* Detail rows: larger than a control, smaller than a panel */
  --house-corner-large: 12px; /* Panels, cards, dialogs */
  --house-corner-large-increased: 12px; /* A step above large */
  --house-corner-extra-large: 16px; /* Sheets and popovers */
  --house-corner-extra-large-increased: 16px; /* A step above extra-large */
  --house-corner-extra-extra-large: 16px; /* The largest rounding short of full */
  --house-corner-full: 9999px; /* Status dots and switches */

  /* Elevation */
  --house-elevation-level0: 0px; /* Flat: everything that sits in the window */
  --house-elevation-level1: 1px; /* The lowest lift */
  --house-elevation-level2: 3px; /* Menus and tooltips */
  --house-elevation-level3: 6px; /* Dialogs and sheets */
  --house-elevation-level4: 8px; /* A lift above level 3 */
  --house-elevation-level5: 12px; /* The highest lift */

  /* Spacing */
  --house-spacing-extra-small: 4px; /* Between a glyph and its label */
  --house-spacing-small: 8px; /* Between related controls */
  --house-spacing-medium: 16px; /* Between groups */
  --house-spacing-large: 24px; /* Between sections */
  --house-spacing-extra-large: 32px; /* Around a page */

  /* Durations */
  --house-duration-short1: 50ms;
  --house-duration-short2: 100ms;
  --house-duration-short3: 150ms;
  --house-duration-short4: 200ms;
  --house-duration-medium1: 250ms;
  --house-duration-medium2: 300ms;
  --house-duration-medium3: 350ms;
  --house-duration-medium4: 400ms;
  --house-duration-long1: 450ms;
  --house-duration-long2: 500ms;
  --house-duration-long3: 550ms;
  --house-duration-long4: 600ms;
  --house-duration-extra-long1: 700ms;
  --house-duration-extra-long2: 800ms;
  --house-duration-extra-long3: 900ms;
  --house-duration-extra-long4: 1000ms;

  /* Easings */
  --house-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --house-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --house-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --house-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --house-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --house-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --house-easing-linear: cubic-bezier(0, 0, 1, 1);

  /* State layers */
  --house-state-hover: 0.08;
  --house-state-focus: 0.1;
  --house-state-pressed: 0.1;
  --house-state-dragged: 0.16;

  /* Opacities that do not flip */
  --house-opacity-disabled-content: 0.38; /* A disabled control's content, where the house fades it */
  --house-opacity-disabled-container: 0.12; /* A disabled control's container, where the house fades it */

  /* Lengths */
  --house-length-rail: 3px; /* The selection rail, flush on a row's leading edge; every row reserves it */
  --house-length-focus-ring: 2px; /* The ring outside a focused control's own edge */
  --house-length-data-mark-corner: 2px; /* The corner of a bar, a swatch or a heat cell: a data mark is not a control */
  --house-length-indent: 18px; /* A sidebar's indentation per level */
  --house-length-detail-key-column: 92px; /* The key column of detail rows */
  --house-length-touch-target: 44px; /* The least a control a finger reaches may be, even where the glyph inside is 16 */

  /* What flips with the appearance */
  --house-color-primary: #8F5806; /* Amber read as a word: links, eyebrows, text buttons */
  --house-color-on-primary: #F7F4EF; /* Ink on primary */
  --house-color-inverse-primary: #8F5806; /* The accent on inverse-surface */
  --house-color-tertiary: #8F5806; /* A contrasting accent, for balance */
  --house-color-on-tertiary: #F7F4EF; /* Ink on a tertiary fill */
  --house-color-error: #C70F34; /* Only if it is genuinely a fault */
  --house-color-on-error: #F7F4EF; /* Whichever ink clears 4.5:1 on that appearance's error */
  --house-color-error-container: #F0EBE2; /* A quieter fill for a fault */
  --house-color-on-error-container: #C70F34; /* Ink on error-container */
  --house-color-success: #23714E; /* It worked. Always with its word */
  --house-color-on-success: #F7F4EF; /* Ink on a success fill */
  --house-color-success-container: #F0EBE2; /* A quieter fill for something that worked */
  --house-color-on-success-container: #23714E; /* Ink on success-container */
  --house-color-warning: #B23B00; /* In between, or read it */
  --house-color-on-warning: #F7F4EF; /* Ink on a warning fill */
  --house-color-warning-container: #F0EBE2; /* A quieter fill for a warning */
  --house-color-on-warning-container: #B23B00; /* Ink on warning-container */
  --house-color-surface: #F7F4EF; /* Window and screen background, sidebars, gutters */
  --house-color-on-surface: #17130F; /* Headings, names, anything a person wrote */
  --house-color-surface-variant: #F0EBE2; /* Material's older name for the highest container */
  --house-color-on-surface-variant: #6B6055; /* Paths, counts, sizes, dates, secondary values */
  --house-color-surface-dim: #F7F4EF; /* The ground at its dimmest, in either appearance */
  --house-color-surface-bright: #F7F4EF; /* The ground at its brightest, in either appearance */
  --house-color-surface-container-lowest: #FFFDFA; /* The lowest container, below container-low */
  --house-color-surface-container-low: #FFFDFA; /* Panels, list rows, detail panes, sheets */
  --house-color-surface-container: #F7F3EC; /* Pointer only — between container-low and container-high, so hover never looks selected. Unreachable on touch */
  --house-color-surface-container-high: #F0EBE2; /* Fields, chips, outlined buttons, the selected row */
  --house-color-surface-container-highest: #F0EBE2; /* The highest container */
  --house-color-surface-tint: #8F5806; /* The tint Material lays over raised surfaces */
  --house-color-inverse-surface: #17130F; /* A surface that reverses the appearance: a snackbar */
  --house-color-inverse-on-surface: #F7F4EF; /* Ink on inverse-surface */
  --house-color-outline: #E0D8CB; /* A boundary that matters: a field's edge */
  --house-color-outline-variant: #E0D8CB; /* Every border, divider and hairline */
  --house-color-shadow: #17130F; /* The colour a shadow is drawn in; how dark is the shadow opacity */
  --house-color-scrim: #17130F; /* The colour behind a modal */
  --house-color-data-diverging-cool-2: #2456BD; /* The diverging scale's cool end, the stronger step */
  --house-color-data-diverging-cool-1: #5E93E8; /* The diverging scale's cool step */
  --house-color-data-diverging-neutral: #9A8F82; /* The diverging scale's middle: a warm grey */
  --house-color-data-diverging-warm-1: #E5735F; /* The diverging scale's warm step */
  --house-color-data-diverging-warm-2: #BF2F3B; /* The diverging scale's warm end, the stronger step */
  --house-color-data-series-1: #2456BD; /* The first series slot, the diverging cool end */
  --house-color-data-series-2: #BF696A; /* The second series slot */
  --house-color-data-series-3: #1195B4; /* The third series slot */
  --house-color-data-series-4: #96872D; /* The fourth series slot */
  --house-color-data-series-5: #773F9B; /* The fifth series slot */
  --house-color-data-series-6: #2E9E52; /* The sixth series slot */
  --house-color-data-plain: #BDB2A3; /* One series with no judgement: the plan beside the actual */
  --house-opacity-scrim: 0.35; /* The scrim behind a modal */
  --house-opacity-shadow: 0.18; /* A shadow at its darkest, stronger on a dark ground */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --house-color-primary: #FFB224;
    --house-color-on-primary: #17130F;
    --house-color-inverse-primary: #FFB224;
    --house-color-tertiary: #FFB224;
    --house-color-on-tertiary: #17130F;
    --house-color-error: #F2555A;
    --house-color-on-error: #17130F;
    --house-color-error-container: #241E18;
    --house-color-on-error-container: #F2555A;
    --house-color-success: #48C78E;
    --house-color-on-success: #17130F;
    --house-color-success-container: #241E18;
    --house-color-on-success-container: #48C78E;
    --house-color-warning: #FF8A3D;
    --house-color-on-warning: #17130F;
    --house-color-warning-container: #241E18;
    --house-color-on-warning-container: #FF8A3D;
    --house-color-surface: #17130F;
    --house-color-on-surface: #F4EFE8;
    --house-color-surface-variant: #241E18;
    --house-color-on-surface-variant: #9A8F82;
    --house-color-surface-dim: #17130F;
    --house-color-surface-bright: #17130F;
    --house-color-surface-container-lowest: #1B1712;
    --house-color-surface-container-low: #1B1712;
    --house-color-surface-container: #211C16;
    --house-color-surface-container-high: #241E18;
    --house-color-surface-container-highest: #241E18;
    --house-color-surface-tint: #FFB224;
    --house-color-inverse-surface: #F4EFE8;
    --house-color-inverse-on-surface: #17130F;
    --house-color-outline: #3A322A;
    --house-color-outline-variant: #3A322A;
    --house-color-shadow: #0F0D0A;
    --house-color-scrim: #0F0D0A;
    --house-color-data-diverging-cool-2: #6793E3;
    --house-color-data-diverging-cool-1: #3A63B8;
    --house-color-data-diverging-neutral: #7D7266;
    --house-color-data-diverging-warm-1: #A93F37;
    --house-color-data-diverging-warm-2: #EC5B63;
    --house-color-data-series-1: #6793E3;
    --house-color-data-series-2: #A74449;
    --house-color-data-series-3: #1F9BBA;
    --house-color-data-series-4: #8A7B1D;
    --house-color-data-series-5: #834BA8;
    --house-color-data-series-6: #1D7D3E;
    --house-color-data-plain: #54493E;
    --house-opacity-scrim: 0.6;
    --house-opacity-shadow: 0.55;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --house-color-primary: #FFB224;
  --house-color-on-primary: #17130F;
  --house-color-inverse-primary: #FFB224;
  --house-color-tertiary: #FFB224;
  --house-color-on-tertiary: #17130F;
  --house-color-error: #F2555A;
  --house-color-on-error: #17130F;
  --house-color-error-container: #241E18;
  --house-color-on-error-container: #F2555A;
  --house-color-success: #48C78E;
  --house-color-on-success: #17130F;
  --house-color-success-container: #241E18;
  --house-color-on-success-container: #48C78E;
  --house-color-warning: #FF8A3D;
  --house-color-on-warning: #17130F;
  --house-color-warning-container: #241E18;
  --house-color-on-warning-container: #FF8A3D;
  --house-color-surface: #17130F;
  --house-color-on-surface: #F4EFE8;
  --house-color-surface-variant: #241E18;
  --house-color-on-surface-variant: #9A8F82;
  --house-color-surface-dim: #17130F;
  --house-color-surface-bright: #17130F;
  --house-color-surface-container-lowest: #1B1712;
  --house-color-surface-container-low: #1B1712;
  --house-color-surface-container: #211C16;
  --house-color-surface-container-high: #241E18;
  --house-color-surface-container-highest: #241E18;
  --house-color-surface-tint: #FFB224;
  --house-color-inverse-surface: #F4EFE8;
  --house-color-inverse-on-surface: #17130F;
  --house-color-outline: #3A322A;
  --house-color-outline-variant: #3A322A;
  --house-color-shadow: #0F0D0A;
  --house-color-scrim: #0F0D0A;
  --house-color-data-diverging-cool-2: #6793E3;
  --house-color-data-diverging-cool-1: #3A63B8;
  --house-color-data-diverging-neutral: #7D7266;
  --house-color-data-diverging-warm-1: #A93F37;
  --house-color-data-diverging-warm-2: #EC5B63;
  --house-color-data-series-1: #6793E3;
  --house-color-data-series-2: #A74449;
  --house-color-data-series-3: #1F9BBA;
  --house-color-data-series-4: #8A7B1D;
  --house-color-data-series-5: #834BA8;
  --house-color-data-series-6: #1D7D3E;
  --house-color-data-plain: #54493E;
  --house-opacity-scrim: 0.6;
  --house-opacity-shadow: 0.55;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Where a finger is the pointer, each step takes its touch size. */
@media (pointer: coarse) {
  :root {
    --house-typescale-title-large-size: 22px;
    --house-typescale-title-medium-size: 20px;
    --house-typescale-title-small-size: 17px;
    --house-typescale-body-large-size: 17px;
    --house-typescale-body-medium-size: 15px;
    --house-typescale-body-small-size: 13px;
    --house-typescale-label-large-size: 17px;
    --house-typescale-label-medium-size: 13px;
    --house-typescale-label-small-size: 12px;
  }
}

body {
  background: var(--house-color-surface);
  color: var(--house-color-on-surface);
  font-family: var(--house-typeface-plain);
}

code, kbd, samp, pre {
  font-family: var(--house-typeface-brand);
}

a {
  color: var(--house-color-primary);
}

::selection {
  background: var(--house-color-primary-fixed-dim);
  color: var(--house-color-on-primary-fixed);
}

:focus-visible {
  outline: var(--house-length-focus-ring) solid var(--house-color-secondary);
  outline-offset: 0;
}