/* ============================================================
   tokens.css — the design "variables" for all of jomijo.
   Neumorphism: one soft off-white canvas, and elements are
   defined by dual shadows (a light highlight top-left + a soft
   shadow bottom-right) rather than borders or fills. Change a
   value here and the whole site updates.
   ============================================================ */

:root {
  /* ---- Typography: Apple's own system font stack ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.375rem;
  --text-xl:  2rem;
  --text-2xl: 3rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- Rounded corners (soft UI likes generous radii) ---- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.22s var(--ease);

  --max-width: 1080px;

  /* ---- Colors (light) ---- */
  --accent:        #2f7bf6;
  --accent-hover:  #1f6ef0;
  --bg:            #e8ebf2;   /* the single soft canvas */
  --surface:       #e8ebf2;   /* elements share the canvas color */
  --surface-2:     #e2e6ee;   /* rare, for a slightly recessed tone */
  --border:        #d3d9e4;   /* faint; used sparingly */
  --text:          #333a4b;
  --text-muted:    #6b7284;
  --text-faint:    #a0a6b4;

  /* Neumorphic shadow pair */
  --sh-light: #ffffff;
  --sh-dark:  #b9c1d2;

  /* Raised (extruded) */
  --shadow-sm: -3px -3px 6px var(--sh-light), 3px 3px 6px var(--sh-dark);
  --shadow-md: -5px -5px 11px var(--sh-light), 5px 5px 11px var(--sh-dark);
  --shadow-lg: -8px -8px 18px var(--sh-light), 9px 9px 20px var(--sh-dark);
  /* Inset (pressed / wells for inputs & drop zones) */
  --shadow-inset:   inset -4px -4px 8px var(--sh-light), inset 4px 4px 8px var(--sh-dark);
  --shadow-pressed: inset -2px -2px 5px var(--sh-light), inset 3px 3px 6px var(--sh-dark);
}

/* jomijo commits to the light, white-ish neumorphic canvas for every
   visitor — it does NOT follow the system dark-mode setting. (If a dark
   theme is ever wanted, add a prefers-color-scheme block or a toggle.) */
:root { color-scheme: light; }