/* ============================================================
   Ahmed Alshehhi — Design tokens
   Sourced from design/handoff/.../colors_and_type.css
   ============================================================ */

/* Editorial serif (display) + Geometric humanist sans (UI/body) + Arabic */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Manrope:wght@300;400;500;600;700;800&family=Cairo:wght@300;400;500;600;700&display=swap');

:root {
  /* === Color: Primary palette (official brand book) ============ */
  --color-ember:        #E89234;
  --color-ember-deep:   #CC7A1F;
  --color-ember-soft:   #F0AB60;

  --color-ink:          #2A323A;
  --color-ink-deeper:   #1A2026;
  --color-ink-soft:     #3D4751;

  --color-sand:         #DAD6B1;
  --color-sand-soft:    #EAE7CA;
  --color-sand-deep:    #C1BD96;

  --color-sage:         #869B59;
  --color-sage-soft:    #A6B97D;
  --color-sage-deep:    #677A41;

  /* Warm-grey neutral scale */
  --color-paper:        #F4F0E6;
  --color-mist:         #E4DFD0;
  --color-fog:          #B6B0A0;
  --color-stone:        #6C685A;
  --color-graphite:     #393833;
  --color-void:         #131820;

  /* === Type families =========================================== */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Manrope', 'Cairo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-arabic:  'Cairo', 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* === Type scale ============================================== */
  --fs-hero:    clamp(56px, 9vw, 128px);
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h1:      clamp(32px, 4vw, 48px);
  --fs-h2:      clamp(24px, 3vw, 34px);
  --fs-h3:      20px;
  --fs-h4:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  --lh-tight:   1.0;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.08em;
  --ls-eyebrow: 0.22em;

  /* === Spacing — 4pt rhythm ==================================== */
  --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 — minimal ========================================= */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* === Shadows — soft, low ===================================== */
  --shadow-sm:    0 1px 2px rgba(11, 18, 24, 0.06);
  --shadow-md:    0 4px 18px rgba(11, 18, 24, 0.08);
  --shadow-lg:    0 18px 48px rgba(11, 18, 24, 0.14);
  --shadow-xl:    0 30px 80px rgba(11, 18, 24, 0.22);
  --shadow-frame: 0 40px 100px -20px rgba(0, 0, 0, 0.55);

  /* === Motion ================================================== */
  --ease-cinematic: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-fade:      cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:       180ms;
  --dur-base:       320ms;
  --dur-slow:       620ms;
  --dur-cinematic:  1400ms;

  /* === Semantic tokens (default = light "paper" canvas) ======== */
  --canvas:        var(--color-paper);
  --surface-1:     var(--color-paper);
  --surface-2:     var(--color-sand-soft);
  --surface-3:     var(--color-mist);
  --surface-elev:  #FFFFFF;

  --fg-1:          var(--color-ink);
  --fg-2:          var(--color-stone);
  --fg-3:          var(--color-fog);
  --fg-accent:     var(--color-ember);
  --fg-accent-deep: var(--color-ember-deep);

  --border-1:      rgba(42, 50, 58, 0.10);
  --border-2:      rgba(42, 50, 58, 0.18);

  --bubble-user-bg:        var(--color-ink);
  --bubble-user-fg:        var(--color-paper);
  --bubble-assistant-bg:   var(--surface-elev);
  --bubble-assistant-bd:   var(--border-1);

  --ember-tint:    rgba(232, 146, 52, 0.10);
  --ember-tint-2:  rgba(232, 146, 52, 0.18);

  --canvas-overlay: rgba(244, 240, 230, 0.78);
  --scrim:          rgba(42, 50, 58, 0.55);
}

/* === Dark "ink cinematic" canvas =============================== */
[data-theme="dark"] {
  --canvas:        var(--color-ink);
  --surface-1:     var(--color-ink);
  --surface-2:     var(--color-ink-soft);
  --surface-3:     var(--color-ink-deeper);
  --surface-elev:  var(--color-ink-soft);

  --fg-1:          var(--color-sand-soft);
  --fg-2:          var(--color-sand-deep);
  --fg-3:          var(--color-fog);
  --fg-accent:     var(--color-ember);
  --fg-accent-deep: var(--color-ember-soft);

  --border-1:      rgba(218, 214, 177, 0.10);
  --border-2:      rgba(218, 214, 177, 0.20);

  --bubble-user-bg:        var(--color-ember);
  --bubble-user-fg:        var(--color-ink-deeper);
  --bubble-assistant-bg:   var(--color-ink-soft);
  --bubble-assistant-bd:   var(--border-1);

  --ember-tint:    rgba(232, 146, 52, 0.14);
  --ember-tint-2:  rgba(232, 146, 52, 0.22);

  --canvas-overlay: rgba(26, 32, 38, 0.78);
  --scrim:          rgba(0, 0, 0, 0.66);
}

/* ============================================================
   Brand utility classes
   ============================================================ */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

.lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--fg-1);
}

[lang="ar"], .arabic {
  font-family: var(--font-arabic);
  line-height: 1.7;
  letter-spacing: 0;
}

/* ============================================================
   Cinematic backdrop — static multi-layer gradient.
   Drop-in replacement for the earlier floating-paths SVG: the SVG and
   its animation are gone (kept in git history if ever needed). What
   remains is a quiet, layered gradient that reads as "light bleeding
   over a deep horizon", matching the brand's core motif of "light
   emerging from darkness". No animation, no GPU work, no flicker,
   identical on every viewport.
   ============================================================ */

