/* FormArea — Design Tokens */
:root {
  /* ─── 2-Color Palette ─── */
  --primary: #1A1A2E;
  --accent:  #E2FF47;

  /* ─── Backgrounds ─── */
  --bg:         #0F0F1A;
  --bg-2:       #141424;
  --surface:    #1A1A2E;
  --surface-2:  #20203A;
  --overlay:    rgba(15, 15, 26, 0.85);

  /* ─── Borders ─── */
  --border:       rgba(226, 255, 71, 0.12);
  --border-hover: rgba(226, 255, 71, 0.30);
  --border-strong:rgba(226, 255, 71, 0.50);

  /* ─── Text ─── */
  --text:       #F0F0F5;
  --text-2:     #B8B8CC;
  --text-3:     #7A7A9A;
  --text-inv:   #0F0F1A;

  /* ─── Accents / State ─── */
  --accent-dim:  rgba(226, 255, 71, 0.10);
  --accent-dim2: rgba(226, 255, 71, 0.20);
  --success:  #E2FF47;
  --error:    #FF5757;
  --warning:  #FFB547;
  --info:     #47B8FF;

  /* ─── Locked / Trial ─── */
  --locked-bg:   rgba(226, 255, 71, 0.05);
  --locked-blur: blur(6px);

  /* ─── Typography ─── */
  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ─── Spacing ─── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ─── Layout ─── */
  --sidebar-w: 240px;
  --header-h:  64px;
  --max-w:     100%;
  --content-w: 100%;

  /* ─── Radius ─── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --glow-accent: 0 0 20px rgba(226,255,71,.25);
  --glow-sm:     0 0 12px rgba(226,255,71,.15);

  /* ─── Transitions ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   120ms;
  --t-normal: 220ms;
  --t-slow:   380ms;
  --transition: var(--t-normal) var(--ease);
}

/* ─── Light Theme Palette ─── */
body.light-theme {
  --primary: #F0F0F5;
  --accent:  #A2D200; /* Darker neon for readability on white */

  --bg:         #F7F7FA;
  --bg-2:       #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F0F0F5;
  --overlay:    rgba(255, 255, 255, 0.85);

  --border:       rgba(0, 0, 0, 0.6);
  --border-hover: rgba(0, 0, 0, 0.8);
  --border-strong:rgba(0, 0, 0, 1);

  --text:       #1A1A2E;
  --text-2:     #4A4A6A;
  --text-3:     #7A7A9A;
  --text-inv:   #FFFFFF;

  --accent-dim:  rgba(162, 210, 0, 0.15);
  --accent-dim2: rgba(162, 210, 0, 0.30);
  
  --locked-bg:   rgba(0, 0, 0, 0.05);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
  --glow-accent: 0 0 20px rgba(162, 210, 0, 0.4);
  --glow-sm:     0 0 12px rgba(162, 210, 0, 0.2);
}