/* ============================================================
   JonatanMars Invest — Colors & Type Foundation
   ------------------------------------------------------------
   Derived from the JonatanMars master brand, shifted toward a
   darker, more reserved, "institutional / private bank" register:
   the dark ink (blue/900) leads as the primary surface, gold is
   used sparingly as a precious accent, and a new warm BEIGE scale
   complements the gold for premium, paper-like neutrals.
   ============================================================ */

/* ---- Font face: one variable file, three axes ----
   wght : weight        (0 = Regular … 100 = Bold)
   disp : display optical (0 = Text … 100 = Display)
   slnt : slant/italic  (0 = upright … 100 = italic)               */
@font-face {
  font-family: "Almarena Neue";
  src: url("../fonts/AlmarenaNeueVariable-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===========================================================
     PRIMITIVES
     =========================================================== */
  /* Neutrals — ink */
  --jm-white:        #FFFFFF;
  --jm-blue-900:     #1C262C;   /* core brand ink */
  --jm-blue-950:     #141B20;   /* deeper layer for dark surfaces */
  --jm-blue-850:     #25313A;   /* raised panel on dark */

  /* Neutrals — paper (cool, from master brand) */
  --jm-gray-0:       #FFFFFF;
  --jm-gray-100:     #EDECE8;   /* cool off-white */

  /* NEW — warm beige scale (complements the gold) */
  --jm-beige-50:     #F5F1E8;   /* lightest warm paper */
  --jm-beige-100:    #EBE5D7;
  --jm-beige-200:    #DED5C0;
  --jm-beige-300:    #CFC4A8;   /* mid beige */
  --jm-beige-400:    #BEB290;

  /* Gold — used sparingly */
  --jm-gold-400:     #AFA980;
  --jm-gold-500:     #A7A06C;   /* brand gold */
  --jm-gold-600:     #8C8557;   /* pressed / darker gold */

  /* Status */
  --jm-green-500:    #0B995E;
  --jm-red-500:      #E82333;

  /* ===========================================================
     SEMANTIC — surfaces & backgrounds
     =========================================================== */
  --bg-default:        var(--jm-white);
  --bg-light:          var(--jm-gray-100);
  --bg-paper:          var(--jm-beige-50);   /* warm premium light surface */
  --bg-invert:         var(--jm-blue-900);   /* PRIMARY dark canvas */
  --bg-invert-deep:    var(--jm-blue-950);
  --bg-invert-raised:  var(--jm-blue-850);
  --bg-brand-primary:  var(--jm-gold-500);
  --bg-brand-primary-light: var(--jm-gold-400);

  /* ===========================================================
     SEMANTIC — text
     =========================================================== */
  --text-title:           var(--jm-blue-900);
  --text-title-invert:    var(--jm-white);
  --text-body:            #1C262CB2;   /* ink @ 70% */
  --text-body-muted:      #1C262CA6;   /* ink @ 65% — AA 4.5:1 on light/paper surfaces */
  --text-body-focused:    var(--jm-blue-900);
  --text-invert:          #FFFFFFB2;   /* white @ 70% */
  --text-invert-muted:    #FFFFFF80;   /* white @ 50% */
  --text-invert-focused:  var(--jm-white);
  --text-placeholder:     #1C262C80;
  --text-brand:           var(--jm-gold-500);
  --text-brand-on-light:  #736B3A;             /* darker gold for gold TEXT on light surfaces — AA 4.5:1 */
  --text-on-dark-beige:   var(--jm-beige-200); /* warm body text on dark */
  --text-success:         var(--jm-green-500);
  --text-error:           var(--jm-red-500);

  /* ===========================================================
     SEMANTIC — icon
     =========================================================== */
  --icon-default:       var(--jm-blue-900);
  --icon-muted:         #1C262C80;
  --icon-invert:        var(--jm-white);
  --icon-invert-muted:  #FFFFFF80;
  --icon-brand:         var(--jm-gold-500);
  --icon-success:       var(--jm-green-500);
  --icon-error:         var(--jm-red-500);

  /* ===========================================================
     SEMANTIC — border
     =========================================================== */
  --border-default:        var(--jm-blue-900);
  --border-muted:          #1C262C33;   /* ink @ 20% */
  --border-hairline:       #1C262C1A;   /* ink @ 10% */
  --border-invert:         var(--jm-white);
  --border-invert-muted:   #FFFFFF33;
  --border-invert-hairline:#FFFFFF1A;
  --border-brand:          var(--jm-gold-500);

  /* ===========================================================
     OVERLAY / PROTECTION GRADIENTS  (start transparent → stop)
     =========================================================== */
  --overlay-invert: linear-gradient(180deg, #1C262C00 0%, #1C262C 100%);
  --overlay-light:  linear-gradient(180deg, #EDECE800 0%, #EDECE8 100%);
  --scrim-dark:     linear-gradient(180deg, #141B2000 0%, #141B20E6 100%);

  /* ===========================================================
     TYPE — families & axis presets
     =========================================================== */
  --font-display: "Almarena Neue", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Almarena Neue", system-ui, -apple-system, sans-serif;

  /* font-variation-settings presets (axes are normalised 0–100).
     Named instances in the font: Thin=0, ExtraLight=3.5, Light=10.5,
     Regular=21, Medium=34, SemiBold=49, Bold=67, ExtraBold=85, Black=100.
     (The original tokens used wght 0 for "regular", which is actually Thin —
     corrected here so body/UI text reads at true Regular/Medium weight.) */
  --fv-display:   "wght" 4,  "disp" 100, "slnt" 0;   /* Display, near-Thin for large editorial headings */
  --fv-regular:   "wght" 21, "disp" 0,   "slnt" 0;   /* Regular */
  --fv-medium:    "wght" 34, "disp" 0,   "slnt" 0;   /* Medium */
  --fv-semibold:  "wght" 49, "disp" 0,   "slnt" 0;   /* SemiBold */
  --fv-bold:      "wght" 67, "disp" 0,   "slnt" 0;   /* Bold */
  --fv-italic:    "wght" 21, "disp" 0,   "slnt" 100; /* Regular Italic */

  /* ===========================================================
     RADII / SPACING / ELEVATION
     The brand is architectural & sharp — radii are minimal.
     =========================================================== */
  --radius-none: 0px;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;     /* cards on light surfaces */
  --radius-pill: 999px;   /* tags / chips only */

  /* 8px spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Elevation — restrained, cool, low-spread */
  --shadow-sm:  0 1px 2px rgba(20,27,32,0.06);
  --shadow-md:  0 4px 16px rgba(20,27,32,0.08);
  --shadow-lg:  0 16px 48px rgba(20,27,32,0.12);
  --shadow-dark:0 24px 64px rgba(0,0,0,0.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES  (mirror the brand's TEXT spec)
   ============================================================ */
.jm-display {
  font-family: var(--font-display);
  font-variation-settings: var(--fv-display);
  font-size: 95px; line-height: 100%; letter-spacing: 0;
}
.jm-h1 { font-family: var(--font-display); font-variation-settings: var(--fv-display);
  font-size: 76px; line-height: 120%; letter-spacing: 0; }
.jm-h2 { font-family: var(--font-display); font-variation-settings: var(--fv-display);
  font-size: 61px; line-height: 120%; letter-spacing: 0; }
.jm-h3 { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 49px; line-height: 120%; }
.jm-h4 { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 39px; line-height: 120%; }
.jm-h5 { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 31px; line-height: 120%; }
.jm-h5-medium { font-family: var(--font-text); font-variation-settings: var(--fv-medium);
  font-size: 31px; line-height: 120%; }
.jm-h6 { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 25px; line-height: 140%; }

.jm-body { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 16px; line-height: 160%; }
.jm-body-medium { font-family: var(--font-text); font-variation-settings: var(--fv-medium);
  font-size: 16px; line-height: 160%; }
.jm-body-bold { font-family: var(--font-text); font-variation-settings: var(--fv-bold);
  font-size: 16px; line-height: 160%; }
.jm-body-italic { font-family: var(--font-text); font-variation-settings: var(--fv-italic);
  font-size: 16px; line-height: 160%; }
.jm-lead { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 20px; line-height: 160%; }
.jm-lead-bold { font-family: var(--font-text); font-variation-settings: var(--fv-bold);
  font-size: 20px; line-height: 160%; }
.jm-small { font-family: var(--font-text); font-variation-settings: var(--fv-regular);
  font-size: 14px; line-height: 160%; }
.jm-small-medium { font-family: var(--font-text); font-variation-settings: var(--fv-medium);
  font-size: 14px; line-height: 160%; }

/* Label / eyebrow — uppercase, wide tracking (brand "Label" style) */
.jm-label {
  font-family: var(--font-text);
  font-variation-settings: var(--fv-medium);
  font-size: 15px; line-height: 160%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.jm-label-small {
  font-family: var(--font-text);
  font-variation-settings: var(--fv-medium);
  font-size: 14px; line-height: 160%;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}