/* Single-cell CSS Grid so the card centres against the gradient
   regardless of viewport. Compound selector beats .centered's flex. */
.fp-host,
.centered.fp-host {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  min-height: 100dvh;
  padding: 0;

  /* DARK CANVAS — three layered gradients painted bottom-up:
       1. Soft cool atmospheric glaze at top-left (subtle blue depth)
       2. Warm ember sunrise glow rising from the lower-centre
       3. Solid ink-deeper base                                     */
  background:
    radial-gradient(
      ellipse 60% 45% at 18% 12%,
      rgba(122, 168, 196, 0.10) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 110% 70% at 50% 105%,
      rgba(232, 146, 52, 0.26) 0%,
      rgba(232, 146, 52, 0.12) 25%,
      rgba(232, 146, 52, 0.04) 50%,
      transparent 75%
    ),
    linear-gradient(
      180deg,
      var(--color-void) 0%,
      var(--color-ink-deeper) 55%,
      var(--color-ink) 100%
    );
  color: var(--fg-1);
}
[data-theme="dark"] .fp-host,
[data-theme="dark"] .centered.fp-host {
  background:
    radial-gradient(
      ellipse 60% 45% at 18% 12%,
      rgba(122, 168, 196, 0.10) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 110% 70% at 50% 105%,
      rgba(232, 146, 52, 0.26) 0%,
      rgba(232, 146, 52, 0.12) 25%,
      rgba(232, 146, 52, 0.04) 50%,
      transparent 75%
    ),
    linear-gradient(
      180deg,
      var(--color-void) 0%,
      var(--color-ink-deeper) 55%,
      var(--color-ink) 100%
    );
  color: var(--fg-1);
}

/* LIGHT CANVAS — same horizon idea, but in warm cream tones so the
   feel is "morning paper" rather than "night sky". */
:root:not([data-theme="dark"]) .fp-host,
:root:not([data-theme="dark"]) .centered.fp-host {
  background:
    radial-gradient(
      ellipse 60% 45% at 18% 12%,
      rgba(218, 214, 177, 0.32) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 110% 70% at 50% 105%,
      rgba(232, 146, 52, 0.10) 0%,
      rgba(232, 146, 52, 0.04) 30%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      var(--color-mist) 0%,
      var(--color-paper) 50%,
      var(--color-sand-soft) 100%
    );
  color: var(--fg-1);
}

/* Every direct child shares the same grid cell — z-index then picks
   the layer:
       2  = static SVG path field (.fp-wrap)
      10  = foreground card                                              */
.fp-host > * {
  grid-area: stack;
}

/* Static SVG path field — fills the entire grid cell behind the card.
   Set its color to ember (currentColor on paths) so the lines paint
   in the brand accent atop the gradient. */
.fp-wrap {
  z-index: 2;
  pointer-events: none;
  align-self: stretch;
  justify-self: stretch;
  color: var(--color-ember);
}
:root:not([data-theme="dark"]) .fp-wrap {
  color: var(--color-ink);
}
.fp-layer {
  width: 100%;
  height: 100%;
  display: block;
}

/* Foreground (card / other non-wrap child) — centred in the grid cell
   with a comfy margin so it never touches the viewport edges. */
.fp-host > *:not(.fp-wrap) {
  z-index: 10;
  align-self: center;
  justify-self: center;
  margin: var(--space-5) var(--space-4);
}
.fp-host > .card,
.fp-host > form.card {
  box-shadow:
    var(--shadow-md),
    0 0 100px 30px rgba(11, 18, 24, 0.18);
}
:root:not([data-theme="dark"]) .fp-host > .card,
:root:not([data-theme="dark"]) .fp-host > form.card {
  box-shadow:
    var(--shadow-md),
    0 0 100px 30px rgba(244, 240, 230, 0.6);
}

/* Mobile: keep the card readable and inset from the viewport edges,
   and lift the ember horizon slightly so it shows above the home
   indicator / iOS safe area instead of being clipped. */
@media (max-width: 480px) {
  .fp-host,
  .centered.fp-host {
    background:
      radial-gradient(
        ellipse 70% 35% at 50% 8%,
        rgba(122, 168, 196, 0.08) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 150% 55% at 50% 100%,
        rgba(232, 146, 52, 0.28) 0%,
        rgba(232, 146, 52, 0.10) 30%,
        transparent 65%
      ),
      linear-gradient(
        180deg,
        var(--color-void) 0%,
        var(--color-ink-deeper) 60%,
        var(--color-ink) 100%
      );
  }
  :root:not([data-theme="dark"]) .fp-host,
  :root:not([data-theme="dark"]) .centered.fp-host {
    background:
      radial-gradient(
        ellipse 70% 35% at 50% 8%,
        rgba(218, 214, 177, 0.30) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 150% 55% at 50% 100%,
        rgba(232, 146, 52, 0.12) 0%,
        rgba(232, 146, 52, 0.04) 35%,
        transparent 70%
      ),
      linear-gradient(
        180deg,
        var(--color-mist) 0%,
        var(--color-paper) 50%,
        var(--color-sand-soft) 100%
      );
  }
  .fp-host > .card,
  .fp-host > form.card {
    width: 100%;
    max-width: calc(100vw - var(--space-4) * 2);
    padding: var(--space-6) var(--space-5);
  }
}