@charset "UTF-8";

:root {
  /* BRAND */
  --brand-primary:   #fe7f44;
  --brand-primary-dark: #fe7f44;
  --brand-secondary: #feb345;
  --brand-accent:    #f5f5f0;
  --brand-white:     #ffffff;
  --brand-black: #122a2c;
  --brand-grey:      #f5f5f0;

  /* TYPOGRAPHY */
  --font-heading: "ice-cream-slant", sans-serif;
  --font-body:    "inter-18pt", sans-serif;
  --font-buttons: "Geist", sans-serif;

  /* UI */
  --text-main:  var(--brand-black);
  --text-light: #ffffff;
  --text-muted: #6b6b6b;
  --bg-body:    #ffffff;
  --bg-light:   #f5f5f0;

  /* COMPONENTS */
  --input-border: #d0d0d0;
  --input-height: 50px;
  --btn-radius: 5px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 50px;

  /* Shadows */
  --shadow-sm: 0px 4px 13px rgb(87 88 88 / 5%);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 30px rgba(0,0,0,0.16);

  /* RESPONSIVE SPACING */
  --section-gap: clamp(40px, 5vw, 100px);
  --section-gap-sm: calc(var(--section-gap) / 2);

  /* LAYOUT SPACING */
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 3rem;

  /* HEADER / FOOTER */
  --header-bg: var(--brand-black);
  --footer-bg: var(--brand-black);

  /* TRANSITIONS */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
}

@media (min-width: 992px) {
  :root {
    --radius-sm: 8px;
    --radius-md: 20px;
    --radius-lg: 35px;
    --radius-xl: 50px;
    --section-gap: clamp(40px, 10vw, 120px);
    --section-gap-sm: calc(var(--section-gap) / 2);
  }
}