/* =====================================================================
   Ejen Studio — Design System Tokens
   Arabic-first AI marketing for GCC SMBs.

   The brand is chartreuse signal on near-black with high-contrast
   silver/optic neutrals. Used across both the marketing site (the
   loudest expression) and the app (more restrained, same hues).
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

/* ---------- Font families ---------- */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SFMono-Regular",
    Menlo, monospace;
  --font-heading: var(--font-sans);
}

/* RTL flip — used on any [dir="rtl"] block */
[dir="rtl"] {
  font-family: var(--font-arabic), var(--font-sans), system-ui, sans-serif;
}

/* =====================================================================
   COLOR — Dark theme (DEFAULT — the canonical Ejen surface)
   Chartreuse SIGNAL on void-black neutrals; silver/optic for type.
   ===================================================================== */
:root {
  /* Radius scale */
  --radius: 0.75rem;
  --radius-xs: calc(var(--radius) * 0.45);   /* ~5px  */
  --radius-sm: calc(var(--radius) * 0.6);    /* ~7px  */
  --radius-md: calc(var(--radius) * 0.8);    /* ~10px */
  --radius-lg: var(--radius);                /* 12px  */
  --radius-xl: calc(var(--radius) * 1.4);    /* ~17px */
  --radius-2xl: calc(var(--radius) * 1.8);   /* ~22px */
  --radius-3xl: calc(var(--radius) * 2.2);   /* ~26px */
  --radius-4xl: calc(var(--radius) * 2.6);   /* ~31px */
  --radius-full: 999px;

  /* Raw brand palette (literal hexes — keep stable across themes) */
  --void:           #070707;   /* page background */
  --panel:          #0b0d0f;   /* default panel  */
  --panel-elevated: #131517;   /* hovered / raised */
  --charcoal:       #111316;
  --ash:            #25282e;   /* divider / quiet surface */
  --silver:         #b6bbc2;   /* secondary type */
  --optic:          #f8f7f2;   /* primary type */
  --pristine:       #fffaf0;
  --signal:         #c4ff45;   /* chartreuse — THE wedge color */
  --signal-soft:    rgba(196, 255, 69, 0.14);
  --signal-strong:  #d6ff6b;
  --warm:           #f6c85f;
  --coral:          #ff8a65;
  --glass-border:   rgba(255, 255, 255, 0.13);

  /* Surfaces — semantic aliases over the raw palette */
  --background:        var(--void);
  --foreground:        var(--optic);
  --card:              var(--panel);
  --card-foreground:   var(--optic);
  --card-elevated:     var(--panel-elevated);
  --popover:           var(--panel-elevated);
  --popover-foreground: var(--optic);
  --sidebar:           #08090b;
  --sidebar-border:    rgba(255, 255, 255, 0.06);
  --sidebar-accent:    var(--ash);

  /* Type-on-surface */
  --primary:              var(--optic);   /* off-white CTA */
  --primary-foreground:   #0a0b0c;
  --secondary:            var(--ash);
  --secondary-foreground: var(--optic);
  --muted:                #1a1d20;
  --muted-foreground:     var(--silver);
  --accent:               var(--ash);
  --accent-foreground:    var(--optic);

  /* BRAND — chartreuse signal. Used sparingly: CTAs, key chips,
     focus rings, the "wedge" that says you're in Ejen.            */
  --brand:               var(--signal);
  --brand-foreground:    #0a0b0c;          /* black on signal */
  --brand-muted:         var(--signal-soft);
  --brand-strong:        var(--signal-strong);

  /* Semantic */
  --destructive:           #ff6b5e;
  --destructive-foreground: var(--optic);
  --success:               #5fdc8b;
  --warning:               var(--warm);
  --info:                  #7ec4ff;

  /* Borders + inputs + rings */
  --border: rgba(255, 255, 255, 0.08);
  --input:  rgba(255, 255, 255, 0.10);
  --ring:   rgba(196, 255, 69, 0.55);

  /* Chart palette (data-viz) */
  --chart-1: var(--signal);
  --chart-2: #7ec4ff;          /* info blue */
  --chart-3: #d59bff;          /* lavender */
  --chart-4: #5fdc8b;          /* mint */
  --chart-5: var(--coral);

  /* Channel brand colors (literal) */
  --channel-whatsapp: #25D366;
  --channel-instagram: #E1306C;
  --channel-tiktok: #000000;
  --channel-x: #000000;

  /* Shadow system — black-true, soft. The product almost never casts
     coloured glows; the signal hue is doing enough work on its own. */
  --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.45);
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.50), 0 1px 2px -1px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.55), 0 2px 4px -2px rgba(0,0,0,0.30);
  --shadow-lg: 0 10px 28px -6px rgba(0,0,0,0.65), 0 4px 8px -2px rgba(0,0,0,0.30);
  --shadow-xl: 0 24px 50px -12px rgba(0,0,0,0.75);
  /* The one coloured glow — used ONLY on the marketing hero / focus rings. */
  --shadow-signal: 0 0 0 1px rgba(196, 255, 69, 0.35), 0 0 60px -10px rgba(196, 255, 69, 0.40);

  /* Spacing scale (matches Tailwind, exposed as tokens) */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-quick: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* =====================================================================
   COLOR — Light theme (.light on root)
   Optic/pristine surfaces with charcoal type. Chartreuse is darkened
   only enough to keep AA contrast on near-white CTAs.
   ===================================================================== */
