/* ==========================================================================
   IT Monster — Design Foundations
   Loaded globally via <link href="/index.css"> (served from public/).
   Tailwind (CDN) carries utility styling; this file carries the design-system
   primitives Tailwind utilities can't express cleanly: brand tokens, tinted
   elevation, focus rings, a semantic z-index scale, and motion safety.
   See DESIGN.md for the doctrine these encode.
   ========================================================================== */

:root {
  /* Brand identity — the one violet (see "The One Violet Rule") */
  --monster-accent: #17153B;
  --monster-dark: #2E236C;
  --monster-primary: #4C3B78;
  --monster-light: #C8ACD6;

  /* Ink + surface */
  --ink: #0F172A;
  --ink-muted: #475569;
  --canvas: #F3F4F6;
  --surface: #FFFFFF;

  /* Semantic */
  --success: #10B981;
  --rating: #FBBF24;

  /* Tinted elevation (see "The Tinted-Shadow Rule") — never pure black */
  --shadow-resting: 0 10px 30px -12px rgba(46, 35, 108, 0.18);
  --shadow-hover: 0 24px 50px -16px rgba(46, 35, 108, 0.28);
  --shadow-cta: 0 12px 28px -6px rgba(76, 59, 120, 0.45);

  /* Motion — exponential ease-out, no bounce */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-ui: 200ms;
  --duration-reveal: 600ms;

  /* Semantic z-index scale — never arbitrary 999/9999 */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal-backdrop: 1200;
  --z-modal: 1300;
  --z-toast: 1400;
  --z-tooltip: 1500;
}

:root.dark {
  --ink: #F1F5F9;
  --ink-muted: #94A3B8;
  --canvas: #0F172A;
  --surface: #1E293B;
  /* In dark mode, depth is a hairline border, not a shadow on near-black */
  --shadow-resting: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-hover: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* --- Global focus visibility -------------------------------------------- */
/* Every interactive element gets a visible, on-brand focus ring.
   :focus-visible only shows it for keyboard users, not mouse clicks. */
:where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline: 2px solid var(--monster-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.dark :where(a, button, input, select, textarea, [tabindex], [role="button"]):focus-visible {
  outline-color: var(--monster-light);
}

/* --- Text selection ----------------------------------------------------- */
::selection {
  background: rgba(76, 59, 120, 0.22);
  color: inherit;
}

/* --- Arabic / RTL rendering --------------------------------------------- */
html[dir="rtl"] body {
  /* Slightly better Arabic letterform rendering */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Even line lengths on headings; reduce orphans in prose */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* --- Brand shadow utilities (opt-in) ------------------------------------ */
.shadow-resting { box-shadow: var(--shadow-resting); }
.shadow-hover { box-shadow: var(--shadow-hover); }
.shadow-cta { box-shadow: var(--shadow-cta); }

/* --- Brand marquee (scroller) ------------------------------------------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 28s linear infinite;
  will-change: transform;
}
/* Outlined (stroked) marquee text, alternated with solid for rhythm */
.marquee-outline {
  color: transparent;
  -webkit-text-stroke: 1.2px var(--monster-primary);
}
.dark .marquee-outline {
  -webkit-text-stroke: 1.2px var(--monster-light);
}

/* --- Hand-drawn underline (draws itself in; visible by default) ---------- */
@keyframes draw-underline {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
.path-vert {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: draw-underline 1s var(--ease-out-quint);
}

/* ==========================================================================
   The Monster's Workshop — dark-section motif
   The signature surface: a deep-violet workshop at 1am where code rains.
   Used by the Hero, the closing CTA, and (as video) the auth pages.
   One committed violet; the glow is lilac, never a second hue.
   ========================================================================== */

:root {
  --monster-void: #0B0A1F;
}

/* Deep workshop backdrop: layered violet radials over near-black indigo. */
.workshop-bg {
  background-color: var(--monster-void);
  background-image:
    radial-gradient(120% 80% at 78% -10%, rgba(76, 59, 120, 0.55) 0%, transparent 55%),
    radial-gradient(90% 70% at 8% 110%, rgba(46, 35, 108, 0.60) 0%, transparent 55%),
    radial-gradient(60% 50% at 50% 50%, rgba(200, 172, 214, 0.06) 0%, transparent 70%);
}

/* Faint engineering grid — texture, not decoration. Fades toward the edges. */
.workshop-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(200, 172, 214, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 172, 214, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 80%);
  mask-image: radial-gradient(80% 70% at 50% 40%, #000 0%, transparent 80%);
}

/* Lilac text glow for headline accents on the dark workshop. */
.text-glow {
  text-shadow: 0 0 22px rgba(200, 172, 214, 0.45), 0 0 4px rgba(200, 172, 214, 0.30);
}

/* --- Terminal window chrome ---------------------------------------------- */
.terminal {
  background: linear-gradient(180deg, rgba(23, 21, 59, 0.92) 0%, rgba(11, 10, 31, 0.94) 100%);
  border: 1px solid rgba(200, 172, 214, 0.16);
  border-radius: 16px;
  box-shadow: 0 30px 80px -28px rgba(11, 10, 31, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.terminal-dot { width: 11px; height: 11px; border-radius: 9999px; }

/* Blinking block caret for typed text (pairs with .animate-caret). */
.caret-block {
  display: inline-block;
  width: 0.6ch;
  height: 1.05em;
  margin-inline-start: 0.12em;
  background: var(--monster-light);
  vertical-align: -0.12em;
  box-shadow: 0 0 14px rgba(200, 172, 214, 0.7);
}

/* Code-rain canvas sits behind hero/CTA content. */
.code-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.7;
}

/* --- Reduced motion: a real safety net, not just per-component opt-in ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   shadcn/ui — semantic theme tokens
   Added additively for shadcn components (Button, Card, …). These power the
   bg-background / text-foreground / bg-primary utilities the components use.
   Values are HSL triples (no hsl() wrapper); the Tailwind config wraps them
   as hsl(var(--token)). The existing --monster-* design system is untouched.
   `primary`/`ring` are mapped to the brand violet so shadcn matches the site.
   ========================================================================== */
:root {
  --background: 220 14% 96%;         /* canvas #F3F4F6 — cards/sidebar lift off it */
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;                 /* surface white */
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 257 34% 35%;            /* brand --monster-primary #4C3B78 */
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 268 34% 90%;             /* light lilac tint */
  --accent-foreground: 257 34% 25%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 257 34% 35%;               /* brand */
  --radius: 0.5rem;
}

.dark,
:root.dark {
  --background: 222 47% 11%;         /* canvas-dark #0F172A (slate-950) */
  --foreground: 210 40% 98%;
  --card: 217 33% 17%;               /* surface-dark #1E293B (slate-800) — lifts off canvas */
  --card-foreground: 210 40% 98%;
  --popover: 217 33% 17%;
  --popover-foreground: 210 40% 98%;
  --primary: 281 34% 76%;            /* brand --monster-light #C8ACD6 */
  --primary-foreground: 257 40% 12%;
  --secondary: 215 25% 27%;          /* slate-700 — distinct from card */
  --secondary-foreground: 210 40% 98%;
  --muted: 215 25% 27%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 257 34% 30%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 40.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 215 25% 27%;             /* visible dividers on slate-800 cards */
  --input: 215 25% 27%;
  --ring: 281 34% 76%;
}