/* Cloud's design base: GREY CARDS STANDARD (approved 2026-10-04; the rule for all new builds).
   White page with dark ink; the boxes (form, result, stat cards, tables) are MEDIUM GREY cards (#5a6475 -> #4f5868).
   Inside the cards text is light, accent text uses SOFTENED tints (--t-*), fills (buttons, toggles, bands, chart areas) stay solid neon.
   Live on bodytype.app and bmichart.app. Other variants: tokens-white-dark.css (white page + dark slate cards, 2026-10-03),
   tokens-neon-dark.css (all dark), tokens-sand.css (old light warm).
   Use: <body class="tema-app white gra">. Planner/tool sites people work in for hours (e.g. weekplanner.org): add `tema-muted`.
   Reference skeleton CSS: /workspace/bodytype/neon/neon.css + white/white.css + grey/grey.css,
   /workspace/bmichart/neon/neon.css + white/white.css + grey/grey.css (also /workspace/onlinetimer/src-gra/overrides.css). */
:root,
body.tema-app {
  /* ---- page (outside the cards) ---- */
  --bg: #ffffff;
  --bg-2: #f7f8fa;
  --bg-grad: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #f7f8fa 100%);
  --ink: #141a26;                /* 16:1 on white */
  --ink-soft: #4a5468;           /* 7.6:1 */
  --line: rgba(20, 26, 38, .12);
  --link: var(--deep-cyan);
  --link-hover: var(--deep-pink);
  --focus: var(--deep-cyan);

  /* deep neon tints: the ONLY way neon colour appears as text on white (all >= 5:1 on #fff) */
  --deep-cyan: #007385;
  --deep-lime: #447000;
  --deep-pink: #a8208d;
  --deep-orange: #a64d00;
  --deep-yellow: #806200;

  /* ---- medium grey cards ---- */
  --card-bg: linear-gradient(180deg, #5a6475 0%, #4f5868 100%);
  --card-solid: #4f5868;         /* small pills/chips on white: badge, jump links, "other" links */
  --card-line: rgba(255, 255, 255, .12);
  --card-shadow: 0 18px 40px rgba(20, 26, 38, .18), 0 2px 6px rgba(20, 26, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
  --card-ink: #f4f7fb;           /* 5.6:1 on the lightest card stop #5a6475 */
  --card-ink-soft: #e3e8ef;      /* 4.9:1 */
  --card-rule: rgba(255, 255, 255, .16);
  --tile: #444c5b;               /* inner buttons, tiles, inputs, toggle tracks inside a card */
  --field-bg: var(--tile);
  --field-line: rgba(255, 255, 255, .16);
  --placeholder: #bcc3cf;        /* 4.9:1 on --tile */
  --err: #ffe0e5;                /* error text inside cards, 4.9:1 */

  /* ---- softened text tints: the ONLY way accent colour appears as TEXT inside a grey card ----
     (all >= 4.6:1 on #5a6475 and >= 6.6:1 on --tile; plain neon text fails on grey: pink 2.1, orange 2.5, cyan 3.9) */
  --t-cyan: #d6f6fb;             /* big numbers / neutral result names, 5.3:1 */
  --t-link: #9ff3ff;             /* links and cyan accents, 4.8:1 */
  --t-lime: #d6f59c;             /* 5.0:1 */
  --t-yellow: #ffe896;           /* 4.9:1 */
  --t-orange: #ffdcbf;           /* 4.6:1 */
  --t-pink: #ffd6f5;             /* 4.6:1 */

  /* ---- neon palette: FILLS only (buttons, toggles, bands, chart areas, table cells, silhouettes) ---- */
  --neon-cyan: #22e6ff;
  --neon-lime: #c6ff4a;
  --neon-pink: #ff4fd8;
  --neon-orange: #ff8a1f;
  --neon-yellow: #ffe14a;
  --on-neon: #10141d;            /* dark text on a neon fill: 6.5–15.6:1 */

  /* ---- roles ---- */
  --btn-bg: var(--neon-lime);    /* primary button: solid lime fill + --on-neon text */
  --btn-shadow: 0 2px 10px rgba(20, 26, 38, .25);
  --btn-hover-ring: 0 0 0 1px #d4ff70;
  --toggle-unit: var(--neon-cyan);   /* selected segmented pill, first group (solid) */
  --toggle-sex: var(--neon-yellow);  /* second group (solid) */
  --badge-bg: var(--card-solid); /* eyebrow badge on white: grey pill ... */
  --badge-ink: var(--neon-lime); /* ... with lime text (6.1:1) */
  /* per-result colours: fill = neon, text = soft tint
     bmichart: under = cyan / #9ff3ff, healthy = lime / #d6f59c, over = orange / #ffdcbf, obese = pink / #ffd6f5
     bodytype: hourglass = pink / #ffd6f5, pear = lime / #d6f59c, apple = orange / #ffdcbf,
               rectangle = cyan / #9ff3ff, inverted triangle = yellow / #ffe896 */

  /* ---- glow: almost none on grey ---- */
  --glow-near: 4px;
  --glow-far: 0px;
  --text-glow-near: 4px;         /* big numbers / shape names: ONLY 0 0 4px c@25% */
  --text-glow-near-a: 25%;
  --text-glow-far: 0px;
  --text-glow-far-a: 0%;
  --card-glow: 0 0 0 1px color-mix(in srgb, var(--ct, var(--t-cyan)) 45%, transparent), var(--card-shadow);

  /* ---- type and shape ---- */
  --font: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
  --display: var(--font);
  --h-weight: 800;               /* big dark headlines on white */
  --radius: 22px;
  --radius-sm: 14px;
  --max: 1120px;

  /* legacy names from older skeletons */
  --surface: var(--card-solid);
  --surface-2: var(--tile);
  --shadow: var(--card-shadow);
  --coral: var(--neon-pink);
  --coral-ink: var(--deep-cyan);
  --coral-deep: var(--deep-pink);
  --cyan: var(--neon-cyan);
  --glow: 0 0 0 1px rgba(214, 246, 251, .35);
}

/* Inside every card the page roles flip to the card values, so the same skeleton CSS
   (color: var(--ink), var(--line), var(--link) ...) works on both white and grey.
   --ct = the text tint of the current result (set per category/shape; default near-white cyan). */
body.tema-app .card,
body.tema-app .table-wrap {
  --ink: var(--card-ink);
  --ink-soft: var(--card-ink-soft);
  --line: var(--card-rule);
  --link: var(--t-link);
  --link-hover: var(--t-lime);
  --focus: var(--t-link);
  --ct: var(--t-cyan);
}

/* MUTED variant for planner/tool sites people sit in for a long time (e.g. weekplanner.org):
   same white page and grey cards, softer neon FILLS (dark text on them >= 9:1), no glow, calmer headline.
   Text inside cards keeps using the --t-* tints above. */
body.tema-app.tema-muted {
  --neon-cyan: #7fdcea;
  --neon-lime: #c9e98f;
  --neon-pink: #e7a0d8;
  --neon-orange: #f0b07a;
  --neon-yellow: #eedc8c;
  --glow-near: 0px;
  --text-glow-near: 0px;
  --card-glow: 0 0 0 1px rgba(214, 246, 251, .25), var(--card-shadow);
  --card-shadow: 0 10px 26px rgba(20, 26, 38, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  --h-weight: 700;
}