.light {
  --background:        var(--pristine);
  --foreground:        var(--charcoal);
  --card:              #ffffff;
  --card-foreground:   var(--charcoal);
  --card-elevated:     #fafaf6;
  --popover:           #ffffff;
  --popover-foreground: var(--charcoal);
  --sidebar:           #fafaf6;
  --sidebar-border:    rgba(17, 19, 22, 0.08);
  --sidebar-accent:    #f1efe8;

  --primary:              var(--charcoal);
  --primary-foreground:   var(--optic);
  --secondary:            #ece9e0;
  --secondary-foreground: var(--charcoal);
  --muted:                #ece9e0;
  --muted-foreground:     #5a5e66;
  --accent:               #ece9e0;
  --accent-foreground:    var(--charcoal);

  /* Brand stays the same chartreuse — pairs with black text. */
  --brand:               var(--signal);
  --brand-foreground:    #0a0b0c;
  --brand-muted:         rgba(196, 255, 69, 0.20);
  --brand-strong:        var(--signal-strong);

  --border: rgba(17, 19, 22, 0.10);
  --input:  rgba(17, 19, 22, 0.12);
  --ring:   rgba(196, 255, 69, 0.50);
}

/* =====================================================================
   TYPE — base + semantic styles
   Sizes follow shadcn/Tailwind defaults, anchored to a 14–16px base.
   ===================================================================== */

html {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11"; /* Inter alts that match the app */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — landing-page hero scale. Tight tracking, oversized leading
   pulled in to 0.95-1.02. This is where the brand SHOUTS. */
.display-1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.display-2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* HEADINGS — used inside the app */
.h1 {
  font-weight: 600;
  font-size: 1.875rem;       /* 30px */
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h2 {
  font-weight: 600;
  font-size: 1.5rem;         /* 24px */
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.h3 {
  font-weight: 600;
  font-size: 1.125rem;       /* 18px — common card header */
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.h4 {
  font-weight: 600;
  font-size: 0.9375rem;      /* 15px — topbar/page title */
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* BODY */
.body {
  font-weight: 400;
  font-size: 0.875rem;       /* 14px */
  line-height: 1.55;
  text-wrap: pretty;
}
.body-lg {
  font-weight: 400;
  font-size: 1rem;           /* 16px */
  line-height: 1.6;
  text-wrap: pretty;
}
.body-sm {
  font-weight: 400;
  font-size: 0.8125rem;      /* 13px — sidebar nav, inbox row */
  line-height: 1.5;
}

/* CAPTION — meta lines, timestamps, helpers */
.caption {
  font-weight: 400;
  font-size: 0.75rem;        /* 12px */
  line-height: 1.45;
  color: var(--muted-foreground);
}
.caption-xs {
  font-weight: 400;
  font-size: 0.6875rem;      /* 11px — chips, badges */
  line-height: 1.4;
  color: var(--muted-foreground);
}

/* EYEBROW / OVERLINE — sidebar section labels, section eyebrows */
.overline {
  font-weight: 500;
  font-size: 0.6875rem;      /* 11px */
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* CODE / KBD / MONO */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss02";
  font-size: 0.8125rem;
}
.kbd {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  padding: 0 0.25rem;
  border: 1px solid var(--border);
  background: var(--background);
  border-radius: var(--radius-xs);
}

/* ARABIC — heavier line-height; IBM Plex Sans Arabic balances Inter at the
   same physical size. Use on any [dir="rtl"] container. */
.arabic {
  font-family: var(--font-arabic);
  line-height: 1.7;
  font-feature-settings: normal;
}

/* =====================================================================
   UTILITIES
   ===================================================================== */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }

.glass {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--card) 92%, transparent) 0%,
    color-mix(in oklab, var(--background) 92%, transparent) 100%
  );
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border);
}

.grain {
  background-image: radial-gradient(
    circle at 1px 1px,
    rgba(255, 255, 255, 0.03) 1px,
    transparent 0
  );
  background-size: 4px 4px;
}

.ring-signal { box-shadow: var(--shadow-signal); }

::selection {
  background: var(--signal);
  color: #0a0b0c;
}

/* ============================================================
   Portfolio lifts — shared atmospheric utilities for landing /
   signup / onboarding / CRM. Tuned to chartreuse + warm amber.
   ============================================================ */
.noise-overlay {
  position: fixed; inset: -80px; z-index: 30;
  pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.72'/%3E%3C/svg%3E");
}
.cinema-image-mask {
  filter: grayscale(86%) contrast(1.08);
  transition:
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cinema-image-mask:hover,
.group:hover .cinema-image-mask { filter: grayscale(0%) contrast(1); }
.chromatic-text {
  color: var(--foreground);
  text-shadow: 0 0 28px rgba(196,255,69,0.14), 0 0 56px rgba(246,200,95,0.06);
}
.body-wash {
  background-image:
    linear-gradient(180deg, rgba(196,255,69,0.045), transparent 22rem),
    linear-gradient(115deg, rgba(246,200,95,0.022), transparent 28rem);
  background-attachment: fixed;
}