/* ==========================================================================
   The Musery — Colors & Typography
   Anchor tokens for all Musery surfaces. Import this file once per page.
   ========================================================================== */

/* Cinzel Decorative still loaded from Google Fonts (not yet provided locally) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap');

/* Cinzel — local variable font provided by the brand */
@font-face {
  font-family: "Cinzel";
  src: url("fonts/Cinzel-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Montserrat — local variable fonts provided by the brand */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Core palette (the logo plate) --------------------------------- */
  --musery-ink:         #263440;  /* deep navy/slate — primary surface + body text on cream */
  --musery-ink-2:       #425666;  /* secondary slate (hover border, muted text) */
  --musery-ink-3:       #526575;  /* checkmark bg / tertiary slate */
  --musery-cream:       #FFFEFA;  /* hero cream — page background in light mode */
  --musery-cream-warm:  #FAFDFF;  /* slightly cooler paper used inside main content */
  --musery-cream-soft:  #F0F8FF;  /* form + inset panel cream */
  --musery-mist:        #DDE7F0;  /* hover wash / callout background */
  --musery-mist-2:      #9AB1C6;  /* hairline borders on inputs */
  --musery-mist-3:      #E6EEF5;  /* nav background */

  /* --- The Nine Muses — accent colors (from the palette dots) ------- */
  --musery-red:    #970042;  /* error, Muse of tragedy */
  --musery-orange: #CC4B14;  /* Muse of epic — CTA accent */
  --musery-yellow: #FFD282;  /* Muse of music — highlight */
  --musery-green:  #498E5A;  /* success, Muse of comedy */
  --musery-blue:   #334C80;  /* Muse of history — informative */
  --musery-purple: #453568;  /* Muse of sacred poetry */

  /* Softer shades for tints/backgrounds (10% opacity in use) */
  --musery-red-tint:    rgba(151, 0, 66, 0.10);
  --musery-orange-tint: rgba(204, 75, 20, 0.10);
  --musery-yellow-tint: rgba(255, 210, 130, 0.10);
  --musery-green-tint:  rgba(73, 142, 90, 0.10);
  --musery-blue-tint:   rgba(51, 76, 128, 0.10);
  --musery-purple-tint: rgba(69, 53, 104, 0.10);

  /* --- Semantic tokens --------------------------------------------- */
  --fg-1:           var(--musery-ink);       /* primary text */
  --fg-2:           var(--musery-ink-2);     /* secondary */
  --fg-3:           var(--musery-ink-3);     /* tertiary / meta */
  --fg-on-ink:      var(--musery-cream);     /* text on dark slate */
  --fg-link:        var(--musery-blue);
  --fg-error:       var(--musery-red);
  --fg-success:     var(--musery-green);

  --bg-page:        var(--musery-ink);       /* app frame is always deep navy */
  --bg-paper:       var(--musery-cream-warm); /* actual reading surface */
  --bg-paper-alt:   var(--musery-cream-soft);
  --bg-nav:         var(--musery-mist-3);
  --bg-callout:     var(--musery-mist);
  --bg-code:        #475866;

  --border-hairline: var(--musery-mist-2);
  --border-focus:    var(--musery-ink);

  /* --- Type families ------------------------------------------------ */
  --font-display: "Cinzel", Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
  --font-decor:   "Cinzel Decorative", "Cinzel", Constantia, "Lucida Bright", Georgia, serif;
  --font-body:    "Montserrat", "Open Sans", "Noto Sans", "Euphemia UCAS", "Trebuchet MS", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale (based on observed sizing in reference) --------- */
  --text-xs:   0.85rem;   /* 13.6px — captions, li-describe */
  --text-sm:   0.95rem;   /* 15.2px — checklist-note, small UI */
  --text-base: 1.05rem;   /* 16.8px — body */
  --text-lg:   1.15rem;   /* 18.4px — h4 */
  --text-xl:   1.35rem;   /* 21.6px — h3 (section) */
  --text-2xl:  1.7rem;    /* 27.2px — h2 */
  --text-3xl:  2.2rem;    /* 35.2px — h1 */
  --text-hero: 3rem;

  --leading-tight: 1.25;
  --leading-body:  1.5;
  --leading-roomy: 1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;   /* used on italic callouts */

  /* --- Spacing & radii --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 2px;    /* checkboxes */
  --radius-md: 4px;    /* buttons, inputs */
  --radius-lg: 8px;    /* focus skiplink */
  --radius-xl: 9px;    /* nav panel, logo image */
  --radius-pill: 999px;

  /* --- Elevation (subtle; Musery uses inset shadows on press) ----- */
  --shadow-card:    0 2px 4px rgba(38, 52, 64, 0.12);
  --shadow-card-lg: 0 4px 16px rgba(38, 52, 64, 0.18);
  --shadow-press:
    inset 4px 4px 6px rgba(15, 25, 40, 0.95),
    inset -3px -3px 5px rgba(51, 76, 128, 0.35);
  --shadow-hover-blue:
    inset 3px 3px 6px rgba(221, 231, 240, 0.9),
    inset -3px -3px 6px rgba(154, 177, 198, 0.55);
  --shadow-hover-amber:
    inset 4px 4px 8px rgba(255, 245, 220, 0.8),
    inset -4px -4px 8px rgba(80, 60, 20, 0.1);

  /* --- Motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
}

/* ==========================================================================
   Semantic element styles — low specificity; can be overridden per-surface
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
  background: var(--bg-page);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  color: var(--fg-1);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-4);
}

.display-serif { font-family: var(--font-display); font-weight: 400; }

h2, .h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-2xl);
  color: var(--fg-1);
  line-height: var(--leading-tight);
  margin: var(--space-8) 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--fg-1);
  margin: var(--space-6) 0 var(--space-2);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: var(--text-lg);
  color: var(--fg-1);
  margin: var(--space-5) 0 var(--space-1);
}

.display-serif { font-family: var(--font-display); font-weight: 700; }
.decor        { font-family: var(--font-decor); }

p {
  line-height: var(--leading-body);
  margin: 0 0 var(--space-4);
}

small, .meta {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--musery-ink); }

code {
  background: var(--bg-code);
  color: var(--musery-cream);
  padding: 4px 7px;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* Italic callout (documentation convention in Musery's own guide) */
.callout {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-roomy);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-callout);
  padding: 10px 14px;
}
.callout-lead {
  font-weight: 600;
  font-style: normal;
}