:root {
  /*
   * Brand palette ownership:
   * - miqromanage.app uses the 8gU4sDpo43Iwa9fWWj0ehc Figma palette.
   * - miqrodesign.com uses the OjoCoztFwT7myqhJi8Mbml Figma palette.
   *
   * The base variables below are the shared Miqro kit. Brand pages should
   * consume --brand-* aliases so [data-brand="miqrodesign"] can remap the
   * whole surface without editing page-level CSS.
   */
  --miqro-white: #ffffff;
  --miqro-black: #000000;
  --miqro-primary-100: #f9edf9;
  --miqro-primary-200: #e8b9e8;
  --miqro-primary-300: #d883d8;
  --miqro-primary-400: #b35ab3;
  --miqro-primary-500: #824082;
  --miqro-primary-600: #542754;
  --miqro-primary-700: #2a102a;
  --miqro-secondary-100: #e7edf3;
  --miqro-secondary-200: #b2c7da;
  --miqro-secondary-300: #84a1b9;
  --miqro-secondary-400: #657b8e;
  --miqro-secondary-500: #475765;
  --miqro-secondary-600: #2b363f;
  --miqro-secondary-700: #12181d;
  --miqro-tertiary-100: #e2d9c9;
  --miqro-tertiary-200: #bcb19f;
  --miqro-tertiary-300: #948b7d;
  --miqro-tertiary-400: #6e675c;
  --miqro-tertiary-500: #4a463e;
  --miqro-tertiary-600: #292621;
  --miqro-tertiary-700: #12110e;
  --miqro-danger-100: #f9eeef;
  --miqro-danger-200: #ecc4c9;
  --miqro-danger-300: #df919d;
  --miqro-danger-400: #d5566f;
  --miqro-danger-500: #9d3d50;
  --miqro-danger-600: #682633;
  --miqro-danger-700: #381118;
  --miqro-success-100: #4bf491;
  --miqro-success-200: #3cc876;
  --miqro-success-300: #2d9d5c;
  --miqro-success-400: #1f7543;
  --miqro-success-500: #124f2b;
  --miqro-success-600: #062c16;
  --miqro-success-700: #021508;
  --miqro-warning-100: #fceee9;
  --miqro-warning-200: #f4bca5;
  --miqro-warning-300: #e9894e;
  --miqro-warning-400: #b5693a;
  --miqro-warning-500: #834b28;
  --miqro-warning-600: #552e17;
  --miqro-warning-700: #2a1407;
  --miqro-info-100: #dbe3f3;
  --miqro-info-200: #a5bce2;
  --miqro-info-300: #6d97ce;
  --miqro-info-400: #51729d;
  --miqro-info-500: #374f6e;
  --miqro-info-600: #1f2e43;
  --miqro-info-700: #09111c;
  --miqro-septenary-100: #dae3ed;
  --miqro-septenary-200: #a6bdd6;
  --miqro-septenary-300: #7b97b3;
  --miqro-septenary-400: #5c7288;
  --miqro-septenary-500: #3f4f5f;
  --miqro-septenary-600: #242e38;
  --miqro-septenary-700: #0a0f14;
  --miqro-grey-100: #f1f0f1;
  --miqro-grey-200: #cbc7cb;
  --miqro-grey-300: #a69fa6;
  --miqro-grey-400: #817a81;
  --miqro-grey-500: #5c575c;
  --miqro-grey-600: #3a373a;
  --miqro-grey-700: #1b191b;

  --miqro-ink: var(--miqro-secondary-700);
  --miqro-paper: var(--miqro-secondary-100);
  --miqro-surface: var(--miqro-white);
  --miqro-accent: var(--miqro-primary-300);
  --miqro-ok: var(--miqro-success-300);
  --miqro-warn: var(--miqro-warning-300);
  --miqro-bad: var(--miqro-danger-500);
  --miqro-info: var(--miqro-info-500);

  /* ── miqromanage (.com + .app + 3D) — Colormind rebrand ────────────────
     Palette (Colormind, lighter→darker):
       paper #F0F2EA  cyan #4EC2E1 (light accent)  blue #3087AD (primary)
       sand  #9F8C75 (warm muted)  navy #2A2739 (ink / dark surface)
     Mirrored in dashboard/src/styles.css (--primary-* ramp) and
     unity/.../BrandTheme.cs so web, app and the 3D scene read as one product.
     Shades not in the source palette are derived from it. */
  --mm-paper:       #f0f2ea;   /* page background (cream)            */
  --mm-surface:     #ffffff;   /* cards / panels                     */
  --mm-cyan:        #4ec2e1;   /* bright accent (light)              */
  --mm-blue:        #3087ad;   /* primary accent (palette midpoint)  */
  --mm-blue-light:  #5aa6c5;
  --mm-blue-dark:   #235f79;
  --mm-sand:        #9f8c75;   /* warm muted accent                  */
  --mm-sand-deep:   #7a6850;   /* readable warm accent (from sand)   */
  --mm-navy:        #2a2739;   /* dark surface / ink                 */
  --mm-slate:       #565368;   /* muted ink (from navy)              */
  --mm-ink:         #2a2739;   /* body text                          */

  --miqromanage-primary-100: #e8f3f8;
  --miqromanage-primary-200: var(--mm-cyan);
  --miqromanage-primary-300: var(--mm-blue);
  --miqromanage-primary-400: var(--mm-blue);
  --miqromanage-primary-500: var(--mm-blue-dark);
  --miqromanage-primary-600: var(--mm-blue-dark);
  --miqromanage-primary-700: var(--mm-navy);
  --miqromanage-accent-light: var(--mm-cyan);
  --miqromanage-accent: var(--mm-blue);
  --miqromanage-accent-dark: var(--mm-blue-dark);
  --miqromanage-muted-accent: var(--mm-sand-deep);

  /* ── miqrodesign.com — Colormind rebrand ───────────────────────────────
     Palette (Colormind, lighter→darker):
       paper  #F7F7F7   sand  #DFC8B0   rose  #DD6480 (primary / midpoint)
       blue   #5982CD   slate #555869   mauve #987880
     Body, outlines and buttons resolve to black & white for maximum
     contrast; the palette colors carry the accents. Shades not in the
     source palette are derived from it. */
  --md-paper:       #f7f7f7;   /* page background              */
  --md-surface:     #ffffff;   /* cards / panels               */
  --md-sand:        #dfc8b0;   /* warm neutral tint            */
  --md-sand-deep:   #9c7a4e;   /* readable warm accent (from sand) */
  --md-rose:        #dd6480;   /* primary accent (palette midpoint) */
  --md-rose-light:  #f0a9b9;
  --md-rose-dark:   #b23e5a;
  --md-blue:        #5982cd;   /* secondary accent             */
  --md-blue-light:  #93b0e0;
  --md-blue-dark:   #3c5fa1;
  --md-mauve:       #987880;   /* tertiary / muted accent      */
  --md-slate:       #555869;   /* muted ink                    */
  --md-ink:         #000000;   /* body text, outlines, buttons */

  --miqrodesign-primary-100: var(--md-rose-light);
  --miqrodesign-primary-200: var(--md-rose-light);
  --miqrodesign-primary-300: var(--md-rose);
  --miqrodesign-primary-400: var(--md-rose);
  --miqrodesign-primary-500: var(--md-rose-dark);
  --miqrodesign-primary-600: var(--md-rose-dark);
  --miqrodesign-primary-700: var(--md-rose-dark);
  --miqrodesign-accent-light: var(--md-rose-light);
  --miqrodesign-accent: var(--md-rose);
  --miqrodesign-accent-dark: var(--md-rose-dark);
  --miqrodesign-muted-accent: var(--md-mauve);

  --brand-bg: var(--mm-paper);
  --brand-panel: color-mix(in srgb, var(--mm-surface) 90%, var(--mm-paper));
  --brand-line: color-mix(in srgb, var(--mm-ink) 12%, transparent);
  --brand-ink: var(--mm-ink);
  --brand-ink-muted: var(--mm-slate);
  --brand-accent: var(--miqromanage-accent);
  --brand-accent-light: var(--miqromanage-accent-light);
  --brand-accent-dark: var(--miqromanage-accent-dark);
  --brand-accent-muted: var(--miqromanage-muted-accent);
  --brand-accent-ghost: color-mix(in srgb, var(--brand-accent) 8%, transparent);
  --brand-accent-ring: color-mix(in srgb, var(--brand-accent) 18%, transparent);
  --brand-warn: var(--mm-sand-deep);
  --brand-info: var(--mm-blue);
  --brand-ok: var(--miqro-ok);
  --brand-shadow-card: 0 1px 0 color-mix(in srgb, var(--brand-ink) 4%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--brand-ink) 12%, transparent);
  --brand-shadow-lift: 0 1px 0 color-mix(in srgb, var(--brand-ink) 4%, transparent), 0 20px 50px -20px color-mix(in srgb, var(--brand-ink) 22%, transparent);

  --brand-dark-bg: var(--miqro-septenary-700);
  --brand-dark-panel: var(--miqro-secondary-700);
  --brand-dark-panel-2: var(--miqro-secondary-600);
  --brand-dark-panel-3: var(--miqro-info-600);
  --brand-dark-line: var(--miqro-secondary-500);
  --brand-dark-line-2: var(--miqro-secondary-400);
  --brand-dark-ink: var(--miqro-grey-100);
  --brand-dark-ink-2: var(--miqro-grey-300);
  --brand-dark-ink-3: var(--miqro-secondary-300);
}

[data-brand="miqrodesign"] {
  /* Repaint the whole surface over the shared (miqromanage) :root defaults:
     black & white body / outlines / buttons, palette colors as accents.
     --brand-accent-ghost/-ring and the shadows in :root re-resolve from the
     --brand-accent / --brand-ink values set here. */
  --brand-bg: var(--md-paper);
  --brand-panel: var(--md-surface);
  --brand-ink: var(--md-ink);
  --brand-ink-muted: var(--md-slate);
  --brand-line: color-mix(in srgb, var(--md-ink) 12%, transparent);

  --brand-accent: var(--md-rose);
  --brand-accent-light: var(--md-rose-light);
  --brand-accent-dark: var(--md-rose-dark);
  --brand-accent-muted: var(--md-mauve);
  --brand-warn: var(--md-sand-deep);   /* tier 2 / warm accent */
  --brand-info: var(--md-blue);        /* tier 3 / info        */

  /* keep the greys these pages consume in the black-&-white family */
  --miqro-secondary-600: #2a2c33;      /* tier-list body text */
  --miqro-grey-200: #dcdce0;           /* hairline-2 / ghost-button border */
  --miqro-grey-300: #9a9aa1;           /* footer / ink-4 */
}