/* Schreibly Brand Tokens
 * Source: logo gradient (cyan → blue), navy wordmark, soft wave bg
 */
:root {
  /* Brand colors */
  --sch-navy:        #0E1F5C;   /* wordmark / primary text */
  --sch-navy-2:      #1A2D7A;
  --sch-blue:        #1E6BFF;   /* primary action / link */
  --sch-blue-2:      #2A7BFF;
  --sch-blue-3:      #3F87FF;
  --sch-cyan:        #52D2FF;   /* light gradient end */
  --sch-cyan-2:      #7FE0FF;
  --sch-aqua:        #B6ECFF;
  --sch-mint:        #15B79E;   /* success / "correct" indicator */
  --sch-coral:       #E5484D;   /* error / "incorrect" indicator */

  /* Neutrals */
  --sch-white:       #FFFFFF;
  --sch-ink:         #0B1437;
  --sch-ink-2:       #44507A;
  --sch-ink-3:       #6E78A0;
  --sch-line:        #E2E8F4;
  --sch-line-2:      #EEF2FA;
  --sch-bg:          #F6F9FF;
  --sch-bg-2:        #EDF3FF;

  /* Gradients */
  --grad-logo:       linear-gradient(135deg, #7FE0FF 0%, #2A7BFF 55%, #0E1F5C 100%);
  --grad-soft:       linear-gradient(180deg, #F6F9FF 0%, #E8F1FF 50%, #D6E8FF 100%);
  --grad-wave:       linear-gradient(135deg, #EAF3FF 0%, #BFE0FF 100%);
  --grad-deep:       linear-gradient(135deg, #0E1F5C 0%, #1E6BFF 60%, #52D2FF 100%);

  /* Radius / shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-card: 0 1px 2px rgba(14,31,92,0.06), 0 12px 32px -8px rgba(14,31,92,0.12);
  --shadow-pop:  0 24px 60px -20px rgba(14,31,92,0.30);

  /* Type */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", sans-serif;
  --font-ar: "Cairo", "Noto Kufi Arabic", "Inter", sans-serif;
}

@font-face { font-family: __preload; src: local("Inter"); } /* hint */

/* Generic reset for artboard pages */
.sch-reset { box-sizing: border-box; margin: 0; padding: 0; }
.sch-reset *,
.sch-reset *::before,
.sch-reset *::after { box-sizing: inherit; }

/* Reusable wave background (matches the existing banners) */
.sch-wave-bg {
  background:
    radial-gradient(900px 600px at 95% 5%, rgba(127,224,255,0.20), transparent 60%),
    radial-gradient(700px 500px at 5% 95%, rgba(42,123,255,0.15), transparent 65%),
    linear-gradient(180deg, #FBFDFF 0%, #EEF5FF 100%);
  position: relative;
  overflow: hidden;
}
.sch-wave-bg::after {
  content: "";
  position: absolute; inset: auto 0 -2% 0; height: 36%;
  background:
    radial-gradient(ellipse 80% 60% at 30% 100%, rgba(42,123,255,0.45), transparent 60%),
    radial-gradient(ellipse 80% 60% at 80% 100%, rgba(82,210,255,0.55), transparent 60%);
  filter: blur(2px);
  pointer-events: none;
}

/* Sparkle SVG, inline */
.sch-sparkle { display: inline-block; fill: currentColor; }