/*
  Variables
*/

:root {
  --heading-font-family: "Domine", sans-serif;
  --base-font-family: "SF Pro", "Helvetica Neue", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, monospace;

  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;

  --leading: 1.4;
  --leading-slim: 1.1;
  --leading-flat: 1;

  /* Colours */
  --color-cc-burgandy: #85334d;
  --color-cc-sand-1: #fbfaf4;
  --color-cc-sand-2: #fdf7e7;
  --color-cc-sand-3: #edd3bc;
  --color-cc-sand-4: #d1925a;

  --color-hcc-primary-1: #006653;
  --color-hcc-primary-2: #0c5443;
  --color-hcc-primary-accent: #8ed400;
  --color-hcc-primary-weak: #e1ebe3;
  --color-hcc-secondary: #daa520;
  --color-hcc-secondary-weak: #f7f2de;

  --color-white: #ffffff;
  --color-offwhite: #f0f0f0;
  --color-black: #000000;
  --color-grey: #575554;
  --color-danger: #d24023;
  --color-danger-weak: #f6e2de;
  --color-warning: #fab74d;
  --color-warning-weak: #f8f4ed;
  --color-info: #3465e2;
  --color-success: #117627;
  --color-success-weak: #d7e5da;

  --color-accent: var(--color-cc-burgandy);
  --color-dark: #161412;
  --color-mid: var(--color-grey);
  --color-light: var(--color-cc-sand-1);

  --color-bg: var(--color-light);
  --color-text: var(--color-dark);
  --color-text-link: var(--color-accent);
  --color-border: var(--color-cc-sand-3);

  --color-selection-text: var(--color-dark);
  --color-selection-bg: var(--color-cc-sand-3);

  --border-color: var(--color-dark);

  --focus-width: 2px;
  --focus-color: var(--color-accent);
  --focus-offset: 0;
  --focus-style: solid;

  --checkbox-focus-width: 2px;
  --checkbox-focus-color: var(--color-accent);
  --checkbox-focus-offset: 0.095lh;
  --checkbox-focus-style: solid;

  --radio-focus-width: 2px;
  --radio-focus-color: var(--color-accent);
  --radio-focus-offset: 0.095lh;
  --radio-focus-style: solid;

  /* Text Size */
  --text-size-2xs: clamp(0.625rem, 0.7043rem + -0.0839vi, 0.6875rem);
  --text-size-xs: clamp(0.8125rem, 0.7957rem + 0.0839vi, 0.875rem);
  --text-size-s: clamp(0.875rem, 0.8414rem + 0.1678vi, 1rem);
  --text-size-m: clamp(1rem, 0.9664rem + 0.1678vi, 1.125rem);
  --text-size-l: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);
  --text-size-xl: clamp(1.1875rem, 1.1036rem + 0.4195vi, 1.5rem);
  --text-size-2xl: clamp(1.3125rem, 1.1951rem + 0.5872vi, 1.75rem);
  --text-size-3xl: clamp(1.4375rem, 1.2865rem + 0.755vi, 2rem);
  --text-size-4xl: clamp(1.5625rem, 1.2773rem + 1.4262vi, 2.625rem);

  /* Size */
  --size-0: clamp(1.0625rem, 0.9954rem + 0.3356vi, 1.3125rem);
  --size-1: clamp(1.1875rem, 1.1036rem + 0.4195vi, 1.5rem);
  --size-2: clamp(1.3125rem, 1.1951rem + 0.5872vi, 1.75rem);
  --size-3: clamp(1.4375rem, 1.2865rem + 0.755vi, 2rem);
  --size-4: clamp(1.5625rem, 1.2773rem + 1.4262vi, 2.625rem);
  --size-5: clamp(1.6875rem, 1.2177rem + 2.349vi, 3.4375rem);
  --size-6: clamp(1.8125rem, 1.0742rem + 3.6913vi, 4.5625rem);
  --size-7: clamp(2.0625rem, 0.7706rem + 6.4597vi, 6.875rem);

  /* Space */
  --space-4xs: clamp(0.1875rem, 0.1707rem + 0.0839vi, 0.25rem);
  --space-3xs: clamp(0.28125rem, 0.2561rem + 0.1258vi, 0.375rem);
  --space-2xs: clamp(0.375rem, 0.3414rem + 0.1678vi, 0.5rem);
  --space-xs: clamp(0.5625rem, 0.5122rem + 0.2517vi, 0.75rem);
  --space-s: clamp(0.75rem, 0.6829rem + 0.3356vi, 1rem);
  --space-m: clamp(1.125rem, 1.0243rem + 0.5034vi, 1.5rem);
  --space-l: clamp(1.5rem, 1.3658rem + 0.6711vi, 2rem);
  --space-xl: clamp(1.875rem, 1.7072rem + 0.8389vi, 2.5rem);
  --space-2xl: clamp(3rem, 2.7315rem + 1.3423vi, 4rem);
  --space-3xl: clamp(3.75rem, 3.4144rem + 1.6779vi, 5rem);
  --space-4xl: clamp(5.625rem, 5.1216rem + 2.5168vi, 7.5rem);

  /* Shadows */
  --shadow-s: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-l: 0 2px 24px 0px rgba(0, 0, 0, 0.2);

  /* Z-index */
  --index-sticky: 400;
  --index-nav: 500;
  --index-dialog: 600;
  --index-loading: 700;
  --index-toast: 800;

  /* Radius */
  --radius: 0.5em;
  --radius-l: 2em;
  --radius-m: 1em;
  --radius-s: 0.25em;
  --radius-circle: 50%;

  /* Button */
  --button-padding: 0.7em 1em;
  --button-gap: 0.5em;
  --button-radius: 8px;
  --button-bg: var(--color-accent);
  --button-color: var(--color-light);
  --button-hover-bg: var(--color-dark);
  --button-hover-color: var(--color-light);
  --button-icon-size: 1.2cap;
  --button-outline-width: 1px;
  --button-outline-style: dashed;
  --button-outline-color: yellow;

  /* Form Elements */
  --input-background: var(--color-white);
  --input-border: 1px solid var(--border-color);
  --input-border-invalid: 1px solid var(--color-danger);
  --input-radius: var(--radius-s);
  --input-padding: var(--space-2xs);
  --input-font-size: var(--text-size-m);

  --label-font-size: var(--text-size-s);
  --label-weight: var(--font-medium);
  --label-leading: var(--leading-slim);

  /* Super Dropdown */
  --super-dropdown-background: var(--color-light);
  --super-dropdown-border: 1px solid var(--border-color);
  --super-dropdown-radius: var(--radius-s);
  --super-dropdown-font-size: var(--text-size-m);

  --super-dropdown-item-padding: var(--space-2xs);
  --super-dropdown-item-space: var(--space-s);
  --super-dropdown-item-border: var(--color-cc-sand-3);
  --super-dropdown-item-meta-font-size: var(--text-size-xs);
  --super-dropdown-item-meta-color: var(--color-mid);

  --super-dropdown-search-padding: var(--space-2xs);

  --super-dropdown-secondary-toggle-font-size: var(--text-size-xs);
  --super-dropdown-secondary-toggle-padding-x: var(--space-xs);
  --super-dropdown-secondary-toggle-padding-y: var(--space-4xs);
  --super-dropdown-secondary-toggle-background: var(--color-cc-sand-2);

  /* Panel */
  --panel-background: var(--color-white);
  --panel-border: 1px solid var(--border-color);
  --panel-radius: var(--radius);
  --panel-heading-padding: var(--space-s) var(--space-s) var(--space-2xs);
  --panel-content-has-heading-padding: var(--space-2xs) var(--space-s) var(--space-s);
  --panel-content-no-heading-padding: var(--space-s);

  /* Sections */
  --panel-border-request: var(--color-cc-burgandy);
  --button-color-request: var(--color-cc-burgandy);

  --panel-border-client: var(--color-hcc-primary-1);
  --button-color-client: var(--color-hcc-primary-1);

  --panel-border-hatha: var(--color-cc-sand-4);
  --button-color-hatha: var(--color-cc-sand-4);
}