/* ============================================================
   Cardano Curia — Brand Tokens & Base Styles
   ============================================================ */

:root {
  /* Cardano blue family */
  --cc-blue:        #0033AD;  /* primary, the constellation */
  --cc-blue-bright: #1E5BFF;  /* CTAs / interactive accent */
  --cc-blue-deep:   #0A1A57;  /* hover, deep ink */
  --cc-blue-tint:   #E3EBFA;  /* surfaces, callouts */

  /* Gold leaf family */
  --cc-gold:        #C9892A;  /* mid gold — solid fill */
  --cc-gold-bright: #F5D27A;  /* highlight */
  --cc-gold-deep:   #7A5418;  /* shadow, hairline rules */
  --cc-gold-ink:    #5E3F08;  /* gold used as small body type */

  /* Neutrals — marble / parchment */
  --cc-parchment:   #FAF7EE;  /* page bg */
  --cc-marble:      #F4ECD8;  /* card bg */
  --cc-veined:      #ECE2C5;  /* divider tint */
  --cc-ivory:       #FFFCF4;  /* highest surface */

  /* Inks */
  --cc-ink:         #1A1E3A;  /* primary text */
  --cc-ink-soft:    #4A4F70;  /* body text */
  --cc-ink-mute:    #7A7F99;  /* meta */
  --cc-forum:       #0A0E27;  /* dark mode bg / footer */
  --cc-forum-veil:  #131A40;  /* dark mode card */

  /* Semantic */
  --cc-success:     #1F8A56;
  --cc-danger:      #B43A2F;
  --cc-warn:        #C58A1A;

  /* Geometry */
  --cc-radius-sm: 6px;
  --cc-radius-md: 10px;
  --cc-radius-lg: 18px;
  --cc-rule: 1px solid var(--cc-gold-deep);
  --cc-rule-soft: 1px solid var(--cc-veined);

  /* Shadows — soft, never harsh */
  --cc-shadow-1: 0 1px 2px rgba(26,30,58,0.06), 0 1px 1px rgba(26,30,58,0.04);
  --cc-shadow-2: 0 8px 24px rgba(26,30,58,0.08), 0 2px 6px rgba(26,30,58,0.05);
  --cc-shadow-gold: 0 10px 30px rgba(201,137,42,0.18);

  /* Type */
  --cc-font-display: 'Cinzel', 'Trajan Pro', 'Trajan Pro 3', 'Times New Roman', serif;
  --cc-font-body:    'EB Garamond', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --cc-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cc-font-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* Type scale */
  --cc-display-xl: clamp(3rem, 6vw + 1rem, 6rem);
  --cc-display-l:  clamp(2.25rem, 4vw + 1rem, 4rem);
  --cc-display-m:  clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --cc-tagline:    clamp(0.95rem, 0.4vw + 0.85rem, 1.15rem);
}

/* Page base */
html, body {
  margin: 0;
  padding: 0;
  background: var(--cc-parchment);
  color: var(--cc-ink);
  font-family: var(--cc-font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Display type — Cinzel reads thin even at 700; pinned to 900 for the
   inscription-on-stone weight. Headlines and the wordmark anchor here. */
.cc-display {
  font-family: var(--cc-font-display);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-transform: uppercase;
}
.cc-tagline {
  font-family: var(--cc-font-display);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-size: var(--cc-tagline);
  color: var(--cc-blue);
}

a { color: var(--cc-blue-bright); text-decoration: none; font-weight: 600; }
a:hover { color: var(--cc-blue-deep); text-decoration: underline; text-underline-offset: 3px; }

/* If a link sits inside body copy (EB Garamond), 600 reads about right;
   if it sits in display Cinzel context, explicit weight is set on the
   container so it doesn't drift back to 400 inherited from body defaults. */

/* Buttons */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-family: var(--cc-font-display);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.85rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.cc-btn-primary {
  background: linear-gradient(180deg, #1E5BFF 0%, #0033AD 100%);
  color: #FFFCF4;
  box-shadow: var(--cc-shadow-2);
}
.cc-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(30,91,255,0.32); color:#fff; text-decoration:none; }

.cc-btn-gold {
  background: linear-gradient(180deg, #F5D27A 0%, #C9892A 100%);
  color: var(--cc-ink);
  box-shadow: var(--cc-shadow-gold);
}
.cc-btn-gold:hover { transform: translateY(-1px); color: var(--cc-ink); text-decoration:none; }

.cc-btn-ghost {
  background: transparent;
  color: var(--cc-ink);
  border-color: var(--cc-gold-deep);
}
.cc-btn-ghost:hover { background: var(--cc-marble); color: var(--cc-ink); text-decoration:none; }

/* Gold rule with central ornament */
.cc-rule {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin: 2.5rem 0;
}
.cc-rule::before, .cc-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cc-gold-deep) 50%, transparent 100%);
}
.cc-rule-ornament {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  color: var(--cc-gold);
}

/* Card */
.cc-card {
  background: var(--cc-ivory);
  border: 1px solid var(--cc-veined);
  border-radius: var(--cc-radius-lg);
  padding: 1.75rem;
  box-shadow: var(--cc-shadow-1);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.cc-card:hover { box-shadow: var(--cc-shadow-2); border-color: var(--cc-gold); }

/* Container */
.cc-container { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.cc-container-narrow { max-width: 880px; margin: 0 auto; padding: 0 1.25rem; }

/* Section */
.cc-section { padding: clamp(3rem, 6vw, 6rem) 0; }
.cc-section-marble { background: var(--cc-marble); }
.cc-section-forum  { background: var(--cc-forum); color: #E5E8F2; }
.cc-section-forum .cc-tagline { color: var(--cc-gold-bright); }
.cc-section-forum .cc-card { background: var(--cc-forum-veil); border-color: #2A3270; color: #E5E8F2; }

/* Eyebrow — must be explicit weight; Cinzel at weight 400 reads as a hairline
   compared to the fallback serif, so without this the eyebrow gets noticeably
   thinner the moment Cinzel finishes loading. */
.cc-eyebrow {
  font-family: var(--cc-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cc-gold);
  margin: 0 0 0.6rem;
}

/* Headings — heavier than the body to read as carved capitals, not handwriting. */
h1, h2, h3 { font-family: var(--cc-font-display); font-weight: 900; letter-spacing: 0.04em; }
h4, h5, h6 { font-family: var(--cc-font-display); font-weight: 800; letter-spacing: 0.04em; }
h1 { font-size: var(--cc-display-xl); margin: 0 0 0.4em; }
h2 { font-size: var(--cc-display-l);  margin: 0 0 0.4em; }
h3 { font-size: var(--cc-display-m);  margin: 0 0 0.3em; }

/* Body lead */
.cc-lead {
  font-size: 1.2rem;
  color: var(--cc-ink-soft);
  max-width: 60ch;
  line-height: 1.6;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--cc-blue-bright);
  outline-offset: 3px;
  border-radius: 3px;
}