src/styles.css

@import "tailwindcss";

/* Eldouma Graphics design tokens — DARK, matched to the marketing home page
   (near-black cool surfaces #06060c–#101016, orange primary #e7723b, purple/teal
   accent glows). Inter body + Space Grotesk display, JetBrains Mono for numerics. */
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --color-primary: #e7723b;       /* brand orange — actions / selection / accents */
  --color-primary-bright: #f4934f; /* lighter orange for hovers / gradients */
  --color-accent-violet: #7c5cff; /* secondary glow (matches home) */
  --color-accent-teal: #36c2b8;   /* tertiary glow (matches home) */

  --color-bg: #0a0a0f;            /* app base (cool near-black, == home hero) */
  --color-surface: #101016;       /* panels (== home card) */
  --color-surface-raised: #17171f;/* modals / dropdowns / popovers */
  --color-surface-sunken: #070709;/* timeline wells / input fields */
  --color-fg: #eeeef2;            /* near-white text */
  --color-fg-muted: #9d9caa;      /* secondary text (cool grey) */
  --color-fg-subtle: #6a6976;     /* tertiary / hints */
  --color-border: #24242f;        /* hairline (sits just above surface) */
  --color-border-strong: #353542; /* emphasised dividers / focus rings */
  --color-destructive: #f0584f;   /* brightened for dark legibility */
  --color-success: #46b46a;
  --color-warning: #eec152;

  /* timeline item colors by element type — tuned to read on the dark wells */
  --color-tl-video: #5c93c6;
  --color-tl-audio: #5fb079;
  --color-tl-image: oklch(0.66 0.12 130);
  --color-tl-gif: oklch(0.66 0.12 195);
  --color-tl-solid: oklch(0.64 0.14 305);
  --color-tl-motion: #c46a9b;
  --color-tl-text: #3bb0b0;
  --color-tl-caption: #9d9caa;

  --radius: 0.375rem;
}

:root {
  --tl-edge: #f4934f;      /* orange clip edge — pops on dark */
  --tl-playhead: #f4f4f6;  /* light playhead on the dark timeline */
}

/* fonts used by the motion-graphics templates — loaded globally so the gallery
   previews (which render outside the Remotion composition) look faithful */
