/* =========================================================================
   HICAZ AI — Colors & Type
   Ottoman-cinematic visual language for an AI-generated Turkish music brand.
   Always render on dark navy/black backgrounds. No neon. No EDM.
   ========================================================================= */

/* --- Web fonts (lokal gehostet, DSGVO-konform, kein externer Abruf) --- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/poppins-v24-latin_latin-ext-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/poppins-v24-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/poppins-v24-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/poppins-v24-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/poppins-v24-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-500italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/lora-v37-latin_latin-ext-700italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/amiri-v30-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/amiri-v30-latin_latin-ext-700.woff2') format('woff2');
}

:root {
  /* ===== Brand palette (raw) =========================================== */
  --hicaz-parchment:   #F1C964;  /* aged-paper inner disc */
  --hicaz-maroon:      #501008;  /* "Hicaz" wordmark */
  --hicaz-gold-text:   #CA953A;  /* "AI" wordmark */
  --hicaz-navy:        #021949;  /* outer ring + canvas */
  --hicaz-gold-ring:   #C58E3F;  /* metallic frame */
  --hicaz-red:         #870816;  /* ornament accents */
  --hicaz-teal:        #70894D;  /* olive-teal ornaments */
  --hicaz-white:       #FDFDFD;  /* crescent / wappen */
  --hicaz-bg:          #010000;  /* deep cinematic black */

  /* Tonal extensions — derived, do not invent new hues */
  --hicaz-navy-deep:   #010C2A;  /* pressed / shadow navy */
  --hicaz-navy-soft:   #0A2360;  /* hover navy */
  --hicaz-gold-soft:   #E6B96A;  /* highlight on gold */
  --hicaz-gold-deep:   #8E5F1F;  /* engraved gold shadow */
  --hicaz-parchment-deep: #C9A24A; /* aged parchment shadow */
  --hicaz-maroon-deep: #2E0904;  /* deep maroon for inks */

  /* Translucent veils — use over imagery, never as solid fills */
  --veil-navy-90: rgba(2, 25, 73, 0.92);
  --veil-navy-70: rgba(2, 25, 73, 0.70);
  --veil-navy-40: rgba(2, 25, 73, 0.40);
  --veil-black-80: rgba(1, 0, 0, 0.80);
  --veil-gold-15:  rgba(197, 142, 63, 0.15);

  /* ===== Semantic surfaces ============================================ */
  --bg:            var(--hicaz-bg);
  --bg-elevated:   var(--hicaz-navy-deep);
  --bg-card:       #08153A;          /* navy-tinted card */
  --bg-parchment:  var(--hicaz-parchment);
  --surface-line:  var(--hicaz-gold-ring);

  /* ===== Semantic foreground ========================================== */
  --fg1:        var(--hicaz-white);            /* primary text on dark */
  --fg2:        rgba(253, 253, 253, 0.78);     /* secondary text */
  --fg3:        rgba(253, 253, 253, 0.55);     /* tertiary, captions */
  --fg-muted:   rgba(253, 253, 253, 0.32);     /* dividers, hints */
  --fg-on-parchment:        var(--hicaz-maroon);
  --fg2-on-parchment:       var(--hicaz-maroon-deep);

  --accent-gold:    var(--hicaz-gold-text);
  --accent-maroon:  var(--hicaz-maroon);
  --accent-red:     var(--hicaz-red);
  --accent-teal:    var(--hicaz-teal);

  --border-gold:  var(--hicaz-gold-ring);
  --border-navy:  var(--hicaz-navy);
  --border-soft:  rgba(197, 142, 63, 0.35);

  /* ===== Type families ================================================ */
  --font-serif-display: "Lora", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:          "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --font-arabic:        "Amiri", "Noto Naskh Arabic", serif;
  --font-mono:          ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ===== Type scale (cinematic, generous) ============================= */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;
  --text-6xl:  120px;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;     /* used for ALL-CAPS Poppins labels */

  /* ===== Spacing (8px base) =========================================== */
  --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;

  /* ===== Radii (sparing — Ottoman geometry favors circles & arches) === */
  --radius-sm:    2px;   /* hairline chips */
  --radius-md:    6px;   /* buttons, inputs */
  --radius-lg:   12px;   /* cards */
  --radius-xl:   24px;   /* modals */
  --radius-pill: 9999px; /* tags, round avatars */
  --radius-circle: 50%;

  /* ===== Shadows (soft, candle-lit; never harsh) ====================== */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md:  0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg:  0 24px 60px rgba(0, 0, 0, 0.65);
  --shadow-glow-gold: 0 0 32px rgba(197, 142, 63, 0.35);
  --shadow-inner-deep: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                       inset 0 -1px 0 rgba(0, 0, 0, 0.5);

  /* Gold edge highlight — used on metallic frames */
  --edge-gold: inset 0 0 0 1px rgba(230, 185, 106, 0.5),
               inset 0 0 0 2px rgba(2, 25, 73, 0.4);

  /* ===== Motion ======================================================= */
  --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-velvet:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   620ms;
  --dur-cinema: 1200ms;
}

/* =========================================================================
   Base element styles — opt in by adding the class or using as a starting
   point inside `.hicaz-typography` scope.
   ========================================================================= */

.hicaz-typography,
.hicaz-typography * {
  font-family: var(--font-sans);
  color: var(--fg1);
}

.hicaz-typography h1,
.hicaz-h1 {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-wrap: balance;
}

.hicaz-typography h2,
.hicaz-h2 {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.hicaz-typography h3,
.hicaz-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}

.hicaz-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-gold);
}

.hicaz-typography p,
.hicaz-p {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
  text-wrap: pretty;
}

.hicaz-tagline {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-wide);
  color: var(--fg2);
  text-wrap: balance;
}

.hicaz-arabic {
  font-family: var(--font-arabic);
  font-weight: 400;
  direction: rtl;
  line-height: var(--leading-relaxed);
}

/* Wordmark recipe — exact construction of the "Hicaz AI" lockup */
.hicaz-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.18em;
  font-size: var(--text-3xl);
  line-height: 1;
}
.hicaz-wordmark .hicaz-wordmark__hicaz {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-weight: 600;
  color: var(--accent-maroon);
  letter-spacing: -0.01em;
}
.hicaz-wordmark .hicaz-wordmark__ai {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--accent-gold);
  letter-spacing: 0;
  font-size: 1em;
  line-height: 1;
}
/* Inverted lockup — for dark backgrounds when not using the round emblem */
.hicaz-wordmark--on-dark .hicaz-wordmark__hicaz {
  color: var(--hicaz-parchment);
}