:root {
  --font-base: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand palette */
  --bg-main: #ededed;
  --bg-surface: #f8f8f8;
  --bg-dark: #24252a;
  --text-primary: #111417;
  --text-primary-rgb: 17, 20, 23;
  --text-secondary: #515151;
  --text-on-dark: #ffffff;
  --interactive: #e0a458;
  --interactive-dark: #b8832e;
  --status-danger-rgb: rgb(226, 52, 68);
  --status-success-rgb: rgb(46, 181, 120);
  --status-danger: #e23444;
  --status-success: #2eb578;
  --status-warning: #b8832e;
  --status-info: #3f7ec8;
  --status-danger-soft: rgba(226, 52, 68, 0.12);
  --status-success-soft: rgba(46, 181, 120, 0.12);
  --status-warning-soft: rgba(184, 131, 46, 0.14);
  --status-info-soft: rgba(63, 126, 200, 0.12);

  /* Font sizes */
  --fs-xs: 0.75rem; /* 12px */
  --fs-sm: 0.875rem; /* 14px */
  --fs-base: 1rem; /* 16px */
  --fs-md: 1.125rem; /* 18px */
  --fs-l: 1.25rem; /* 20px */
  --fs-lg: 1.5rem; /* 24px */
  --fs-page-title: clamp(2rem, 1.2rem + 2vw, 2.8rem);
  --fs-page-subtitle: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);

  /* Font weight */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter spacing */
  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-xwide: 0.12em;
  --ls-eyebrow: 0.3em;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-base: 1.5;
  --lh-relaxed: 1.6;
  --lh-wide: 1.8;

  /* Border radius */
  --radius-xxl: 6.1875rem;
  --radius-xl: 2rem;
  --radius-lg: 1.5rem;
  --radius-md: 1.125rem;
  --radius-ms: 0.875rem;
  --radius-sm: 0.75rem;
  --radius-sx: 0.625rem;
  --radius-ssx: 0.5rem;

  /* Shadow */
  --interactive-rgb: 224, 164, 88;
  --shadow: 0 1.5625rem 3.75rem rgba(15, 15, 15, 0.08);
  --porcelain-rgb: 249, 246, 239;
  --cedar-rgb: 47, 107, 95;
  --damson-rgb: 91, 42, 69;

  /* Layout */
  --header-height: 4rem;
  --header-top-offset: 0.75rem;
  --page-inline-pad: clamp(1rem, 4vw, 2rem);
  --page-content-top-gap: 0.875rem;
  --page-title-top-offset: 0.55rem;
}

html,
body {
  font-family: var(--font-base);
}

.oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; 
  width: fit-content;
  min-height: 3.2rem; 
  padding: 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1); 
  border-radius: var(--radius-xxl);
  background: linear-gradient(180deg, var(--interactive) 0%, var(--interactive) 100%);
  color: var(--text-on-dark);
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: 
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
    box-shadow 0.2s ease, 
    filter 0.2s ease;
}

.oc-btn:hover {
  filter: brightness(1.1) saturate(1.1);
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px rgba(var(--interactive-rgb), 0.3);
}

.oc-btn:focus-visible {
  outline: 2px solid var(--interactive);
  outline-offset: 2px;
}

.oc-btn:active {
  transform: translateY(0); 
  filter: brightness(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.oc-btn-icon {
  font-size: 1.2rem;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.oc-btn:hover .oc-btn-icon {
  transform: translateX(4px) scale(1.1);
}