@font-face { font-family: "Poppins"; font-weight: 600; src: url(/fonts/Poppins-SemiBold.ttf); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; src: url(/fonts/Poppins-Bold.ttf); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 800; src: url(/fonts/Poppins-ExtraBold.ttf); font-display: swap; }
@font-face { font-family: "Fraunces"; font-weight: 700; src: url(/fonts/Fraunces-Bold.ttf); font-display: swap; }
@font-face { font-family: "Fraunces"; font-weight: 900; src: url(/fonts/Fraunces-Black.ttf); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; src: url(/fonts/JetBrainsMono-Regular.ttf); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; src: url(/fonts/JetBrainsMono-Bold.ttf); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 500; src: url(/fonts/SpaceGrotesk-Medium.ttf); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 700; src: url(/fonts/SpaceGrotesk-Bold.ttf); font-display: swap; }
@font-face { font-family: "Newsreader"; font-weight: 400 500; src: url(/fonts/Newsreader-Medium.ttf); font-display: swap; }
/* no heavier Newsreader cut ships — map bold/display weights to the real Medium glyphs so magazine titles aren't faux-bolded */
@font-face { font-family: "Newsreader"; font-weight: 600 900; src: url(/fonts/Newsreader-Medium.ttf); font-display: swap; }
@font-face { font-family: "Newsreader"; font-weight: 500; font-style: italic; src: url(/fonts/Newsreader-Italic.ttf); font-display: swap; }
/* --- expanded free-font library (all SIL OFL 1.1) — variable fonts cover every weight from one file --- */
@font-face { font-family: "Inter"; font-weight: 100 900; src: url(/fonts/Inter-Variable.ttf); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 100 900; src: url(/fonts/Montserrat-Variable.ttf); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 400 900; src: url(/fonts/PlayfairDisplay-Variable.ttf); font-display: swap; }
@font-face { font-family: "Oswald"; font-weight: 200 700; src: url(/fonts/Oswald-Variable.ttf); font-display: swap; }
@font-face { font-family: "Lora"; font-weight: 400 700; src: url(/fonts/Lora-Variable.ttf); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 200 800; src: url(/fonts/Manrope-Variable.ttf); font-display: swap; }
@font-face { font-family: "Sora"; font-weight: 100 800; src: url(/fonts/Sora-Variable.ttf); font-display: swap; }
@font-face { font-family: "Anton"; font-weight: 400 900; src: url(/fonts/Anton-Regular.ttf); font-display: swap; }
@font-face { font-family: "Bebas Neue"; font-weight: 400 900; src: url(/fonts/BebasNeue-Regular.ttf); font-display: swap; }
@font-face { font-family: "Archivo Black"; font-weight: 400 900; src: url(/fonts/ArchivoBlack-Regular.ttf); font-display: swap; }
/* Arabic type library (also declared in the render composition; here for the editor UI / font picker) */
@font-face { font-family: "Cairo"; font-weight: 200 1000; src: url(/fonts/Cairo-Variable.ttf); font-display: swap; }
@font-face { font-family: "Amiri"; font-weight: 400 600; src: url(/fonts/Amiri-Regular.ttf); font-display: swap; }
@font-face { font-family: "Amiri"; font-weight: 700 900; src: url(/fonts/Amiri-Bold.ttf); font-display: swap; }
@font-face { font-family: "Tajawal"; font-weight: 400 600; src: url(/fonts/Tajawal-Regular.ttf); font-display: swap; }
@font-face { font-family: "Tajawal"; font-weight: 700 900; src: url(/fonts/Tajawal-Bold.ttf); font-display: swap; }
@font-face { font-family: "Almarai"; font-weight: 300 600; src: url(/fonts/Almarai-Regular.ttf); font-display: swap; }
@font-face { font-family: "Almarai"; font-weight: 700 900; src: url(/fonts/Almarai-ExtraBold.ttf); font-display: swap; }
@font-face { font-family: "El Messiri"; font-weight: 400 700; src: url(/fonts/ElMessiri-Variable.ttf); font-display: swap; }
@font-face { font-family: "Reem Kufi"; font-weight: 400 700; src: url(/fonts/ReemKufi-Variable.ttf); font-display: swap; }
@font-face { font-family: "Lalezar"; font-weight: 400 900; src: url(/fonts/Lalezar-Regular.ttf); font-display: swap; }
@font-face { font-family: "Changa"; font-weight: 200 800; src: url(/fonts/Changa-Variable.ttf); font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; font-weight: 400 600; src: url(/fonts/ArefRuqaa-Regular.ttf); font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; font-weight: 700 900; src: url(/fonts/ArefRuqaa-Bold.ttf); font-display: swap; }
@font-face { font-family: "Caveat"; font-weight: 400 700; src: url(/fonts/Caveat-Variable.ttf); font-display: swap; }
@font-face { font-family: "Bangers"; font-weight: 400 900; src: url(/fonts/Bangers-Regular.ttf); font-display: swap; }
/* --- added fonts (SIL OFL 1.1): English display + more Arabic faces --- */
@font-face { font-family: "DM Serif Display"; font-weight: 400 700; src: url(/fonts/DMSerifDisplay-Regular.ttf); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 100 900; src: url(/fonts/Outfit-Variable.ttf); font-display: swap; }
@font-face { font-family: "Syne"; font-weight: 400 800; src: url(/fonts/Syne-Variable.ttf); font-display: swap; }
@font-face { font-family: "Markazi Text"; font-weight: 400 700; src: url(/fonts/MarkaziText-Variable.ttf); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400 500; src: url(/fonts/IBMPlexSansArabic-Regular.ttf); font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600 800; src: url(/fonts/IBMPlexSansArabic-Bold.ttf); font-display: swap; }
@font-face { font-family: "Rakkas"; font-weight: 400 700; src: url(/fonts/Rakkas-Regular.ttf); font-display: swap; }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 300 800; src: url(/fonts/NotoKufiArabic-Variable.ttf); font-display: swap; }

* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}

/* dense pro-editor scrollbars (dark theme) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2c2c38; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a48; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: color-mix(in oklch, var(--color-primary) 38%, transparent); }

.eyebrow { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* imperative transcript playhead highlight (avoids re-rendering 502 words per frame) */
.tw-active { background: color-mix(in oklch, var(--color-primary) 28%, transparent); border-radius: 4px; }

/* toast enter (used by lib/toast.tsx; motion-safe so Reduce Motion users get no slide) */
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }