/* ==========================================================================
   Lendumine — Design Tokens
   Building Trust, One Share at a Time.

   Single source of truth for color, type, spacing, radius, shadow, motion.
   Palette derived from the lendUmine logo: navy wordmark + teal "U".
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     COLOR — Brand (sampled from logo)
     ---------------------------------------------------------------------- */
  --color-primary:        #004A8C; /* logo navy — primary actions, links */
  --color-primary-hover:  #003E78;
  --color-primary-press:  #00305E;
  --color-secondary:      #002C5F; /* deep navy — headers, footer, emphasis */
  --color-secondary-hover:#00224A;

  /* Teal — the energetic brand accent (the "U" + handshake) */
  --color-teal:           #00BFA6;
  --color-teal-hover:     #00A892;
  --color-teal-press:     #008E7B;
  --color-teal-ink:       #00564A; /* readable teal for text on light */

  /* Soft teal tints — gentle fills, icon tiles, highlights */
  --color-accent:         #E4F7F3; /* light teal — subtle fills */
  --color-accent-strong:  #C2EDE4;

  /* Backgrounds — clean, cool, modern */
  --color-bg:             #F5F8FB; /* page canvas */
  --color-bg-elevated:    #FFFFFF; /* cards, sheets, inputs */
  --color-bg-sunken:      #EBF1F6; /* wells, secondary surfaces */

  /* ----------------------------------------------------------------------
     COLOR — Ink (text) — tuned for AA contrast on light + white
     ---------------------------------------------------------------------- */
  --color-ink:            #0E2A43; /* primary text */
  --color-ink-secondary:  #3C5364; /* secondary text */
  --color-ink-muted:      #647889; /* captions, meta (≈4.6:1) */
  --color-ink-onbrand:    #FFFFFF; /* text on navy/teal-dark */
  --color-ink-onaccent:   #0E2A43; /* text on light teal accent */

  /* ----------------------------------------------------------------------
     COLOR — Neutral scale (cool)
     ---------------------------------------------------------------------- */
  --color-neutral-0:      #FFFFFF;
  --color-neutral-50:     #F5F8FB;
  --color-neutral-100:    #EDF2F7;
  --color-neutral-200:    #DCE5EC;
  --color-neutral-300:    #C2CFDA;
  --color-neutral-400:    #94A6B4;
  --color-neutral-500:    #647889;
  --color-neutral-600:    #3C5364;
  --color-neutral-700:    #23384B;
  --color-neutral-900:    #0E2A43;

  /* Borders & lines */
  --color-border:         #E2E9F0;
  --color-border-strong:  #CCD8E2;
  --color-border-focus:   #004A8C;

  /* ----------------------------------------------------------------------
     COLOR — Semantic / status
     ---------------------------------------------------------------------- */
  --color-success:        #1E9E76;
  --color-success-bg:     #E2F6EF;
  --color-warning:        #B7791F;
  --color-warning-bg:     #FBF0DA;
  --color-danger:         #D14343;
  --color-danger-bg:      #FBEAEA;
  --color-info:           #004A8C;
  --color-info-bg:        #E4EFF9;

  /* Star rating */
  --color-rating:         #F5A623;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-feature: "cv11" 1, "ss01" 1; /* Inter stylistic niceties */

  /* Fluid type scale — min .. max via clamp(). Large, premium, mobile-first. */
  --text-display:  clamp(2.3rem, 1.1rem + 5vw, 4.5rem);     /* 37 → 72 */
  --text-h1:       clamp(2.25rem, 1.5rem + 3.5vw, 3.25rem); /* 36 → 52 */
  --text-h2:       clamp(1.75rem, 1.3rem + 2.1vw, 2.5rem);  /* 28 → 40 */
  --text-h3:       clamp(1.4rem, 1.2rem + 1.0vw, 1.875rem); /* 22 → 30 */
  --text-h4:       clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);   /* 19 → 24 */
  --text-lg:       1.125rem;  /* 18 — lead paragraph */
  --text-base:     1rem;      /* 16 — body */
  --text-sm:       0.875rem;  /* 14 — secondary */
  --text-xs:       0.75rem;   /* 12 — captions, overline */

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em; /* overline / labels */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ----------------------------------------------------------------------
     SPACING — 4px base scale
     ---------------------------------------------------------------------- */
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   3rem;     /* 48 */
  --space-8:   4rem;     /* 64 */
  --space-9:   6rem;     /* 96 */
  --space-10:  8rem;     /* 128 */

  /* ----------------------------------------------------------------------
     RADIUS — generous, rounded, friendly
     ---------------------------------------------------------------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------------
     SHADOW — soft, layered, navy-tinted (premium, not harsh)
     ---------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(14, 42, 67, 0.06);
  --shadow-sm:  0 1px 3px rgba(14, 42, 67, 0.07),
                0 1px 2px rgba(14, 42, 67, 0.04);
  --shadow-md:  0 4px 12px rgba(14, 42, 67, 0.09),
                0 2px 4px rgba(14, 42, 67, 0.05);
  --shadow-lg:  0 12px 28px rgba(14, 42, 67, 0.12),
                0 4px 10px rgba(14, 42, 67, 0.06);
  --shadow-xl:  0 24px 48px rgba(14, 42, 67, 0.16),
                0 8px 18px rgba(14, 42, 67, 0.08);
  --shadow-focus: 0 0 0 4px rgba(0, 74, 140, 0.25);

  /* ----------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --container-max:  1200px;
  --container-pad:  clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --content-max:    68ch;

  /* ----------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;

  /* Z-index */
  --z-nav:     100;
  --z-drawer:  200;
  --z-overlay: 190;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}