:root {
  /* ─── Sizing ───────────────────────────────────────────────────────── */
  --size-fullscreen-height: 100vh;
  --size-fullscreen-width: 100vw;

  --size-app-height: 80vh;
  --size-app-width: 80vw;

  --size-titlebar-height: 50px;

  /* ─── Color Palette (Gruvbox) ─────────────────────────────────────── */
  /* Backgrounds */
  --color-gruvbox-bg: #282828;
  --color-gruvbox-bg-alt: #1d2021;

  /* Foregrounds */
  --color-gruvbox-fg: #ebdbb2;
  --color-gruvbox-fg-alt: #f9f5d7;

  /* Accents */
  --color-gruvbox-red: #cc241d;
  --color-gruvbox-green: #98971a;
  --color-gruvbox-yellow: #d79921;
  --color-gruvbox-blue: #458588;
  --color-gruvbox-purple: #b16286;
  --color-gruvbox-aqua: #689d6a;
  --color-gruvbox-gray: #a89984;

  /* ─── Typography ──────────────────────────────────────────────────── */
  --font-base-family: monospace;
  --font-base-size: 17px;
  --font-titlebar-size: 16px;

  /* ─── Spacing ─────────────────────────────────────────────────────── */
  --spacing-default-vertical: 1.5em;
  --spacing-default-horizontal: 2em;

  --spacing-titlebar-horizontal: 15px;

  /* ─── Borders & Shadows ──────────────────────────────────────────── */
  --border-radius-app: 15px 15px 5px 5px;
  --border-radius-titlebar: 15px 15px 0 0;

  --border-light: 1.4px solid var(--color-gruvbox-aqua);

  --box-shadow-app:
    rgba(0, 0, 0, 0.4) 8px 8px 10px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -5px 0px inset;

  /* ─── Theming Contexts ───────────────────────────────────────────── */
  /* Dark variants */
  --theme-dark-soft: var(--color-gruvbox-bg);
  --theme-dark-hard: var(--color-gruvbox-bg-alt);

  /* Light variants */
  --theme-light-soft: var(--color-gruvbox-fg);
  --theme-light-hard: var(--color-gruvbox-fg-alt);

  /* Application backgrounds */
  --bg-body: var(--theme-dark-soft);
  --bg-canvas: var(--theme-dark-soft);
  --bg-terminal: var(--theme-dark-hard);
  --bg-titlebar: var(--bg-terminal);
  --bg-buttons: var(--bg-terminal);
  --bg-made-with: var(--bg-terminal);
  --bg-reopener: var(--bg-terminal);

  /* Selected suggestion */
  --bg-suggestion-active: var(--theme-dark-soft);

  /* Foreground (Text, Icons…) */
  --fg-default: var(--theme-light-soft);
}

@supports (height: 100dvh) {
  :root {
    --size-fullscreen-height: 100dvh;
    --size-fullscreen-width: 100dvw;

    --size-app-height: 80dvh;
    --size-app-width: 80dvw;
  }
}