/*
 * Meeka palette: one place for the theme colours.
 *
 * Colour comes from the Meeka robots in the logo, one per kind of people you
 * plan with: blue for you, teal for family, pink for friends, orange for work.
 * Purple is the spare, used for habits and for groups that are neither
 * friends nor work.
 *
 * Every theme colour comes in these shades:
 *   --mk-X        text and icon colour. Changes in dark mode so it stays
 *                 readable on dark cards.
 *   --mk-X-t      soft tint for backgrounds behind --mk-X.
 *   --mk-X-fill   solid fill that holds white text (buttons, the space
 *                 switcher). The same in both modes.
 *   --mk-X-bright the robot's own colour, for illustration only; white text
 *                 on it fails contrast.
 *   --mk-X-deep   darker still, for hover on a fill.
 *   --mk-X-grad   a gentle gradient from the fill to a livelier shade, for
 *                 hero surfaces like the space switcher. Both ends hold
 *                 white text at 4.5:1 or better.
 *
 * Loaded on every app page by layouts/sections/styles.blade.php and by the
 * front page. Pages read these instead of copying hex values.
 */

:root {
  /* Neutrals */
  --mk-ink: #26233F;
  --mk-ink-2: #37335A;
  --mk-slate: #615D7A;
  --mk-faint: #8A86A3;
  --mk-surface: #fff;
  --mk-sunk: #F5F4FA;
  --mk-mist: #F7F6FB;
  --mk-mist-2: #ECEAF5;
  --mk-line: #E7E4F0;
  --mk-line-2: #EFEDF5;
  --mk-line-strong: #E0DDEC;

  /* Brand blue, for links and primary buttons */
  --mk-blue: #0B6FB8;
  --mk-blue-d: #095C9A;
  --mk-blue-tint: #E1F2FC;
  --mk-focus: #00a0e0;
  --mk-focus-l: #50c0f0;
  --mk-focus-d: #0080c0;

  /* You: blue */
  --mk-you: #0B6FB8;
  --mk-you-t: #E4F2FB;
  --mk-you-fill: #0B6FB8;
  --mk-you-grad: linear-gradient(135deg, #0B6FB8, #1677C2);
  --mk-you-deep: #095C9A;
  --mk-you-bright: #0B6FB8;

  /* Family: teal */
  --mk-fam: #0E7C72;
  --mk-fam-t: #DDF4F1;
  --mk-fam-fill: #0E7C72;
  --mk-fam-grad: linear-gradient(135deg, #0E7C72, #0F8579);
  --mk-fam-deep: #0E6F66;
  --mk-fam-bright: #10B0A0;

  /* Friends: pink */
  --mk-pal: #B8345F;
  --mk-pal-t: #FCE8EF;
  --mk-pal-tint: #FCE6EE;
  --mk-pal-fill: #B8345F;
  --mk-pal-grad: linear-gradient(135deg, #B8345F, #C93F6D);
  --mk-pal-deep: #B8345F;
  --mk-pal-bright: #E05080;

  /* Work: orange */
  --mk-work: #A8560A;
  --mk-work-t: #FEF0DC;
  --mk-work-fill: #A8560A;
  --mk-work-grad: linear-gradient(135deg, #A8560A, #B05E0C);
  --mk-work-deep: #A8560A;
  --mk-work-bright: #F09010;

  /* Spare: purple */
  --mk-plum: #8A3A9A;
  --mk-plum-t: #F4E6F7;
  --mk-plum-fill: #8A3A9A;
  --mk-plum-grad: linear-gradient(135deg, #8A3A9A, #9B45AB);
  --mk-plum-deep: #742F82;
  --mk-plum-bright: #B050C0;

  /* Status */
  --mk-ok: #177A4B;
  --mk-ok-t: #E2F4EA;
  --mk-late: #C2362F;
  --mk-late-t: #FDE8E6;
  --mk-heart: #E0393E;

  --mk-shadow: 0 1px 2px rgba(38,35,63,.05), 0 8px 24px -14px rgba(38,35,63,.22);
  --mk-display: "Familjen Grotesk", var(--bs-body-font-family, system-ui), sans-serif;
}

/* The app's dark mode puts .dark-style on <html>. Fills stay as they are so
   white text on them keeps its contrast. */
html.dark-style {
  --mk-ink: #ECEBF5;
  --mk-ink-2: #D6D4E6;
  --mk-slate: #AAA7C0;
  --mk-faint: #86839E;
  --mk-surface: #262D3B;
  --mk-sunk: #2D3546;
  --mk-line: rgba(255,255,255,.08);
  --mk-line-2: rgba(255,255,255,.06);
  --mk-line-strong: rgba(255,255,255,.12);

  --mk-blue: #3E9BE0;
  --mk-blue-d: #5AAEEA;

  --mk-you: #6BB8F0;
  --mk-you-t: rgba(62,155,224,.16);
  --mk-fam: #4FD1C0;
  --mk-fam-t: rgba(16,176,160,.16);
  --mk-pal: #F28AB0;
  --mk-pal-t: rgba(224,80,128,.16);
  --mk-work: #F5B25A;
  --mk-work-t: rgba(240,144,16,.16);
  --mk-plum: #D69AE2;
  --mk-plum-t: rgba(176,80,192,.18);
  --mk-ok: #6FD6A0;
  --mk-ok-t: rgba(23,122,75,.22);
  --mk-late: #FF8A80;
  --mk-late-t: rgba(194,54,47,.2);

  --mk-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 28px -16px rgba(0,0,0,.5);
}

/* Who sees a Family or group page (App\Support\SpaceTone::sharedWith). Solid chip, no wash. */
.mk-space-share{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;padding:6px 12px;border-radius:12px;background:var(--mk-surface);border:1px solid color-mix(in srgb,var(--mk-share-bright) 45%,transparent);font-size:.88rem;font-weight:600;line-height:1.35;color:var(--mk-ink);max-width:46em}
.mk-space-share .bx{font-size:1.05rem;color:var(--mk-share);flex-shrink:0}
.mk-space-share,.mk-space-share.mk-share-fam{--mk-share:var(--mk-fam);--mk-share-bright:var(--mk-fam-bright)}
.mk-space-share.mk-share-pal{--mk-share:var(--mk-pal);--mk-share-bright:var(--mk-pal-bright)}
.mk-space-share.mk-share-work{--mk-share:var(--mk-work);--mk-share-bright:var(--mk-work-bright)}
.mk-space-share.mk-share-plum{--mk-share:var(--mk-plum);--mk-share-bright:var(--mk-plum-bright)}
.mk-cal-share{margin:10px 16px 0}
.mk-hello .mk-space-share{margin-top:8px}