:root {
  
  /* COLORS */
  --color-canvas: #fff;
  --color-ink: #000;
  --color-border: #000;

  --color-accent-ink: #fff;
  --color-accent-canvas: #e53935;

  --color-selected: #999;

  /* OKLCH colors: Fixed */
  --lch-black: 0% 0 0;
  --lch-white: 100% 0 0;  
  
  /* Spacing */

  --space-sm: 0.5rem;
  --space-base: 1rem;  
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  /* Controls */
  --control-height: 3.5rem;

  --container-max-width: 1200px;

  --container-padding-top: 0;
  --container-padding-right: var(--space-base);
  --container-padding-bottom: 0;  
  --container-padding-left: var(--space-base);

  --container-padding-vertical: var(--space-sm);  
  --container-padding-horizontal: var(--space-base);

  /* Text */
  --font-sans: sans-serif;
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;

  --font-size: clamp(1.375rem, 2.225vw, 2rem);

  --font-size-xxxx-small: 45%;
  --font-size-xxx-small: 55%;
  --font-size-xx-small: 65%;
  --font-size-x-small: 75%;
  --font-size-small: 85%;
  --font-size-medium: 100%;
  --font-size-large: 125%;
  --font-size-x-large: 150%;
  --font-size-xx-large: 200%;
  --font-size-xxx-large: 260%;

  --radius-base: 0.5rem;

  --border-base: 0.0625rem;

  /* Shadows */
  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%),
            0 0.2em 0.2em oklch(var(--lch-black) / 5%),
            0 0.4em 0.4em oklch(var(--lch-black) / 5%),
            0 0.8em 0.8em oklch(var(--lch-black) / 5%);

  --shadow-nav: 0 2px 10px rgba(0,0,0,0.33);
  --shadow-nav-sub: 0 4px 20px rgba(0,0,0,0.1);

  --anchor-scroll-offset: 90px;


  scroll-padding-top: var(--anchor-scroll-offset, 0px);


  /* Focus rings for keyboard navigation */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 1px;
  --focus-ring-size: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

  /* Dialogs */
  --dialog-duration: 150ms;

  /* Easing functions from https://easingwizard.com/ */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-overshoot: cubic-bezier(0.25, 1.75, 0.5, 1);
  --ease-out-overshoot-subtle: cubic-bezier(0.25, 1.25, 0.5, 1);


  /* Z-index */
  --z-nav: 100;
  --z-nav--container: 101;
  --z-nav-open: 102;
  --z-flash: 30;
  --z-tooltip: 40;
  --z-bar: 50;
  --z-popup: 1000;
  --z-popup-content: 1001;


  /* --- Responsive Spacing & Layout --- */
  --mobile-breakpoint: 639px;

  @media(max-width: 639px) {
    :root {
      --font-size: clamp(1.25rem, 2.225vw, 2rem);
      --font-size-xxx-large: 220%;
      --anchor-scroll-offset: 70px;
    }
  }
}