/* Wishly webfonts.
   NOTE: Loaded from Google Fonts CDN — no local binaries are shipped.
   Plus Jakarta Sans = friendly geometric sans (Latin) — matches the rounded wordmark.
   Assistant      = friendly geometric Hebrew sans for RTL surfaces (the app). Same rounded character.
   JetBrains Mono = occasional technical metadata (timestamps, IDs). Used sparingly. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Assistant:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
/* ============================================================
   WISHLY · COLOR SYSTEM
   Anchored on the logo: deep navy → teal → spring green.
   Navy = trust/anchor. Teal = connection. Green = the result.
   ============================================================ */
:root {
  /* ---- Brand ramp: Navy ---- */
  --navy-950: #041726;
  --navy-900: #062a45;
  --navy-800: #0a3a63;
  --navy-700: #003d7f;   /* primary navy — the "Wish" wordmark */
  --navy-600: #0e5298;
  --navy-500: #1a6fb8;

  /* ---- Brand ramp: Blue (the arc strokes) ---- */
  --blue-500: #1f7fc9;
  --blue-400: #4f9fda;
  --blue-300: #8fc2ea;

  /* ---- Brand ramp: Teal (the "ly" wordmark) ---- */
  --teal-700: #0a6473;
  --teal-600: #117a8c;
  --teal-500: #168599;
  --teal-400: #149aa0;

  /* ---- Brand ramp: Green (the result / sparkle glow) ---- */
  --green-600: #04a584;
  --green-500: #03bb91;   /* spring green accent */
  --green-400: #2dd3a7;
  --green-300: #7ee7c6;

  /* ---- Cool neutrals (slightly blue-tinted to sit under navy) ---- */
  --white:     #ffffff;
  --paper:     #f6f9fc;   /* page background */
  --mist:      #eef3f8;   /* sunken / hover surface */
  --cloud:     #e3eaf2;   /* hairline borders */
  --cloud-2:   #d3dde8;   /* stronger borders */
  --slate-300: #aebccb;
  --slate-400: #8194a6;
  --slate-500: #5d7186;
  --slate-600: #43566a;
  --slate-700: #2c3e51;
  --ink:       #0f2438;   /* near-black navy — body text */

  /* ---- Status ---- */
  --success-500: #03bb91;
  --success-50:  #e4f9f1;
  --warning-500: #f2a93b;
  --warning-50:  #fdf2df;
  --danger-500:  #e5544d;
  --danger-50:   #fdeceb;
  --info-500:    #1f7fc9;
  --info-50:     #e8f2fc;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--ink);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-on-brand: #ffffff;
  --text-link:     var(--teal-600);
  --text-accent:   var(--green-600);

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--mist);
  --surface-hover:   var(--mist);
  --surface-brand:   var(--navy-700);
  --surface-inverse: var(--navy-900);

  /* Borders */
  --border-subtle:  var(--cloud);
  --border-default: var(--cloud-2);
  --border-strong:  var(--slate-300);
  --border-focus:   var(--teal-500);

  /* Brand intent */
  --brand-primary:   var(--navy-700);
  --brand-secondary: var(--teal-500);
  --brand-accent:    var(--green-500);

  /* ---- Signature gradients ---- */
  --gradient-brand:  linear-gradient(120deg, #003d7f 0%, #168599 52%, #03bb91 100%); /* @kind other */
  --gradient-flow:   linear-gradient(120deg, #0e5298 0%, #149aa0 50%, #2dd3a7 100%); /* @kind other */
  --gradient-ink:    linear-gradient(160deg, #062a45 0%, #0a3a63 60%, #0a6473 100%); /* @kind other */
  --gradient-sheen:  linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%); /* @kind other */
  /* sparkle glow used behind the AI mark */
  --glow-spark:      radial-gradient(circle at center, rgba(45,211,167,.55) 0%, rgba(20,154,160,.22) 40%, rgba(20,154,160,0) 72%); /* @kind other */
}
/* ============================================================
   WISHLY · TYPOGRAPHY
   One friendly geometric family does the heavy lifting.
   Plain-spoken brand → no fussy display face.
   ============================================================ */
:root {
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-hebrew:  'Assistant', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* Type scale (px) — fluid-ready, generous display sizes */
  --fs-display-2xl: 72px;
  --fs-display-xl:  58px;
  --fs-display-lg:  46px;
  --fs-display-md:  37px;
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  /* Line heights */
  --lh-tight:   1.06; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-heading: 1.28; /* @kind other */
  --lh-body:    1.6; /* @kind other */
  --lh-relaxed: 1.72; /* @kind other */

  /* Letter spacing */
  --ls-tight:  -0.03em; /* @kind other */
  --ls-snug:   -0.015em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide:   0.02em; /* @kind other */
  --ls-caps:   0.08em; /* @kind other */
}

/* ---- Convenience utility classes (optional for consumers) ---- */
.wl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.wl-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--text-strong); }
.wl-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-snug); color: var(--text-strong); }
.wl-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.wl-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.wl-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-accent);
}
.wl-mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); letter-spacing: var(--ls-normal); }
/* ============================================================
   WISHLY · SPACING, RADII, SHADOWS, MOTION
   Rounded, soft, calm. Generous radii echo the circular nodes.
   ============================================================ */
:root {
  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* ---- Radii (brand is very rounded) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---- Shadows (cool navy-tinted, soft) ---- */
  --shadow-xs:  0 1px 2px rgba(8,40,70,.06);
  --shadow-sm:  0 2px 8px rgba(8,40,70,.08);
  --shadow-md:  0 10px 26px rgba(8,40,70,.10);
  --shadow-lg:  0 22px 50px rgba(8,40,70,.14);
  --shadow-xl:  0 36px 80px rgba(8,40,70,.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
  /* focus ring */
  --ring-focus: 0 0 0 3px rgba(22,133,153,.32);
  /* accent glow (the sparkle / CTA energy) */
  --glow-accent: 0 10px 30px rgba(3,187,145,.28);
  --glow-brand:  0 14px 40px rgba(0,61,127,.26);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-in-out: cubic-bezier(.62,.05,.36,1); /* @kind other */
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   340ms; /* @kind other */

  /* ---- Layout ---- */
  --container-sm:  640px; /* @kind other */
  --container-md:  860px; /* @kind other */
  --container-lg:  1120px; /* @kind other */
  --container-xl:  1280px; /* @kind other */
  --header-h: 68px; /* @kind other */
}
/* ============================================================
   WISHLY · light base resets (optional, scoped-friendly)
   Sets the page in brand defaults without being heavy-handed.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(3,187,145,.22); color: var(--navy-900); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus visibility consistent with the brand ring */
:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-xs); }