/* ============================================================================
   The House of Kijana — Heraldic Identity v2 — Design Tokens
   Operated by Abilities Finance, LLC
   Palette sampled from the existing crest (af_logo.webp on the live site).
   All tokens namespaced --af-* to avoid collision with existing CSS.
   Generated 2026-05-14
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Cormorant+SC:wght@400;500&family=Inter:wght@400;500&display=swap');

:root {
  /* ----- Color palette — extracted from the existing crest ---------------- */
  --af-color-ink:           #0E1E2E;
  --af-color-royal-gold:    #A08050;
  --af-color-burnished:     #B89868;
  --af-color-champagne:     #C9B383;
  --af-color-parchment:     #9F9A77;
  --af-color-page-cream:    #EFEAD5;
  --af-color-soot:          #1A1A1A;
  --af-color-honor-red:     #7A1F1F;
  --af-color-verified:      #1E5631;

  --af-color-gold-soft:     rgba(160, 128, 80, 0.12);
  --af-color-gold-rule:     rgba(201, 179, 131, 0.30);
  --af-color-ink-soft:      rgba(14, 30, 46, 0.92);

  --af-color-text-on-ink:    #EFEAD5;
  --af-color-text-on-paper:  #1A1A1A;
  --af-color-muted-on-ink:   rgba(239, 234, 213, 0.65);
  --af-color-muted-on-paper: rgba(26, 26, 26, 0.60);

  /* ----- Typography stacks ----------------------------------------------- */
  --af-font-display:        'Cinzel', 'Trajan Pro', 'Optima', 'Cormorant Garamond', serif;
  --af-font-editorial:      'Cormorant Garamond', Garamond, 'Big Caslon', 'Times New Roman', serif;
  --af-font-smallcaps:      'Cormorant SC', 'Cormorant Garamond', serif;
  --af-font-body:           'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* ----- Type scale ------------------------------------------------------- */
  --af-text-display-xl:  4.5rem;
  --af-text-display-lg:  3rem;
  --af-text-display-md:  2rem;
  --af-text-editorial-xl: 3.5rem;
  --af-text-editorial-lg: 2.25rem;
  --af-text-editorial-md: 1.5rem;
  --af-text-lede:        1.25rem;
  --af-text-body:        1rem;
  --af-text-small:       0.875rem;
  --af-text-fine:        0.75rem;
  --af-text-smcap-md:    0.95rem;
  --af-text-smcap-sm:    0.8rem;

  /* ----- Line height ------------------------------------------------------ */
  --af-leading-tight:    1.1;
  --af-leading-snug:     1.25;
  --af-leading-body:     1.65;
  --af-leading-loose:    1.85;

  /* ----- Letter spacing --------------------------------------------------- */
  --af-tracking-display:    0.06em;
  --af-tracking-wordmark:   0.10em;
  --af-tracking-editorial: -0.005em;
  --af-tracking-body:       0;
  --af-tracking-smcap:      0.18em;
  --af-tracking-uppercase:  0.18em;

  /* ----- Rules and dividers ---------------------------------------------- */
  --af-rule-thin:        0.5px solid var(--af-color-champagne);
  --af-rule-soft:        0.5px solid var(--af-color-gold-rule);
  --af-rule-display:     1.5px solid var(--af-color-royal-gold);
  --af-rule-strong:      2px solid var(--af-color-royal-gold);

  /* ----- Geometry --------------------------------------------------------- */
  --af-radius-sharp:     2px;
  --af-radius-soft:      4px;

  /* ----- Spacing scale (8px base) ---------------------------------------- */
  --af-space-1:  0.25rem;
  --af-space-2:  0.5rem;
  --af-space-3:  0.75rem;
  --af-space-4:  1rem;
  --af-space-5:  1.5rem;
  --af-space-6:  2rem;
  --af-space-7:  3rem;
  --af-space-8:  4.5rem;
  --af-space-9:  6rem;

  /* ----- Layout widths --------------------------------------------------- */
  --af-width-prose:      40rem;
  --af-width-content:    72rem;
  --af-width-narrow:     32rem;
}

/* ============================================================================
   Component primitives — minimal, namespaced.
   Apply by adding the class to elements that should opt into the new system.
   ============================================================================ */

.af-display {
  font-family: var(--af-font-display);
  font-weight: 500;
  letter-spacing: var(--af-tracking-display);
  line-height: var(--af-leading-tight);
  text-transform: uppercase;
}

.af-wordmark {
  font-family: var(--af-font-display);
  font-weight: 500;
  letter-spacing: var(--af-tracking-wordmark);
  line-height: 1.1;
  text-transform: uppercase;
}

.af-editorial {
  font-family: var(--af-font-editorial);
  font-weight: 500;
  letter-spacing: var(--af-tracking-editorial);
  line-height: var(--af-leading-snug);
}

.af-body {
  font-family: var(--af-font-body);
  font-weight: 400;
  font-size: var(--af-text-body);
  line-height: var(--af-leading-body);
}

.af-lede {
  font-family: var(--af-font-body);
  font-weight: 400;
  font-size: var(--af-text-lede);
  line-height: var(--af-leading-loose);
}

.af-smallcaps {
  font-family: var(--af-font-smallcaps);
  font-weight: 500;
  font-size: var(--af-text-smcap-md);
  letter-spacing: var(--af-tracking-smcap);
  text-transform: uppercase;
  color: var(--af-color-royal-gold);
}

.af-legal-attribution {
  font-family: var(--af-font-smallcaps);
  font-weight: 500;
  font-size: var(--af-text-smcap-sm);
  letter-spacing: var(--af-tracking-uppercase);
  text-transform: uppercase;
  color: var(--af-color-champagne);
}

.af-rule        { border: 0; border-top: var(--af-rule-display); margin: var(--af-space-6) 0; }
.af-rule-soft   { border: 0; border-top: var(--af-rule-soft); margin: var(--af-space-5) 0; }

.af-cta {
  display: inline-block;
  font-family: var(--af-font-display);
  font-weight: 500;
  letter-spacing: var(--af-tracking-display);
  text-transform: uppercase;
  font-size: var(--af-text-small);
  padding: 0.85rem 1.75rem;
  border-radius: var(--af-radius-sharp);
  background: var(--af-color-royal-gold);
  color: var(--af-color-ink);
  text-decoration: none;
  transition: background 0.15s ease;
}
.af-cta:hover { background: var(--af-color-burnished); }

.af-cta-ghost {
  display: inline-block;
  font-family: var(--af-font-display);
  font-weight: 500;
  letter-spacing: var(--af-tracking-display);
  text-transform: uppercase;
  font-size: var(--af-text-small);
  padding: 0.85rem 1.75rem;
  border-radius: var(--af-radius-sharp);
  background: transparent;
  color: var(--af-color-royal-gold);
  border: 1px solid var(--af-color-royal-gold);
  text-decoration: none;
  transition: background 0.15s ease;
}
.af-cta-ghost:hover { background: var(--af-color-gold-soft); }