/* ============================================================
   HMD Portal — design tokens.
   The official brand of 12 Aug 2026. Nothing in the portal states a
   colour, a radius, a shadow or a font of its own: it names one of
   these. Change a value here and every screen moves with it.

   Chocolate  #342E26  primary surfaces, sidebar, headings
   Bone       #CBC3B9  secondary text on dark
   Taupe      #6E6252  accents, active states
   Ivory      #F5F2EC  the content canvas
   Charcoal   #1A1A18  ink

   Status colours stay functional but are pulled towards the palette,
   so a red on this page is HMD's red and not a browser default.

   ONE typeface, Plus Jakarta Sans, 400/500/600/700. Self-hosted woff2,
   latin only, four files, ~47 KB the lot. No Google Fonts call, no CDN,
   no third-party request from any page. It replaced a serif display
   face whose old-style figures rendered "1" as a Roman I on the client
   page — the reason every numeral class below asks for lining, tabular
   figures by name rather than trusting a default.
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/plus-jakarta-sans-700.woff2") format("woff2");
}

:root {
  /* ---- brand ---- */
  --chocolate:#342E26;
  --chocolate-deep:#241F1A;
  --chocolate-soft:#463D33;
  --bone:#CBC3B9;
  --taupe:#6E6252;
  --taupe-light:#8D8172;
  --taupe-pale:#B4A99A;
  --ivory:#F5F2EC;
  --ivory-warm:#EDE8DF;
  --charcoal:#1A1A18;

  /* ---- surfaces and ink ---- */
  --canvas:var(--ivory);
  --paper:#FFFFFF;
  --sand:#F1EDE5;
  --tint:#FAF8F4;
  --ink:var(--charcoal);
  --ink-2:#4A443C;
  --muted:#857C70;
  --line:#E9E4DA;
  --line-strong:#D6CFC3;

  /* ---- status, muted into the palette ---- */
  --red:#9E3B32;      --red-bg:#F7EBE9;
  --amber:#8A6A24;    --amber-bg:#F8F0DE;
  --green:#4A6B55;    --green-bg:#EAF0EB;
  --violet:#5A5170;   --violet-bg:#EFEDF3;
  --info:#41586B;     --info-bg:#EAEFF2;

  /* ---- shape ----
     Bigger radii and softer, larger shadows than the first cut: the
     reference dashboards get their calm from generous corners and one
     very soft drop, never a hard border. */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --shadow:0 1px 2px rgba(26,26,24,.03), 0 12px 30px -18px rgba(26,26,24,.16);
  --shadow-lg:0 2px 6px rgba(26,26,24,.04), 0 34px 64px -28px rgba(26,26,24,.24);
  --shadow-hover:0 3px 8px rgba(26,26,24,.05), 0 26px 48px -22px rgba(26,26,24,.26);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.5);

  /* ---- glass: the overlay panels that sit on hero imagery ---- */
  --glass:rgba(245,242,236,.86);
  --glass-line:rgba(255,255,255,.55);
  --glass-blur:saturate(1.4) blur(18px);
  --scrim:linear-gradient(180deg,rgba(26,26,24,0) 0%,rgba(26,26,24,.18) 42%,rgba(26,26,24,.80) 100%);

  /* ---- spacing scale ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:42px;

  /* ---- type ----
     One family everywhere. --display exists for the places that used to
     ask for a second face; it now names the same one, so a stray
     reference cannot reintroduce the serif. */
  --display:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  /* Every numeral on a stat, a gauge, a chart or a money line asks for
     these by name: lining figures that all sit on the baseline, tabular
     so a column of them lines up. */
  --num:"lnum" 1, "tnum" 1, "kern" 1;
  --tight:-0.02em;

  /* ---- layout ---- */
  --sidebar:248px;
  --content-max:1240px;

  /* ---- legacy aliases ----
     The palette changed; the class names did not, and neither did the
     nine hundred lines of module code that reference these. Keeping the
     old names pointed at the new colours is what let the whole portal
     be re-skinned without a single module being rewritten. */
  --taupe-dark:var(--chocolate);
  --peach:var(--ivory-warm);
}