/* =============================================================== */
/* Variables                                                       */
/* =============================================================== */

:root {
  --color-green-dark: rgb(0, 159, 79);
  --color-green: rgb(114, 190, 68);
  --color-green-light: rgb(179, 220, 137);
  --color-green-lighter: rgb(220, 240, 200);
  --color-green-tint: rgba(0, 159, 79, 0.1);
  --color-green-tint-strong: rgba(0, 159, 79, 0.15);
  --color-red: rgb(237, 28, 36);
  --color-yellow: rgb(255, 242, 0);
  --color-blue: rgb(48, 70, 93);
  --color-gray: rgb(109, 124, 146);
  --color-gray-light: rgb(240, 242, 245);
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(10, 10, 10);
  --color-white-muted: rgba(255, 255, 255, 0.8);

  --gradient-green: radial-gradient(circle at 5% 25%, var(--color-yellow) 0%, var(--color-green-lighter) 15%, var(--color-green-light) 30%, var(--color-green) 50%, var(--color-green-dark) 80%);
  --gradient-green-subtle: linear-gradient(135deg, rgba(0, 159, 79, 0.08), rgba(114, 190, 68, 0.06));
  --gradient-badge: linear-gradient(135deg, rgba(237, 28, 36, 0.95), rgba(237, 28, 36, 0.85));

  --border-color: var(--color-black);
  --main-bg: var(--color-white);
  --main-fg: var(--color-black);
  --heading-fg: var(--color-green-dark);
  --header-bg: var(--color-white);
  --header-fg: var(--color-black);
  --hero-fg: var(--color-white);
  --link-bg: inherit;
  --link-fg: var(--color-green-dark);
  --link-hover-bg: var(--color-green-tint-strong);
  --link-hover-fg: var(--color-green);
  --button-bg: var(--color-gray);
  --button-fg: var(--color-white);
  --footer-bg: var(--color-blue);
  --footer-fg: var(--color-white);
  --footer-inner-bg: var(--color-gray);
  --footer-inner-fg: var(--color-white);
  --footer-link-bg: var(--color-white);
  --footer-link-fg: var(--color-green-dark);
  --comment-bg: var(--color-gray-light);
  --comment-fg: var(--color-black);
  --comment-form-bg: var(--color-gray-light);
  --comment-form-fg: var(--color-black);
  --vcard-bg: var(--color-blue);
  --vcard-fg: var(--color-white);

  --font-base: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Noto Sans Display", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Major Third (1.25) */
  --font-size-base: 1rem;
  --font-size-tiny: 0.5em;
  --font-size-small: 0.8em;
  --font-size-large: 1.563em;
  --font-size-h6: 1em;
  --font-size-h5: 1.25em;
  --font-size-h4: 1.563em;
  --font-size-h3: 1.953em;
  --font-size-h2: 2.441em;
  --font-size-h1: 3.052em;

  --font-size-header: var(--font-size-large);
  --font-size-tagline: var(--font-size-small);
  --font-size-hero-header: clamp(1.6rem, 4vw, 4rem);
  --font-size-hero-text: clamp(.8rem, 2vw, 2rem);

  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-bolder: 1000;
  --font-weight-semibold: 600;

  --line-height: 1.4;

  --space-3xs: 0.125em;
  --space-2xs: 0.25em;
  --space-xs: 0.5em;
  --space-s: 0.75em;
  --space-m: 1em;
  --space-l: 1.5em;
  --space-xl: 2em;

  --space-3xs-fix: 0.125rem;
  --space-2xs-fix: 0.25rem;
  --space-xs-fix: 0.5rem;
  --space-s-fix: 0.75rem;
  --space-m-fix: 1rem;
  --space-l-fix: 1.5rem;
  --space-xl-fix: 2em;

  --space-gap: var(--space-2xs);
  --space-gap-large: var(--space-m);
  --padding: var(--space-m);
  --padding-small: var(--space-xs);
  --padding-fix: var(--space-m-fix);
  --space-list-box: 0 0 var(--space-2xs) var(--space-l);
  --space-list-item: var(--space-2xs) 0;

  --orphans: 3;
  --widows: 3;

  --border-width: var(--space-3xs);
  --lift-distance: 0.1rem;
  --underline-thickness: 0.1em;
  --underline-offset: 0.1em;
  --border: var(--border-width) solid var(--border-color);

  --radius: var(--space-m);
  --radius-round: 999em;

  --text-shadow: -.05em -.05em .05em hsl(190, 50%, 90%),
    .05em .05em .05em hsl(190, 50%, 50%);
  --box-shadow: -.05em -.05em .05em hsl(190, 50%, 90%),
    .05em .05em .05em hsl(190, 50%, 50%);
  --shadow-soft: 0 0.5em 1em rgba(0, 0, 0, 0.12);
  --shadow-strong: 0 1.5em 2.5em rgba(0, 0, 0, 0.22);
  --shadow-header: 0 0.5em 1em rgba(0, 0, 0, 0.08);

  --focus-ring: 0 0 0 3px rgba(0, 159, 79, 0.25);

  --transition-fast: 120ms ease;
  --transition-medium: 200ms ease;
  --transition-hero: all 2s cubic-bezier(0.4, 0, 0.2, 1);

  --link-padding: var(--space-m-fix) var(--space-s-fix);

  --adminbar-height: 32px;
  --header-height-factor: 1.563
    /* calc(var(--font-size-header) / 1em) */
  ;
  --header-height: calc(4rem * var(--header-height-factor));
  --hero-height: 22rem;
  --logo-size: min(20vh, 16vw);
  --brand-mark-size: 2em;
  --column-width: 65ch;

  --z-index-hero-media: 1;
  --z-index-hero-overlay: 2;
  --z-index-hero-portrait: 3;
  --z-index-logo: 4;
  --z-index-logo-badge: 5;
  --z-index-hero-content: 6;
  --z-index-hero-scroller: 7;
  --z-index-header: 1000;
}