/* ============================================================
   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.
   ============================================================ */

/* ---- Brand typeface: Almarena Neue (two optical families, per the DS) ----
   TEXT / UI  → 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)
   DISPLAY    → the real static "Display" optical cuts the brand designer
       ships (the "Ds" family) at 400/500/600/700. Headings render at
       Medium (500) per the styleguide. */
@font-face {
  font-family: "Almarena Neue";
  src: url("../fonts/AlmarenaNeueVariable-Regular.woff2") format("woff2"),
       url("../fonts/AlmarenaNeueVariable-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Almarena Neue Display";
  src: url("../fonts/AlmarenaNeue-Ds-Regular.woff2") format("woff2"),
       url("../fonts/AlmarenaNeue-Ds-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almarena Neue Display";
  src: url("../fonts/AlmarenaNeue-Ds-Medium.woff2") format("woff2"),
       url("../fonts/AlmarenaNeue-Ds-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almarena Neue Display";
  src: url("../fonts/AlmarenaNeue-Ds-SemiBold.woff2") format("woff2"),
       url("../fonts/AlmarenaNeue-Ds-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Almarena Neue Display";
  src: url("../fonts/AlmarenaNeue-Ds-Bold.woff2") format("woff2"),
       url("../fonts/AlmarenaNeue-Ds-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ===========================================================
     PRIMITIVES
     =========================================================== */
  /* Neutrals — ink (Temno siva). DS canonical names; legacy --jm-blue-*
     kept as aliases so existing usages keep resolving. */
  --jm-white:        #FFFFFF;
  --jm-ink:          #1C262C;          /* Temno siva — primary brand dark (DS) */
  --jm-ink-soft:     #3B4952;          /* DS dark secondary / raised surface */
  --jm-blue-900:     var(--jm-ink);    /* legacy alias → ink */
  --jm-blue-950:     #141B20;          /* deeper layer for dark surfaces */
  --jm-blue-850:     var(--jm-ink-soft); /* legacy alias → ink-soft (was #25313A) */

  /* Full ink ramp (DS) */
  --jm-ink-50:   #E9EBEC;
  --jm-ink-100:  #CDD1D3;
  --jm-ink-200:  #AAB1B4;
  --jm-ink-300:  #828B90;
  --jm-ink-400:  #59646A;
  --jm-ink-500:  #3B4952;   /* = ink-soft */
  --jm-ink-600:  #2B373E;
  --jm-ink-700:  var(--jm-ink);   /* #1C262C */
  --jm-ink-800:  #141B20;
  --jm-ink-900:  #0C1115;
  --jm-ink-950:  #06090B;
  --jm-ink-1000: #000000;

  /* Neutrals — bone + cool grey ramp (DS master-brand neutrals; no beige) */
  --jm-gray-0:       #FFFFFF;
  --jm-bone:         #EDECE8;        /* Bone — DS light secondary surface */
  --jm-gray-100:     var(--jm-bone); /* legacy alias → bone */
  --jm-grey-50:      #F4F5F6;
  --jm-grey-100:     #EBEDF0;        /* muted surface / info banner */
  --jm-grey-200:     #E1E6EB;
  --jm-grey-300:     #D3D9E0;
  --jm-grey-400:     #8C9EB8;
  --jm-grey-500:     #697B84;
  --jm-grey-700:     #395166;
  --jm-grey-900:     #071014;

  /* Gold ramp (Zlata) — the constant brand accent, used sparingly */
  --jm-gold-50:      #F0EFE6;
  --jm-gold-100:     #E6E3D2;
  --jm-gold-200:     #D9D4B8;
  --jm-gold-300:     #C7C098;
  --jm-gold-400:     #AFA980;   /* pressed-light (site value; DS ramp #BBB07F) */
  --jm-gold-500:     #A7A06C;   /* brand gold */
  --jm-gold-600:     #8C8557;   /* pressed / darker gold */
  --jm-gold-700:     #6E6942;
  --jm-gold-800:     #47432A;
  --jm-gold-900:     #211F13;

  /* DS Blue palette — alternative for graphics & data viz only */
  --jm-blue-graphic-900: #121E2E;
  --jm-blue-graphic-800: #052E40;
  /* DS Magenta — RESERVED FOR EVENTS ONLY (not used in product/marketing chrome) */
  --jm-magenta-900:  #990C45;
  --jm-magenta-500:  #EB2F61;

  /* Status (DS) */
  --jm-success:        #19B471;   /* positive / gains */
  --jm-success-ink:    #0B995E;   /* on light */
  --jm-green-500:      var(--jm-success-ink);   /* legacy alias */
  --jm-danger:         #D80004;   /* destructive / loss */
  --jm-danger-ink:     #C20821;   /* error text on light */
  --jm-danger-surface: #FBE3E4;
  --jm-red-500:        var(--jm-danger-ink);    /* legacy alias (was #E82333) */
  --jm-info:           #052E40;

  /* ===========================================================
     SEMANTIC — surfaces & backgrounds
     =========================================================== */
  --bg-default:        var(--jm-white);
  --bg-light:          var(--jm-gray-100);
  --bg-paper:          var(--jm-bone);       /* premium light surface (DS bone) */
  --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:      #1C262CAD;   /* ink @ 68% — AA 4.5:1 on light/paper surfaces, with headroom on bone */
  --text-body-focused:    var(--jm-blue-900);
  --text-invert:          #FFFFFFB2;   /* white @ 70% */
  --text-invert-muted:    #FFFFFF99;   /* white @ 60% */
  --text-invert-focused:  var(--jm-white);
  --text-placeholder:     #1C262C99;
  --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-bone);      /* light neutral 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-control:        #FFFFFF66;   /* white @ 40% — interactive control boundaries on dark (≥3:1) */
  --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 Display", "Almarena Neue", "Arial Narrow", system-ui, sans-serif;
  --font-text:    "Almarena Neue", system-ui, -apple-system, sans-serif;
  --font-ui:      "Inter", "Almarena Neue", system-ui, -apple-system, sans-serif;   /* DS: dense UI labels */
  --font-mono:    "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* DS: code */

  /* Static font-weights (DS): headings Medium (500), body Regular (400). */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* font-variation-settings presets for the TEXT variable font (axes
     normalised 0–100): Thin=0, ExtraLight=3.5, Light=10.5, Regular=21,
     Medium=34, SemiBold=49, Bold=67, ExtraBold=85, Black=100. The DISPLAY
     family is now the real static "Ds" cut, so --fv-display only governs
     the variable fallback — set to Medium+Display to match the styleguide
     (headings are Medium 500, never thin). */
  --fv-display:   "wght" 34, "disp" 100, "slnt" 0;   /* Display, Medium (was near-Thin) */
  --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-button: 1.2px;  /* near-square — brand buttons (DS styleguide) */
  --radius-xs:     2px;    /* chips / tags / input fields */
  --radius-sm:     4px;    /* banners / standard cards */
  --radius-md:     8px;    /* feature cards on light surfaces */
  --radius-lg:     16px;   /* large surfaces / device frames */
  --radius-xl:     24px;   /* device frames */
  --radius-pill:   999px;  /* tags / chips only */
  --radius-circle: 50%;    /* avatars / status dots */

  /* Control sizing (DS) */
  --control-height: 56px;  /* large button / input */

  /* 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);
  /* DS soft layered shadows — only on raised/floating cards, never flat blocks */
  --shadow-card:  0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.08), 0 24px 48px rgba(0,0,0,0.10);

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

/* ============================================================
   LIGHT THEME  —  :root[data-theme="light"]
   ------------------------------------------------------------
   The site is dark-led by default (the :root values above = the
   dark register). Light theme flips only the "invert" token
   family, so the dark surface classes (.surf-ink / .surf-deep /
   .surf-raised) render as LIGHT surfaces with dark text — while
   the existing light register (.surf-paper / .surf-light /
   .surf-white) is unchanged. Gold used as TEXT drops to the
   darker on-light gold for AA contrast. The gold accent fills,
   the app phone mockup (--a-*), and on-fill button labels are
   theme-independent and stay constant.

   Applied pre-paint by a tiny inline script in <head>; the user's
   choice persists in localStorage. Default (no attribute, or
   data-theme="dark") = the dark register above.
   ============================================================ */
:root[data-theme="light"] {
  /* Surfaces — the dark register becomes light. White leads (the
     dominant surf-ink), warm bone for footer / contrast bands
     (surf-deep), a cool grey-50 lift for raised cards & menus. */
  --bg-invert:         var(--jm-white);
  --bg-invert-deep:    var(--jm-bone);
  --bg-invert-raised:  var(--jm-grey-50);

  /* Text on the (now light) invert register → ink. Reuses the
     AA-validated body tokens so contrast holds on white & bone. */
  --text-invert:          var(--text-body);          /* ink @ 70% */
  --text-invert-muted:    var(--text-body-muted);    /* ink @ 65% — AA 4.5:1 */
  --text-invert-focused:  var(--jm-ink);
  --text-title-invert:    var(--jm-ink);
  --text-on-dark-beige:   var(--text-body);

  /* Borders / icons on the invert register → ink equivalents */
  --border-invert:          var(--jm-ink);
  --border-invert-muted:    var(--border-muted);      /* ink @ 20% */
  --border-invert-hairline: var(--border-hairline);   /* ink @ 10% */
  --border-control:         #1C262C66;                /* ink @ 40% — control boundaries on light */
  --icon-invert:            var(--jm-ink);
  --icon-invert-muted:      #1C262C80;

  /* Gold as TEXT now always sits on a light surface → darker gold (AA ≥ 4.5:1) */
  --text-brand:   var(--text-brand-on-light);
  --icon-brand:   var(--jm-gold-600);

  /* Protection gradients flip to the light variant */
  --overlay-invert: var(--overlay-light);
}

/* ============================================================
   SEMANTIC TYPE CLASSES  (mirror the brand's TEXT spec)
   ============================================================ */
.jm-display {
  font-family: var(--font-display); font-weight: var(--fw-medium);
  font-variation-settings: var(--fv-display);
  font-size: 95px; line-height: 100%; letter-spacing: 0;
}
.jm-h1 { font-family: var(--font-display); font-weight: var(--fw-medium); font-variation-settings: var(--fv-display);
  font-size: 76px; line-height: 120%; letter-spacing: 0; }
.jm-h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-variation-settings: var(--fv-display);
  font-size: 61px; line-height: 120%; letter-spacing: 0; }
.jm-h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-variation-settings: var(--fv-display);
  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;
}