/* Design Tokens for Aurelia Club */
@import "color-scheme.css";

/* cinzel-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cinzel-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-regular - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v39-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-700 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/playfair-display-v39-cyrillic_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-regular - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/manrope-v19-cyrillic_latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-600 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/manrope-v19-cyrillic_latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-700 - cyrillic_latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/manrope-v19-cyrillic_latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  /* Typography */
  --font-display: "Cinzel", serif;     /* h1 */
  --font-heading: "Playfair Display", serif; /* h2–h4 */
  --font-body: "Manrope", sans-serif;

  /* Font scale (Major Third 1.250) - 20% larger */
  --step--2: 0.833rem;
  --step--1: 1rem;
  --step-0: 1.2rem;
  --step-1: 1.44rem;
  --step-2: 1.728rem;
  --step-3: 2.074rem;
  --step-4: 2.489rem;
  --step-5: 2.986rem;
  --step-6: 3.583rem;
  --step-7: 4.3rem;

  /* Spacing – 4‑point scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2.5rem;
  --s-6: 4rem;

  /* Breakpoints */
  --bp-s: 576px;
  --bp-m: 768px;
  --bp-l: 1024px;
  --bp-xl: 1440px;

  /* =================================
     MOBILE-FIRST FONT SIZES
     (Desktop overrides at 768px+)
     Excludes: HERO, TOPBAR sections
     ================================= */
  
  /* Body & General Text */
  --fs-body: var(--step--1);
  --fs-small: var(--step--2);
  
  /* Headings (excluding HERO) */
  --fs-h2: var(--step-2);
  --fs-h3: var(--step-1);
  --fs-h4: var(--step-0);
  
  /* Component Text */
  --fs-blockquote: var(--step--1);
  --fs-list: var(--step--1);
  --fs-button: var(--step--1);
  --fs-form: var(--step--1);
  --fs-table: var(--step--2);
  --fs-footer: var(--step--1);
  --fs-team-title: var(--step-0);
  --fs-reviews: var(--step-0);
}

/* Desktop Font Size Overrides */
@media (min-width: 768px) {
  :root {
    /* Body & General Text */
    --fs-body: var(--step-0);
    --fs-small: var(--step--1);
    
    /* Headings */
    --fs-h2: var(--step-3);
    --fs-h3: var(--step-2);
    --fs-h4: var(--step-1);
    
    /* Component Text */
    --fs-blockquote: var(--step-0);
    --fs-list: var(--step-0);
    --fs-button: var(--step-0);
    --fs-form: var(--step-0);
    --fs-table: var(--step--1);
    --fs-footer: var(--step-0);
    --fs-team-title: var(--step-1);
    --fs-reviews: var(--step-2);
  }
}

/* Typography utilities */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
}
h1, .h1 { font-family: var(--font-display); font-size: var(--step-6); line-height: 1.3; margin: var(--s-5) 0 var(--s-3); color: var(--heading); }
h2, .h2 { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: 1.2; margin: var(--s-4) 0 var(--s-3); color: var(--heading); }
h3, .h3 { font-family: var(--font-heading); font-size: var(--fs-h3); line-height: 1.3; margin: var(--s-3) 0 var(--s-2); color: var(--heading); }
h4, .h4 { font-family: var(--font-heading); font-size: var(--fs-h4); line-height: 1.4; margin: var(--s-2) 0 var(--s-1); color: var(--heading); }

/* Standardized Button Styles (from color-scheme.css) */
button, .btn {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2px solid var(--btn-border);
  border-radius: 4px;
  padding: 0.6em 1.2em;
  font-size: var(--fs-button);
  font-family: inherit;
  cursor: pointer;
  transition: 0.25s;
  display: inline-block;
  text-decoration: none;
}
button:hover, .btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
}
button:disabled, .btn:disabled {
  background: var(--btn-bg-disabled);
  color: var(--btn-text-disabled);
  cursor: not-allowed;
  border-color: var(--btn-border-disabled);
}

/* Ghost button variant */
.btn--ghost {
  background: transparent;
  color: var(--btn-bg);
  border-color: var(--btn-bg);
}
.btn--ghost:hover {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--primary-hover);
}

/* Highlight text styling */
h2 span.highlight {
  background: linear-gradient(135deg, var(--gold), var(--gold-hover));
  -webkit-background-clip: text;
  color: transparent;
}

/* Icon styling */
.icon {
  fill: var(--text-main);
  transition: fill 0.25s;
}

/* Color Swatch helper */
.swatch {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  margin: 0 var(--s-2) var(--s-2) 0;
  display: flex;
  align-items: flex-end;
  padding: var(--s-2);
  font-size: 0.75rem;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}