/* ==================================================
   COOKIE DEVS
   GLOBAL DESIGN SYSTEM
   ================================================== */

/* =========================
   ROOT VARIABLES
   ========================= */

:root {
  /* ---------- Colors ---------- */

  --color-background: #ffffff;

  --color-surface: #f7f7f5;
  --color-surface-soft: #fafafa;

  --color-text: #111111;
  --color-text-secondary: #5f5f5f;
  --color-text-muted: #7a7a7a;

  --color-border: #e5e5e5;
  --color-border-strong: #d4d4d4;

  --color-black: #111111;
  --color-white: #ffffff;

  /* ---------- Typography ---------- */

  --font-primary: Arial, Helvetica, sans-serif;

  /* ---------- Layout ---------- */

  --container-width: 1280px;
  --container-narrow: 960px;

  --page-padding: 32px;

  /* ---------- Section Spacing ---------- */

  --section-space-large: 160px;
  --section-space-medium: 120px;
  --section-space-small: 80px;

  /* ---------- Radius ---------- */

  --radius-small: 8px;
  --radius-medium: 16px;
  --radius-large: 24px;

  /* ---------- Transitions ---------- */

  --transition-fast: 160ms ease;
  --transition-medium: 280ms ease;
  --transition-slow: 500ms ease;
}

/* ==================================================
   DOCUMENT
   ================================================== */

html {
  background: var(--color-background);
  color-scheme: light;
}

/* ==================================================
   BODY
   ================================================== */

body {
  background: var(--color-background);
  color: var(--color-text);

  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================================================
   TYPOGRAPHY
   ================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);

  font-family: var(--font-primary);
  font-weight: 700;
  line-height: 1.05;

  text-wrap: balance;
}

p {
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

strong {
  font-weight: 700;
}

/* ==================================================
   LINKS
   ================================================== */

a {
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

/* ==================================================
   CONTAINERS
   ================================================== */

.container {
  width: min(calc(100% - (var(--page-padding) * 2)), var(--container-width));

  margin-inline: auto;
}

.container-narrow {
  width: min(calc(100% - (var(--page-padding) * 2)), var(--container-narrow));

  margin-inline: auto;
}

/* ==================================================
   SECTION FOUNDATION
   ================================================== */

.section {
  position: relative;

  padding-block: var(--section-space-large);
}

/* ==================================================
   ACCESSIBILITY
   ================================================== */

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

/* ==================================================
   TEXT SELECTION
   ================================================== */

::selection {
  background: var(--color-text);
  color: var(--color-background);
}

/* ==================================================
   SCREEN READER ONLY
   ================================================== */

.visually-hidden {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;

  border: 0 !important;
}

/* ==================================================
   SKIP LINK
   ================================================== */

.skip-link {
  position: fixed;

  top: 16px;
  left: 16px;

  z-index: 9999;

  padding: 12px 18px;

  background: var(--color-text);
  color: var(--color-background);

  font-weight: 700;

  border-radius: var(--radius-small);

  transform: translateY(-200%);

  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 1024px) {
  :root {
    --page-padding: 24px;

    --section-space-large: 120px;
    --section-space-medium: 96px;
    --section-space-small: 72px;
  }
}

/* ==================================================
   MOBILE
   ================================================== */

@media (max-width: 640px) {
  :root {
    --page-padding: 20px;

    --section-space-large: 88px;
    --section-space-medium: 72px;
    --section-space-small: 56px;
  }
}

/* ==================================================
   REDUCED MOTION
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}