/* ============================================================
   Maine Coon Cafe — Colors & Type
   ------------------------------------------------------------
   A warm, vintage-cosy palette built around espresso browns,
   creams, ochres and the gold-orange "warmth glow" of the cafe.
   Type pairs a custom script (logo wordmark) with Forum (Roman
   inscription serif) and a humanist serif for body copy.
   ============================================================ */

/* ---------- Webfonts ---------- */

@font-face {
  font-family: "MaineCoonCafe Script";
  src: url("./fonts/MaineCoonCafeFont-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Forum";
  src: url("./fonts/Forum-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Body face: EB Garamond is a substitution — see README. */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* ============================================================
     COLOR TOKENS — raw palette (from the brand palette card)
     ============================================================ */

  /* Ochres / golds (the cafe's primary warm hue) */
  --mcc-gold-50:   #f6ecc8;  /* lifted highlight */
  --mcc-gold-100:  #eed39f;
  --mcc-gold-200:  #eed095;
  --mcc-gold-300:  #dfbd69;  /* hero gold */
  --mcc-gold-400:  #c8a758;
  --mcc-gold-500:  #d5992e;
  --mcc-gold-600:  #9e6b2b;
  --mcc-gold-700:  #926f35;
  --mcc-gold-800:  #957036;

  /* Espresso / coffee browns — ink + grounds */
  --mcc-espresso:   #312f2c;  /* primary text + dark surface */
  --mcc-espresso-2: #4a4641;
  --mcc-espresso-3: #6b6259;

  /* Creams + sand — paper, walls, foam */
  --mcc-cream:      #f2e8d6;  /* default page */
  --mcc-cream-2:    #ebdec5;
  --mcc-sand:       #e8d6ac;
  --mcc-sand-2:     #d9c694;

  /* Brand accent set */
  --mcc-sage:       #8a9b6f;  /* "calm cat" green */
  --mcc-burgundy:   #4a1321;  /* deep velvet, reservation accents */
  --mcc-slateblue:  #688ca9;  /* cool grey-blue */
  --mcc-brick:      #a34023;  /* clay, terracotta */

  /* "Warmth glow" — gradient sunset strip */
  --mcc-glow-1: #f5ef7a;
  --mcc-glow-2: #f99c24;
  --mcc-glow-3: #f8cf44;
  --mcc-glow-4: #f8af1e;
  --mcc-glow-5: #f37121;
  --mcc-glow-6: #f3ae1c;
  --mcc-glow-7: #fdb734;
  --mcc-glow-8: #fbf5a9;

  --mcc-warmth-glow: linear-gradient(
    90deg,
    var(--mcc-glow-1) 0%, var(--mcc-glow-3) 14%,
    var(--mcc-glow-7) 28%, var(--mcc-glow-4) 42%,
    var(--mcc-glow-2) 56%, var(--mcc-glow-5) 70%,
    var(--mcc-glow-6) 84%, var(--mcc-glow-8) 100%
  );

  /* ============================================================
     SEMANTIC SURFACE + INK TOKENS
     ============================================================ */

  --bg:            var(--mcc-cream);          /* default page */
  --bg-elevated:   #faf3e3;                   /* cards on cream */
  --bg-sunken:     var(--mcc-cream-2);
  --bg-inverse:    var(--mcc-espresso);
  --bg-accent:     var(--mcc-sand);

  --fg1:           var(--mcc-espresso);        /* primary text */
  --fg2:           var(--mcc-espresso-2);      /* secondary text */
  --fg3:           var(--mcc-espresso-3);      /* tertiary, captions */
  --fg-inverse:    var(--mcc-cream);

  --link:          var(--mcc-burgundy);
  --link-hover:    var(--mcc-brick);

  --border:        rgba(49, 47, 44, 0.14);     /* hairline on cream */
  --border-strong: rgba(49, 47, 44, 0.32);
  --border-inverse:rgba(242, 232, 214, 0.18);  /* hairline on espresso */

  --brand-primary: var(--mcc-burgundy);        /* primary buttons / CTAs */
  --brand-on-primary: var(--mcc-cream);
  --brand-gold:    var(--mcc-gold-300);
  --brand-accent:  var(--mcc-sage);

  /* Status (semantic) — drawn from the palette, not invented */
  --success:       var(--mcc-sage);
  --warning:       var(--mcc-gold-500);
  --danger:        var(--mcc-brick);
  --info:          var(--mcc-slateblue);

  /* ============================================================
     SPACING / RADII / SHADOWS
     ============================================================ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows are soft and warm — never neutral grey */
  --shadow-xs: 0 1px 0 rgba(49,47,44,0.04), 0 1px 2px rgba(49,47,44,0.06);
  --shadow-sm: 0 2px 6px rgba(49,47,44,0.08);
  --shadow-md: 0 8px 22px -8px rgba(49,47,44,0.18);
  --shadow-lg: 0 20px 48px -16px rgba(49,47,44,0.28);
  --shadow-inset: inset 0 0 0 1px rgba(49,47,44,0.06);

  /* Inner glow used on warm surfaces */
  --shadow-glow: 0 0 0 1px rgba(159,107,43,0.18),
                 0 12px 32px -12px rgba(159,107,43,0.45);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-script:   "MaineCoonCafe Script", "Pinyon Script", "Allura", cursive;
  --font-display:  "Forum", "Cormorant SC", "Trajan Pro", serif;
  --font-body:     "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale (1.250 / major third) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-5xl:  64px;
  --fs-6xl:  88px;
  --fs-hero: 128px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-display: 0.04em;   /* Forum likes a touch of letter-spacing */
  --tracking-eyebrow: 0.18em;   /* uppercase eyebrows */
  --tracking-tight:  -0.01em;
}

/* ============================================================
   SEMANTIC TEXT STYLES
   ============================================================ */

.mcc-wordmark {
  font-family: var(--font-script);
  font-size: var(--fs-5xl);
  line-height: 1;
  color: var(--fg1);
  letter-spacing: 0;
}

.mcc-hero {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-5xl), 9vw, var(--fs-hero));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
}

.mcc-h1, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}
.mcc-h2, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}
.mcc-h3, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg1);
  margin: 0;
}
.mcc-h4, h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0;
}

.mcc-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
}

.mcc-lede, .mcc-p-lede {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: var(--lh-loose);
  color: var(--fg1);
  font-style: italic;
}

.mcc-p, p {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  color: var(--fg1);
  margin: 0 0 1em;
}

.mcc-small, small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.mcc-caption {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg3);
}

.mcc-quote {
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-style: italic;
  color: var(--fg1);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
a:hover { color: var(--link-hover); }

::selection { background: var(--mcc-gold-100); color: var(--mcc-espresso); }