/* Design tokens — palette retuned for Villa Christina (Ionian sea + terracotta)
   on the same scale/rhythm system as the reference build. */

:root {
  /* Layout */
  --container: 1360px;
  --gap-side: 64px;
  --container-small: 768px;

  /* Palette */
  --color-transparent: transparent;
  --color-white: #fff;
  --color-black: #000;
  --color-terracotta: #b06a42;
  --color-clay: #8a4f2d;
  --color-sea: #14505f;
  --color-deep-sea: #0d3b47;
  --color-ink: #363636;
  --color-sand-1: #fdf9f5;
  --color-sand-2: #f7f1ea;

  /* Chrome — header, menu, scrim. Deliberately NOT --color-sand-*, because those
     are rewritten as the page travels dawn to evening, and fixed furniture must
     not change colour under the reader. */
  --color-chrome: #fdf9f5;
  /* Warm dark drawn from clay rather than the sea, so the cream panel sits on it
     without a warm/cool clash. */
  --color-scrim: rgba(46, 32, 22, .5);
  --color-red: #c0392b;

  /* Roles */
  --color-primary: var(--color-clay);
  --color-on-primary: var(--color-white);
  --color-bg: var(--color-sand-2);
  --color-text: var(--color-ink);
  --color-heading: var(--color-clay);
  --color-placeholder: var(--color-ink);
  --color-error: var(--color-red);
  --color-permalink: var(--color-clay);
  --color-permalink-highlight: var(--color-sea);

  /* Type scale */
  --size-12: 12px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-h1: 40px;
  --size-h2: 36px;
  --size-h3: 32px;
  --size-h4: 24px;
  --size-h5: 20px;
  --size-h6: 16px;
  --size-body: 15px;

  --font-primary: "Plus Jakarta Sans", sans-serif;
  --font-secondary: "Prata", serif;

  /* Spacing scale */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-120: 120px;
  --spacing-default: 104px;
  --spacing-heading: 24px;
  --spacing-paragraph: 24px;
  --spacing-gap-container: 40px;

  /* Chrome */
  --scroll-bar-width: 8px;
  --transition: all .3s ease;
  --transition-slow: all .6s ease;
  --scrollbar-track: #fff;
  --scrollbar-thumb: var(--color-primary);

  --header-height: 90px;
  --header-height-sticky: 90px;
  --logo-height: 50px;
  --mobile-menu-width: 400px;

  /* Forms */
  --form-field-height: 50px;
  --form-font-size: 12px;
  --form-border-width: 1px;
  --form-border-color: rgba(36, 36, 36, .3);
  --form-border-color-hover: var(--color-primary);
  --form-color: var(--color-ink);
}

@media only screen and (max-width: 1440px) {
  :root { --gap-side: 40px; }
}

@media only screen and (max-width: 1180px) {
  :root {
    --header-height: 65px;
    --logo-height: 40px;
    --spacing-default: 72px;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --gap-side: 24px;
    --spacing-default: 56px;
    --size-h1: 32px;
    --size-h2: 28px;
    --size-h3: 24px;
  }
}

@media only screen and (max-width: 480px) {
  :root { --logo-height: 36px; }
}

/* 320px is the narrowest phone still in use; the header needs the gutters back
   to fit its three items there. */
@media only screen and (max-width: 360px) {
  :root { --gap-side: 16px; }
}