/* ==========================================================================
   VoiceNX mockup — design tokens
   Single source of truth for color, type, spacing, radii, shadows, device.
   ========================================================================== */

:root {
  /* ---- Brand ink & surfaces (warm paper + deep navy) ---- */
  --ink:        #111936;
  --ink-2:      #3a405f;
  --ink-3:      #767b96;
  --ink-4:      #a9adc0;
  --paper:      #eef0f4;   /* app background (cool grey) */
  --paper-2:    #f7f8fa;   /* raised, lighter grey */
  --white:      #ffffff;
  --line:       rgba(17, 25, 54, 0.09);
  --line-strong:rgba(17, 25, 54, 0.18);

  /* ---- Accents (teal from the VoiceNX mark, plum from Avondx) ---- */
  --teal:       #14968a;
  --teal-deep:  #0d6f66;
  --teal-soft:  #dcf1ed;
  --teal-ink:   #0a4f49;

  --plum:       #43187c;
  --plum-soft:  #ebe3f7;

  /* ---- Semantic ---- */
  --moss:       #3f8f5a;  --moss-soft:  #e0f1e6;
  --amber:      #d9941f;  --amber-soft: #fbefd6;
  --rose:       #c93d55;  --rose-soft:  #fae3e7;

  /* ---- Type ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Plus Jakarta Sans", "Helvetica Neue", Helvetica, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  34px;
  --fs-3xl:  46px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  /* ---- Space (4px grid) ---- */
  --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;

  /* ---- Radii ---- */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(17, 25, 54, .06), 0 1px 1px rgba(17, 25, 54, .03);
  --shadow-md: 0 8px 20px -8px rgba(17, 25, 54, .16), 0 2px 6px rgba(17, 25, 54, .05);
  --shadow-lg: 0 28px 56px -20px rgba(17, 25, 54, .28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms;
  --t-base: 240ms;

  /* ---- Device (iPad 11", logical points) ---- */
  --ipad-w:        1180px;
  --ipad-h:        820px;
  --ipad-bezel:    26px;
  --ipad-radius:   54px;
  --screen-radius: 30px;
  --statusbar-h:   24px;

  /* ---- App shell ---- */
  --topbar-h: 76px;
  --tabbar-h: 72px;
  --page-x:   40px;
}