/* ════════════════════════════════════════════════════════════════════════
   ZNK / Amirnet — Design Tokens (framework-agnostic CSS custom properties)
   ────────────────────────────────────────────────────────────────────────
   Drop this into any project: `<link rel="stylesheet" href="tokens.css">` or
   `@import "tokens.css"`. Everything keys off `--znk-*` variables.

   The system has TWO surfaces that coexist:
     1. NEUMORPHIC light UI  — cool-grey #E0E5EC base, soft dual shadows.
        Used for in-content cards, options, inputs, practice screens.
     2. WARM GAMIFIED hero   — deep purple→pink gradient with glows + a
        yellow neo-brutalist accent. Used for hero / "moment" surfaces.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand palette ─────────────────────────────────────────────── */
  --znk-navy:        #0d294b;   /* primary ink, headings on light       */
  --znk-navy-light:  #1a3d6b;
  --znk-pink:        #EE2B73;   /* brand accent — CTAs, "look here"      */
  --znk-yellow:      #FFE600;   /* energy accent — crown chip, big CTA   */
  --znk-purple:      #4F4780;
  --znk-purple-light:#6B62A8;
  --znk-accent:      #6C63FF;   /* indigo — primary interactive          */
  --znk-accent-light:#8B84FF;
  --znk-secondary:   #38B2AC;   /* teal — secondary / "rules" accents    */

  /* extended type accents (per question-type colour coding) */
  --znk-sky:    #0EA5E9;
  --znk-rose:   #EC4899;
  --znk-amber:  #F59E0B;
  --znk-green:  #10B981;

  /* ─── Semantic ──────────────────────────────────────────────────── */
  --znk-correct:    #10B981;  --znk-correct-bg: #ECFDF5;
  --znk-wrong:      #EF4444;  --znk-wrong-bg:   #FEF2F2;
  --znk-warning:    #F59E0B;
  --znk-info-bg:    #EEF2FF;  /* selected / neutral feedback tint        */

  /* ─── Neumorphic surface + ink ──────────────────────────────────── */
  --znk-bg:         #E0E5EC;  /* THE neumorphic surface (and page bg)    */
  --znk-bg-card:    #ffffff;  /* flat white card (non-neu contexts)      */
  --znk-text:       #3D4852;
  --znk-muted:      #6B7280;
  --znk-light:      #A0AEC0;
  --znk-border:     #E6EAF0;
  --znk-selected-bg:#EEF2FF;

  /* shadow rgb stops (for neumorphism on the --znk-bg surface) */
  --znk-shadow-dark:  163,177,198;   /* cool grey  */
  --znk-shadow-light: 255,255,255;

  /* ─── Neumorphic shadow recipes ─────────────────────────────────── */
  --znk-extruded:      9px 9px 16px rgba(var(--znk-shadow-dark),0.6),  -9px -9px 16px rgba(var(--znk-shadow-light),0.5);
  --znk-extruded-sm:   5px 5px 10px rgba(var(--znk-shadow-dark),0.6),  -5px -5px 10px rgba(var(--znk-shadow-light),0.5);
  --znk-extruded-hover:12px 12px 20px rgba(var(--znk-shadow-dark),0.7),-12px -12px 20px rgba(var(--znk-shadow-light),0.6);
  --znk-inset:         inset 6px 6px 10px rgba(var(--znk-shadow-dark),0.6), inset -6px -6px 10px rgba(var(--znk-shadow-light),0.5);
  --znk-inset-sm:      inset 3px 3px 6px rgba(var(--znk-shadow-dark),0.6),  inset -3px -3px 6px rgba(var(--znk-shadow-light),0.5);
  --znk-inset-deep:    inset 10px 10px 20px rgba(var(--znk-shadow-dark),0.7), inset -10px -10px 20px rgba(var(--znk-shadow-light),0.6);

  /* soft elevation for flat-white cards (non-neu) */
  --znk-elev-1: 0 10px 26px -18px rgba(13,41,75,0.30);
  --znk-elev-2: 0 18px 36px -18px rgba(13,41,75,0.35);

  /* ─── Signature gradients ──────────────────────────────────────── */
  /* The warm gamified hero. Diagonal deep-purple → magenta → pink.     */
  --znk-hero-gradient: linear-gradient(135deg, #1a0b3a 0%, #3D1F66 40%, #7A2A8E 75%, #EC4899 115%);
  /* Big yellow CTA fill (neo-brutalist). */
  --znk-cta-gradient:  linear-gradient(135deg, #FFF3A0 0%, #FFE600 45%, #FFB800 100%);
  /* Soft indigo primary button. */
  --znk-primary-gradient: linear-gradient(135deg, #8B84FF, #6C63FF);

  /* ─── Typography ───────────────────────────────────────────────── */
  /* Heebo — a clean, friendly Hebrew+Latin grotesque. Display + body.  */
  --znk-font-display: 'Heebo', system-ui, sans-serif;
  --znk-font-body:    'Heebo', system-ui, sans-serif;
  --znk-tracking-tight: -0.02em;   /* big headlines                     */
  --znk-tracking-snug:  -0.01em;   /* section titles                    */

  /* ─── Radii ────────────────────────────────────────────────────── */
  --znk-r-sm:   12px;
  --znk-r-md:   16px;   /* buttons, chips containers                    */
  --znk-r-lg:   20px;   /* option rows, small cards                     */
  --znk-r-xl:   24px;   /* section cards                                */
  --znk-r-2xl:  28px;   /* hero / feature cards                         */
  --znk-r-pill: 999px;

  /* ─── Motion ───────────────────────────────────────────────────── */
  --znk-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* the house easing      */
  --znk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --znk-dur-fast: 0.18s;
  --znk-dur-base: 0.3s;
  --znk-dur-slow: 0.6s;

  /* ─── Spacing rhythm (4px base) ────────────────────────────────── */
  --znk-space-1: 4px;  --znk-space-2: 8px;  --znk-space-3: 12px;
  --znk-space-4: 16px; --znk-space-5: 20px; --znk-space-6: 24px;
  --znk-space-8: 32px; --znk-space-10: 40px;
  --znk-maxw: 1080px;  /* content max-width on desktop                  */
}

/* ════════ Base surfaces ════════ */

.znk-neu {                       /* raised neumorphic card */
  background: var(--znk-bg);
  box-shadow: var(--znk-extruded);
  border-radius: var(--znk-r-2xl);
}
.znk-neu--inset {                /* pressed / well */
  background: var(--znk-bg);
  box-shadow: var(--znk-inset);
  border-radius: var(--znk-r-lg);
}
.znk-card {                      /* flat white elevated card */
  background: var(--znk-bg-card);
  border: 1px solid var(--znk-border);
  border-radius: var(--znk-r-xl);
  box-shadow: var(--znk-elev-1);
}

/* ════════ Signature CTA — yellow neo-brutalist ════════ */
.znk-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 26px; border-radius: var(--znk-r-md);
  background: var(--znk-cta-gradient);
  color: #1a0b3a; border: 2.5px solid #1a0b3a;
  box-shadow: 4px 4px 0 0 #1a0b3a, 0 14px 30px -10px rgba(255,184,0,0.6);
  font-family: var(--znk-font-display); font-weight: 900; font-size: 16.5px;
  cursor: pointer; transition: transform var(--znk-dur-fast) var(--znk-ease), box-shadow var(--znk-dur-fast) var(--znk-ease);
}
.znk-cta:hover  { transform: translate(-2px,-2px) scale(1.01); box-shadow: 6px 6px 0 0 #1a0b3a, 0 18px 36px -10px rgba(255,184,0,0.7); }
.znk-cta:active { transform: translate(2px,2px);              box-shadow: 1px 1px 0 0 #1a0b3a; }

/* indigo primary (softer alternative) */
.znk-btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 15px 30px; border: 0; border-radius: var(--znk-r-md);
  background: var(--znk-primary-gradient); color: #fff;
  font-family: var(--znk-font-display); font-weight: 900; font-size: 16px; cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(108,99,255,0.67);
  transition: transform var(--znk-dur-fast) var(--znk-ease), box-shadow var(--znk-dur-fast) var(--znk-ease);
}
.znk-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(108,99,255,0.8); }

/* ════════ Motion primitives ════════ */
@keyframes znk-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes znk-pop     { from { opacity: 0; transform: translateY(12px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes znk-pulse   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes znk-shimmer { to { background-position: 200% center; } }

.znk-fade-up { opacity: 0; animation: znk-fade-up var(--znk-dur-slow) var(--znk-ease) forwards; }
/* stagger helpers — add .znk-d1 … .znk-d5 alongside .znk-fade-up */
.znk-d1 { animation-delay: .08s; } .znk-d2 { animation-delay: .16s; }
.znk-d3 { animation-delay: .24s; } .znk-d4 { animation-delay: .32s; } .znk-d5 { animation-delay: .40s; }

/* shimmer headline — apply to an inline span inside a heading */
.znk-shimmer {
  background: linear-gradient(90deg, var(--znk-yellow) 0%, #fff 50%, var(--znk-yellow) 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: znk-shimmer 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .znk-fade-up, .znk-shimmer, .znk-cta { animation: none; opacity: 1; transform: none; }
}