:root {
  --font-family: Inter, sans-serif;

  --min-font-size: 1rem;
  --font-size: clamp(var(--min-font-size), 0.8397rem + 0.5128vw, 1.25rem);
  --line-height: 1.4;

  --main-small-width: min(100%, 30rem);
  --main-medium-width: min(100%, 46rem);
  --main-large-width: min(100%, 69rem);

  /* HSL Color Variables */
  --hsl-white: 0, 0%, 100%;
  --hsl-black: 0, 0%, 0%;

  --hsl-base-50: 43, 100%, 96%;
  --hsl-base-100: 39, 44%, 90%;
  --hsl-base-200: 33, 53%, 86%;
  --hsl-base-300: 41, 35%, 80%;
  --hsl-base-400: 42, 20%, 67%;
  --hsl-base-500: 49, 95%, 59%; /* Yellow */
  --hsl-base-600: 42, 100%, 45%; /* Amber */
  --hsl-base-700: 39, 100%, 39%; /* Deep amber */
  --hsl-base-800: 55, 73%, 23%;
  --hsl-base-900: 42, 24%, 7%;

  --hsl-success-100: 131, 44%, 92%;
  --hsl-success-200: 131, 44%, 83%;
  --hsl-success-300: 131, 44%, 77%;
  --hsl-success-600: 131, 44%, 44%;
  --hsl-success-700: 131, 44%, 37%;
  --hsl-success-800: 131, 44%, 23%;

  --hsl-warning-200: 31, 44%, 86%;
  --hsl-warning-300: 31, 44%, 77%;
  --hsl-warning-600: 31, 44%, 44%;

  --hsl-error-50:  14, 77%, 96%;
  --hsl-error-100: 14, 77%, 92%;
  --hsl-error-200: 14, 77%, 83%;
  --hsl-error-300: 14, 77%, 77%;
  --hsl-error-600: 14, 77%, 44%;
  --hsl-error-700: 14, 77%, 37%;
  --hsl-error-800: 14, 77%, 23%;

  --hsl-info-50:  216, 100%, 96%;
  --hsl-info-100: 216, 100%, 92%;
  --hsl-info-200: 216, 100%, 83%;
  --hsl-info-300: 216, 100%, 77%;
  --hsl-info-500: 216, 100%, 50%;
  --hsl-info-600: 216, 100%, 44%;
  --hsl-info-950: 216, 100%, 12%;

  --hsl-purple-200: 272, 52%, 85%;
  --hsl-purple-800: 278, 57%, 20%;

  /* A store's own colour as a scale, like the palette above: 50 and 200 are
     tints of it, 400 a deeper shade, 500 the colour itself. Store pages set
     them from the chef's colour (store/application/_store_style). */
  --color-store-50: hsl(var(--hsl-base-50));
  --color-store-200: hsl(var(--hsl-base-100));
  --color-store-400: hsl(var(--hsl-base-200));
  --color-store-500: hsl(var(--hsl-base-500));

  --color-main-bg: hsl(var(--hsl-base-50));
  --color-text: hsla(var(--hsl-black), 0.9);
  --color-text-error: hsl(var(--hsl-error-700));
  --color-text-muted: hsla(var(--hsl-black), 0.6);
  /* A line between things, and the edge of a panel such as a card, a dialog,
     a sheet or the board. */
  --color-line: hsl(var(--hsl-base-200));
  --color-border: hsl(var(--hsl-base-300));
  /* Cards and sheets on the page. */
  --color-panel-bg: hsl(var(--hsl-base-50));
  /* The main thing to do, such as a primary button or a step done, and the
     text on it. */
  --color-primary-bg: hsl(var(--hsl-success-600));
  --color-primary-color: hsl(var(--hsl-white));

  --color-link-color: hsla(var(--hsl-black), 0.9);

  --color-input-color: hsla(var(--hsl-black), 0.9);
  --color-input-bg: hsl(var(--hsl-white));
  --color-input-border: hsla(var(--hsl-black), 0.9);
  --color-input-error-color: hsl(var(--hsl-error-700));
  --color-input-disabled-color: hsl(var(--hsl-base-800));
  --color-input-disabled-bg: hsl(var(--hsl-base-100));
  --color-input-suffix-bg: hsl(var(--hsl-base-200));

  --color-button-bg: transparent;
  --color-button-border: hsla(var(--hsl-black), 0.4);
  --color-button-color: hsla(var(--hsl-black), 0.9);

  --color-button-primary-bg: var(--color-primary-bg);
  --color-button-primary-border: var(--color-primary-bg);
  --color-button-primary-color: var(--color-primary-color);

  --color-shadow: hsla(var(--hsl-black), 0.07);
  --color-shadow-strong: hsla(var(--hsl-black), 0.13);

  --color-star: hsl(var(--hsl-base-600));

  /* White panels raised a little off the page, like a day's dishes. */
  --color-surface: hsl(var(--hsl-white));
  --shadow-raised: 0 1px 2px var(--color-shadow-strong);

  --color-toolbar-bg: hsla(var(--hsl-black), 0.9);
  --color-toolbar-color: hsl(var(--hsl-white));

  --color-board-bg: var(--color-surface);
  --color-board-header-bg: var(--color-main-bg);
  --color-board-header-color: hsl(var(--hsl-base-900));

  --color-dialog-bg: var(--color-main-bg);
  --color-dialog-border: var(--color-border);

  --color-video-trigger-bg: hsl(var(--hsl-base-50));
  --color-video-trigger-color: hsla(var(--hsl-black), 0.9);
  --color-video-trigger-border: hsla(var(--hsl-black), 0.4);
  --color-video-player-bg: hsl(var(--hsl-black));

  --color-card-bg: var(--color-panel-bg);
  --color-card-color: var(--color-text);
  --color-card-border: var(--color-border);
  --color-card-strong-bg: hsla(var(--hsl-white), 0.5);

  --color-card-error-bg: hsla(var(--hsl-error-700), 0.05);
  --color-card-error-border: hsl(var(--hsl-error-700));
  /* A card in a colour, on its border and its header, with the header's text. */
  --color-card-red: hsl(0, 70%, 45%);
  --color-card-yellow: hsl(var(--hsl-base-500));
  --color-card-blue: hsl(var(--hsl-info-500));
  --color-card-green: hsl(var(--hsl-success-700));
  --color-card-white: hsl(var(--hsl-white));
  --color-card-header-color: hsl(var(--hsl-white));

  --color-sheet-bg: var(--color-panel-bg);
  --color-sheet-border: var(--color-border);
  --color-sheet-error-border: hsl(var(--hsl-error-700));

  --color-receipt-bg: hsl(var(--hsl-white));

  --color-pill-bg: hsl(var(--hsl-base-200));
  --color-pill-color: hsl(var(--hsl-base-800));

  --color-tape-bg: hsl(var(--hsl-base-500));
  --color-tape-color: hsl(var(--hsl-base-900));

  --color-status-bg: hsl(var(--hsl-base-50));
  --color-status-color: hsl(var(--hsl-base-400));

  --color-notice-bg:             hsl(var(--hsl-info-50));
  --color-notice-color:          hsl(var(--hsl-info-950));
  --color-notice-border:         hsl(var(--hsl-info-200));
  --color-notice-error-bg:       hsl(var(--hsl-error-50));
  --color-notice-error-color:    hsl(var(--hsl-error-800));
  --color-notice-error-border:   hsl(var(--hsl-error-200));
  --color-notice-success-bg:     hsl(var(--hsl-success-100));
  --color-notice-success-color:  hsl(var(--hsl-success-800));
  --color-notice-success-border: hsl(var(--hsl-success-200));
  --color-notice-alert-bg:       var(--color-card-error-bg);
  --color-notice-alert-color:    var(--color-text-error);
  --color-notice-alert-border:   var(--color-card-error-border);

  --color-status-success-bg: hsl(var(--hsl-success-200));
  --color-status-success-color: hsl(var(--hsl-success-600));
  --color-status-error-bg: hsl(var(--hsl-error-200));
  --color-status-error-color: hsl(var(--hsl-error-600));
  --color-status-warning-bg: hsl(var(--hsl-warning-200));
  --color-status-warning-color: hsl(var(--hsl-warning-600));

  --color-marker-bg: hsl(var(--hsl-base-500));
  --color-marker-color: hsla(var(--hsl-black), 0.9);
  --color-marker-border: hsla(var(--hsl-black), 0.9);
  --color-marker-primary-bg: hsla(var(--hsl-black), 0.9);
  --color-marker-primary-color: hsl(var(--hsl-white));
  --color-marker-secondary-bg: hsl(var(--hsl-white));
  --color-marker-secondary-color: hsla(var(--hsl-black), 0.9);

  --color-metric-positive: hsl(var(--hsl-success-600));
  --color-metric-negative: hsl(var(--hsl-error-600));

  --color-radio-button-bg: hsla(var(--hsl-white), 0.25);
  --color-radio-button-outline: hsla(var(--hsl-black), 0.15);
  --color-radio-button-hover-outline: hsla(var(--hsl-black), 0.35);
  --color-radio-button-checked-outline: hsl(var(--hsl-info-500));
  --color-radio-button-checked-bg: hsl(var(--hsl-white));

  --color-autocomplete-bg: hsl(var(--hsl-white));
  --color-autocomplete-border: hsla(var(--hsl-black), 0.9);
  --color-autocomplete-highlight-bg: hsla(var(--hsl-black), 0.06);
  --color-autocomplete-message-color: hsl(var(--hsl-base-400));
  --color-autocomplete-hint-bg: hsl(var(--hsl-base-100));
  --color-autocomplete-category-bg: #e5e7eb;
  --color-autocomplete-category-color: #374151;

  --color-icon-success-bg: hsl(var(--hsl-success-600));
  --color-inline-form-bg: hsl(var(--hsl-base-100));
  --color-inline-form-border: hsl(var(--hsl-base-200));

  --color-checkbox-border: hsla(var(--hsl-black), 0.8);
  --color-checkbox-hover-bg: hsla(var(--hsl-black), 0.05);
  --color-checkbox-checked-border: hsl(var(--hsl-success-300));
  --color-checkbox-checked-bg: hsl(var(--hsl-success-100));
  --color-checkbox-checked-color: hsl(var(--hsl-success-600));

  --color-popup-menu-bg: hsl(var(--hsl-success-600));
  --color-popup-menu-color: hsl(var(--hsl-white));

  --color-action-group-button-bg: hsla(var(--hsl-white), 0.3);
  --color-action-group-button-color: hsl(var(--hsl-white));
  --color-action-group-button-active-bg: hsla(var(--hsl-black), 0.3);

  --color-action-sheet-item-hover-bg: hsla(var(--hsl-black), 0.3);

  --color-file-upload-bg: hsl(var(--hsl-base-100));

  --color-flash-bg: hsla(var(--hsl-black), 0.8);
  --color-flash-color: hsl(var(--hsl-white));

  --color-description-list-check: hsla(var(--hsl-black), 0.5);
  --color-description-list-check-success: hsl(var(--hsl-success-600));

  --color-blockquote-border: hsla(var(--hsl-black), 0.5);
  --color-pre-bg: hsl(var(--hsl-base-100));

  --color-code-bg: hsl(var(--hsl-base-100));
  --color-code-border: hsla(var(--hsl-black), 0.1);

  --color-ring-bg: hsl(var(--hsl-base-50));
  --color-ring-border: hsl(var(--hsl-base-200));
  --color-ring-success-border: hsl(var(--hsl-success-600));

  --color-menu-bg: hsl(var(--hsl-base-100));
  --color-menu-border: var(--color-border);

  --radius-small: 0.375rem;
  --radius-medium: 0.625rem; /* icon tiles and thumbnails */
  --radius-large: 1rem; /* raised panels and the store's header */
  --card-radius: var(--radius-small);

  /* Something to tap is sized for a finger, so it stays put while the text
     grows with the screen. */
  --size-tap: 44px;
}

@supports (font-variation-settings: normal) {
  :root {
    --font-family: InterVariable, sans-serif;
  }
}