/* Vono AI — design tokens. Derived from the reference design-system sheets.
   Bright white premium theme; gradients used selectively. */
:root {
  /* Core palette (exact reference values) */
  --violet:  #7B5CFF;
  --purple:  #A259FF;
  --fuchsia: #F34DB8;
  --magenta: #FF3B9D;
  --coral:   #FF6B57;
  --peach:   #FFB7A7;
  --orange:  #FF8A4C;
  --lilac:   #E7D6FF;
  --mist:    #F6F3FB;
  --surface: #FFFFFF;
  --ink:     #0F1230;
  --muted:   #667085;
  --border:  rgba(90, 74, 130, 0.12);
  --border-strong: rgba(90, 74, 130, 0.20);

  /* Derived surfaces */
  --ink-soft: #2A2D52;
  --bg:       #FFFFFF;
  --bg-tint:  #FBF9FE;        /* barely-there lilac page wash */
  --glass:    rgba(255, 255, 255, 0.72);
  --glass-2:  rgba(255, 255, 255, 0.55);
  --chip-bg:  rgba(231, 214, 255, 0.45);
  --chip-ink: #5B3FB0;

  /* Gradients */
  --grad-primary: linear-gradient(100deg, #7B5CFF 0%, #A259FF 22%, #F34DB8 50%, #FF6B57 78%, #FFB7A7 100%);
  --grad-violet:  linear-gradient(135deg, #7B5CFF 0%, #A259FF 100%);
  --grad-fuchsia: linear-gradient(135deg, #A259FF 0%, #F34DB8 60%, #FF6B57 100%);
  --grad-warm:    linear-gradient(135deg, #FF3B9D 0%, #FF6B57 55%, #FFB7A7 100%);
  --grad-text:    linear-gradient(100deg, #7B5CFF 0%, #F34DB8 55%, #FF6B57 100%);
  --orb-core: radial-gradient(circle at 32% 28%,
                #FFE9DD 0%, #FFB7A7 14%, #FF6B57 32%,
                #F34DB8 56%, #A259FF 78%, #7B5CFF 100%);

  /* Per-subject accents */
  --subj-arabic:  linear-gradient(135deg, #7B5CFF, #A259FF);
  --subj-islamic: linear-gradient(135deg, #A259FF, #F34DB8);
  --subj-biology: linear-gradient(135deg, #FF3B9D, #FF6B57);
  --subj-physics: linear-gradient(135deg, #7B5CFF, #F34DB8);
  --subj-chem:    linear-gradient(135deg, #FF8A4C, #FF6B57);
  --subj-math:    linear-gradient(135deg, #A259FF, #FF6B57);

  /* Radius */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --r-pill: 999px;

  /* Shadows (soft, violet-tinted, layered) */
  --sh-sm:  0 1px 2px rgba(15,18,48,.04), 0 2px 8px rgba(90,74,130,.06);
  --sh-md:  0 2px 6px rgba(15,18,48,.05), 0 12px 28px rgba(90,74,130,.10);
  --sh-lg:  0 8px 20px rgba(15,18,48,.06), 0 28px 60px rgba(90,74,130,.14);
  --sh-glow: 0 18px 50px rgba(123,92,255,.22), 0 8px 24px rgba(243,77,184,.16);
  --sh-focus: 0 0 0 3px rgba(123,92,255,.35);

  /* Typography — lead with Dubai (modern geometric Arabic+Latin, installed locally; no remote fetch) */
  --font: "Dubai","Tajawal","Cairo","Noto Sans Arabic","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-hero:  clamp(2.2rem, 6vw, 4.4rem);
  --fs-h1:    clamp(1.8rem, 4.2vw, 3rem);
  --fs-h2:    clamp(1.4rem, 3vw, 2.1rem);
  --fs-h3:    clamp(1.15rem, 2vw, 1.5rem);
  --fs-lead:  clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;
  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  /* Spacing (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;
  --section-y: clamp(56px, 9vw, 128px);
  --container: min(1280px, 92vw);
  --container-narrow: min(1120px, 92vw);

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: 140ms; --t-base: 240ms; --t-slow: 420ms; --t-page: 360ms;

  /* Layout constants */
  --nav-h: 68px;
  --bottomnav-h: 64px;
  --sidebar-w: 248px;
  --z-nav: 40; --z-overlay: 60; --z-toast: 80;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --t-page: 0ms; }
}

/* Mobile: smaller, denser type scale + spacing (tap targets kept >=44px via component min-heights). */
@media (max-width: 768px) {
  :root {
    --fs-hero: clamp(1.8rem, 7.4vw, 2.6rem);
    --fs-h1:   clamp(1.5rem, 5.6vw, 2rem);
    --fs-h2:   clamp(1.18rem, 4.6vw, 1.55rem);
    --fs-h3:   1.06rem;
    --fs-lead: 1rem;
    --fs-body: 0.95rem;
    --fs-sm:   0.85rem;
    --fs-xs:   0.75rem;
    --lh-body: 1.62;
    --section-y: clamp(36px, 7vw, 64px);
    --r-lg: 22px; --r-xl: 28px;
  }
}
@media (max-width: 430px) {
  :root { --fs-body: 0.9rem; --fs-sm: 0.82rem; --fs-lead: 0.95rem; }
}