/* ============================================================
   JUMA Leuchten — Design System Tokens
   colors_and_type.css
   ============================================================ */

/* ── BRAND FONTS (local) ──────────────────────────── */

/* Antonio — condensed display / headings */
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-VariableFont_wght.ttf') format('truetype'); font-weight:100 700; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-Thin.ttf')       format('truetype'); font-weight:100; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-Light.ttf')      format('truetype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-Regular.ttf')    format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-Medium.ttf')     format('truetype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-SemiBold.ttf')   format('truetype'); font-weight:600; font-style:normal; }
@font-face { font-family:'Antonio'; src:url('fonts/Antonio-Bold.ttf')       format('truetype'); font-weight:700; font-style:normal; }

/* Manrope — body, UI, navigation */
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-VariableFont_wght.ttf') format('truetype'); font-weight:200 800; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-Light.ttf')      format('truetype'); font-weight:300; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-Regular.ttf')    format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-Medium.ttf')     format('truetype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-SemiBold.ttf')   format('truetype'); font-weight:600; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-Bold.ttf')       format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Manrope'; src:url('fonts/Manrope-ExtraBold.ttf')  format('truetype'); font-weight:800; font-style:normal; }

/* Poiret One — decorative display / accent */
@font-face { font-family:'Poiret One'; src:url('fonts/PoiretOne-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }

:root {

  /* ── COLORS ───────────────────────────────────────────── */

  /* Base surfaces */
  --ink:          #0d0b08;   /* page background — near-black warm */
  --surface-1:    #161310;   /* card / panel background */
  --surface-2:    #1e1a14;   /* raised surfaces */
  --surface-3:    #272118;   /* hover / active state surfaces */

  /* Gold accent */
  --gold:         #c8a96e;   /* primary brand accent */
  --gold-bright:  #e2cc99;   /* hover, highlighted */
  --gold-dim:     #8c6c3a;   /* borders, subdued */
  --gold-subtle:  rgba(200, 169, 110, 0.15); /* hairline borders */

  /* Text */
  --cream:        #f0ebe0;   /* primary text */
  --cream-2:      #9e9080;   /* secondary / muted text */
  --cream-3:      #5c5148;   /* disabled / placeholder */

  /* On-light surfaces */
  --black:        #0d0b08;
  --white:        #ffffff;

  /* Feedback */
  --success:      #6b9e6e;
  --error:        #c0604a;

  /* ── TYPOGRAPHY ───────────────────────────────────────── */

  /* Font families */
  --font-brand:   'Antonio', sans-serif;           /* condensed display / headings */
  --font-display: 'Poiret One', sans-serif;        /* decorative accent / elegant display */
  --font-sans:    'Manrope', system-ui, sans-serif; /* body, UI, navigation */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type scale */
  --text-xs:      0.625rem;   /* 10px — fine print */
  --text-sm:      0.75rem;    /* 12px — labels, captions */
  --text-base:    0.875rem;   /* 14px — body */
  --text-md:      1rem;       /* 16px — body large */
  --text-lg:      1.25rem;    /* 20px — subheadings */
  --text-xl:      1.5rem;     /* 24px — section headings */
  --text-2xl:     2rem;       /* 32px — page headings */
  --text-3xl:     2.75rem;    /* 44px — hero subheadings */
  --text-4xl:     4rem;       /* 64px — hero display */
  --text-5xl:     6rem;       /* 96px — editorial display */

  /* Font weights */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.1em;
  --tracking-wider:    0.18em;
  --tracking-widest:   0.25em;

  /* Line heights */
  --leading-none:   1;
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* ── SPACING ──────────────────────────────────────────── */

  --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;
  --space-10:  128px;
  --space-11:  192px;

  /* ── RADII ────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-pill:  999px;

  /* ── SHADOWS ──────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.65);
  --shadow-gold: 0 0 32px rgba(200, 169, 110, 0.18);

  /* ── TRANSITIONS ──────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;

  /* ── BORDERS ──────────────────────────────────────────── */
  --border-subtle:  1px solid var(--gold-subtle);
  --border-gold:    1px solid var(--gold-dim);
}

/* ── SEMANTIC ELEMENT STYLES ──────────────────────────── */

.juma-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--cream);
  background-color: var(--ink);
}

/* Display headings — Antonio condensed */
.juma-h1, h1.juma {
  font-family: var(--font-brand);
  font-size: var(--text-4xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
  color: var(--cream);
  text-transform: uppercase;
}

.juma-h2, h2.juma {
  font-family: var(--font-brand);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  color: var(--cream);
  text-transform: uppercase;
}

.juma-h3, h3.juma {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
  text-transform: uppercase;
}

.juma-h4, h4.juma {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
  text-transform: uppercase;
}

/* Decorative heading — Poiret One */
.juma-h-decorative {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-regular);
  letter-spacing: 0.04em;
  color: var(--cream);
  line-height: var(--leading-snug);
}

/* Body text — Manrope */
.juma-p, p.juma {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--cream-2);
}

/* Navigation label */
.juma-nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cream);
}

/* Section label / eyebrow */
.juma-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
}

/* Quote — Poiret One */
.juma-quote {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--cream);
  letter-spacing: 0.03em;
}

/* Caption */
.juma-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--cream-3);
}

/* Button */
.juma-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--cream);
  color: var(--cream);
  padding: 14px 36px;
  cursor: pointer;
  transition: var(--transition-base);
}

.juma-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.juma-btn--gold {
  border-color: var(--gold);
  color: var(--gold);
}

.juma-btn--filled {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.juma-btn--filled:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink);
}

.juma-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--cream);
  background-color: var(--ink);
}

/* Display headings */
.juma-h1, h1.juma {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
  text-transform: uppercase;
}

.juma-h2, h2.juma {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--cream);
  text-transform: uppercase;
}

.juma-h3, h3.juma {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
  text-transform: uppercase;
}

.juma-h4, h4.juma {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--cream);
  text-transform: uppercase;
}

/* Body text */
.juma-p, p.juma {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--cream-2);
}

/* Navigation label */
.juma-nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--cream);
}

/* Section label / eyebrow */
.juma-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
}

/* Quote / pull quote */
.juma-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  color: var(--cream);
}

/* Caption */
.juma-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--cream-3);
}

/* Button */
.juma-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--cream);
  color: var(--cream);
  padding: 14px 36px;
  cursor: pointer;
  transition: var(--transition-base);
}

.juma-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.juma-btn--gold {
  border-color: var(--gold);
  color: var(--gold);
}

.juma-btn--filled {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.juma-btn--filled:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink);
}