/**
 * Qahera UI Kit — Sovereign Landing & Marketing Stylesheet (Modular Master Manifest)
 * 100% Token-Driven · Zero Slop · Strict Cairo Design Language
 * Imports specialized, lightweight modules and maps canonical --qhr-* tokens
 */

/* ──────────────────────────────────────────────────────────────────────────
   1. Imports MUST be at the very top (CSS Spec Requirement)
   ────────────────────────────────────────────────────────────────────────── */
@import url('./modules/nav.css');
@import url('./modules/hero.css');
@import url('./modules/showcase-preview.css');
@import url('./modules/frameworks.css');
@import url('./modules/marketing-sections.css');
@import url('./modules/narrative.css');


/* ──────────────────────────────────────────────────────────────────────────
   2. Token Bridges: Exact Palette from Reference Model (ui-hero.png)
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Warm Alabaster Canvas & Card Surfaces (Directly from ui-hero.png) */
  --q-bg: #F9F6F0;
  --q-bg-hero: #F7F3EB;
  --q-surface: #FFFFFF;
  --q-surface-subtle: #F2ECE1;
  --q-surface-card: #FFFFFF;
  --q-surface-elevated: #FFFFFF;
  --q-border: #E8E1D5;
  --q-border-strong: #D5CBB9;

  /* Typography Colors */
  --q-text-primary: #17212D;
  --q-text-secondary: #5A6672;
  --q-text-muted: #87929D;

  /* Iconic Terracotta Accent (from Logo, Taglines & Wave Chart) */
  --q-terracotta: #D45B34;
  --q-terracotta-hover: #BF4C26;
  --q-terracotta-subtle: rgba(212, 91, 52, 0.1);

  /* Deep Slate Charcoal Accent (from "Get Started" Pill Button) */
  --q-slate-dark: #172635;
  --q-slate-dark-hover: #0E1A26;

  /* Secondary Accents */
  --q-gold: #D9822B;
  --q-teal: #1F6B75;

  /* Dark Terminal & Footer Background (from ui-hero.png Dark Terminal) */
  --q-dark-terminal: #1B2430;
  --q-dark-terminal-head: #141C26;
  --q-dark-terminal-border: rgba(255, 255, 255, 0.1);

  /* Canonical Typography */
  --q-font-heading: var(--qhr-font-family-primary, var(--qhr-font-heading, 'Alexandria', 'Cairo', system-ui, sans-serif));
  --q-font-body: var(--qhr-font-body, 'Cairo', 'Alexandria', system-ui, sans-serif);
  --q-font-mono: var(--qhr-font-mono, 'JetBrains Mono', monospace);

  /* Canonical Radii & Shadows */
  --q-radius-pill: 9999px;
  --q-radius-card: 16px;
  --q-radius-input: 10px;

  --q-shadow-sm: 0 1px 3px rgba(23, 38, 53, 0.05);
  --q-shadow-md: 0 6px 20px -2px rgba(23, 38, 53, 0.07);
  --q-shadow-lg: 0 16px 36px -4px rgba(23, 38, 53, 0.1);
}

[data-mode="dark"] {
  --q-bg: #0C1219;
  --q-bg-hero: #0F1720;
  --q-surface: #141E28;
  --q-surface-subtle: #192533;
  --q-surface-card: #141E28;
  --q-surface-elevated: #1C2A3A;
  --q-border: rgba(255, 255, 255, 0.08);
  --q-border-strong: rgba(255, 255, 255, 0.16);

  --q-text-primary: #F4F6F8;
  --q-text-secondary: #9BA5B1;
  --q-text-muted: #6B7785;

  --q-terracotta: #DF6943;
  --q-terracotta-hover: #EB7954;
  --q-terracotta-subtle: rgba(223, 105, 67, 0.15);
  --q-slate-dark: #F4F6F8;
  --q-slate-dark-hover: #E2E8F0;
  --q-gold: #E59A3D;
  --q-teal: #3AB0BE;

  --q-dark-terminal: #0A0F14;
  --q-dark-terminal-head: #070B0F;
  --q-dark-terminal-border: rgba(255, 255, 255, 0.08);

  --q-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --q-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --q-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* ──────────────────────────────────────────────────────────────────────────
   3. Base & Reset
   ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--q-bg);
  color: var(--q-text-primary);
  font-family: var(--q-font-body);
  line-height: 1.6;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--q-font-heading);
  letter-spacing: -0.025em;
  color: var(--q-text-primary);
  margin: 0;
}

p {
  color: var(--q-text-secondary);
  margin: 0;
}

code, pre {
  font-family: var(--q-font-mono);
}

a {
  text-decoration: none;
  color: inherit;
}

.site-container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ──────────────────────────────────────────────────────────────────────────
   4. Spotlight Micro-Physics Layer
   ────────────────────────────────────────────────────────────────────────── */
.spotlight-surface {
  position: relative;
  overflow: hidden;
}

.spotlight-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(217, 83, 56, 0.12), transparent 80%);
  opacity: var(--spotlight-opacity, 0);
  transition: opacity 0.2s ease;
  border-radius: inherit;
  z-index: 1;
}

[data-mode="dark"] .spotlight-surface::after {
  background: radial-gradient(420px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%), rgba(224, 93, 68, 0.16), transparent 80%);
}

/* ──────────────────────────────────────────────────────────────────────────
   5. Canonical Button Shortcuts (Pill Variants)
   ────────────────────────────────────────────────────────────────────────── */
.qhr-btn-pill-dark {
  background-color: var(--q-slate-dark);
  color: #FFFFFF !important;
  font-family: var(--q-font-body);
  font-weight: 700;
  font-size: 0.9rem;
  padding-block: 10px;
  padding-inline: 20px;
  border-radius: var(--q-radius-pill);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--q-shadow-sm);
}

[data-mode="dark"] .qhr-btn-pill-dark {
  background-color: var(--q-slate-dark);
  color: #090D16 !important;
}

.qhr-btn-pill-dark:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.qhr-btn-pill-outline {
  background-color: rgba(255, 255, 255, 0.75);
  color: var(--q-text-primary) !important;
  font-family: var(--q-font-body);
  font-weight: 600;
  font-size: 0.9rem;
  padding-block: 10px;
  padding-inline: 20px;
  border-radius: var(--q-radius-pill);
  border: 1px solid rgba(30, 41, 59, 0.16);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

[data-mode="dark"] .qhr-btn-pill-outline {
  background-color: rgba(14, 20, 34, 0.7);
  border-color: rgba(255, 255, 255, 0.16);
}

.qhr-btn-pill-outline:hover {
  background-color: var(--q-surface);
  border-color: var(--q-text-secondary);
}

.qhr-btn-pill-terracotta {
  background-color: var(--q-terracotta);
  color: #FFFFFF !important;
  font-family: var(--q-font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding-block: 12px;
  padding-inline: 24px;
  border-radius: var(--q-radius-pill);
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(217, 83, 56, 0.3);
}

.qhr-btn-pill-terracotta:hover {
  background-color: var(--q-terracotta-hover);
  transform: translateY(-1px);
}