/*!
 * MAD Biz App — Sub-brand tokens
 * Source of truth: tokens.json (this file is hand-derived; keep in sync).
 * Consume by adding @import url('tokens.css') or shipping inline in critical CSS.
 *
 * Surface modes: default = dark. Add data-theme="light" on a parent to flip.
 */

:root {
  /* ---- Brand essentials ---- */
  --mad-brand-accent: #C8102E;
  --mad-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mad-font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* ---- Dark surface (default) ---- */
  --mad-bg: #0A0A0A;
  --mad-fg: #F5F4F2;
  --mad-fg-muted: rgba(245, 244, 242, 0.55);
  --mad-fg-dim: rgba(245, 244, 242, 0.40);
  --mad-rule: rgba(255, 255, 255, 0.07);
  --mad-card-bg: #141414;
  --mad-card-border: rgba(255, 255, 255, 0.06);

  /* ---- Per-tool palette ---- */
  /* 01 · Gorilla Listings — wayfinding green */
  --tool-listings-color: #1E9E5A;
  --tool-listings-light: #2BC76F;
  --tool-listings-dark:  #136B3D;

  /* 02 · Gorilla Reputation — star-rating gold */
  --tool-reputation-color: #F2B441;
  --tool-reputation-light: #FFD06B;
  --tool-reputation-dark:  #A8761F;

  /* 03 · Gorilla Social — platform cyan */
  --tool-social-color: #3FB6FB;
  --tool-social-light: #7CCFFF;
  --tool-social-dark:  #1E78B8;

  /* 04 · Gorilla PR — press red */
  --tool-pr-color: #E03A4C;
  --tool-pr-light: #FF5E72;
  --tool-pr-dark:  #A41A2A;

  /* 05 · Gorilla Sites — architectural indigo */
  --tool-website-color: #5C46E5;
  --tool-website-light: #8779FF;
  --tool-website-dark:  #3A2BB0;

  /* 06 · Gorilla Commerce — retail magenta */
  --tool-ecommerce-color: #C13AC4;
  --tool-ecommerce-light: #E466E8;
  --tool-ecommerce-dark:  #841F87;

  /* 07 · Gorilla SEO — momentum orange */
  --tool-seo-color: #E86B2A;
  --tool-seo-light: #FF8B4A;
  --tool-seo-dark:  #A8451A;

  /* 08 · Gorilla AIO — answer-engine gold */
  --tool-aio-color: #F4B400;
  --tool-aio-light: #FFD23F;
  --tool-aio-dark:  #A87C00;

  /* 09 · Gorilla Ads — performance cobalt */
  --tool-ads-color: #1B3FA8;
  --tool-ads-light: #3A66E0;
  --tool-ads-dark:  #0F2470;

  /* 10 · Omni Enterprise — CMYK tier mark */
  --tool-omni-cmyk-c: #00AEEF;
  --tool-omni-cmyk-m: #EC008C;
  --tool-omni-cmyk-y: #FFF200;
  --tool-omni-cmyk-k: #0A0A0A;
}

[data-theme="light"] {
  --mad-bg: #F5F4F2;
  --mad-fg: #0A0A0A;
  --mad-fg-muted: rgba(10, 10, 10, 0.55);
  --mad-fg-dim: rgba(10, 10, 10, 0.40);
  --mad-rule: rgba(10, 10, 10, 0.08);
  --mad-card-bg: #FFFFFF;
  --mad-card-border: rgba(10, 10, 10, 0.07);
}

/* ---- Reusable typography classes ---- */
.mad-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--mad-brand-accent);
}
.mad-display {
  font-family: var(--mad-font-display);
  font-weight: 900; letter-spacing: -0.025em; line-height: 1;
}

/* ---- Squircle badge (the canonical tool mark) ---- */
.mad-squircle {
  display: grid; place-items: center; color: #fff;
  border-radius: 28%; /* the "squircle" curvature — 28% of the side at all sizes */
  background: var(--mad-tool-color, #888);
  box-shadow:
    0 8px 24px -8px color-mix(in srgb, var(--mad-tool-color, #888) 33%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  overflow: hidden; position: relative; flex: 0 0 auto;
}
.mad-squircle--omni {
  background: conic-gradient(
    from 135deg at 50% 50%,
    var(--tool-omni-cmyk-c) 0 25%,
    var(--tool-omni-cmyk-m) 0 50%,
    var(--tool-omni-cmyk-y) 0 75%,
    var(--tool-omni-cmyk-k) 0 100%
  );
}
.mad-squircle--omni::before {
  /* legibility scrim so white glyph reads against all 4 quadrants */
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.32);
}
.mad-squircle > svg {
  width: 60%; height: 60%; position: relative; z-index: 1;
}

/* ---- CMYK chip (for the Omni swatch row) ---- */
.mad-cmyk-chip {
  position: relative; overflow: hidden; flex: 0 0 auto;
  border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mad-cmyk-chip span { position: absolute; }
.mad-cmyk-chip .mad-c { inset: 0 50% 50% 0; background: var(--tool-omni-cmyk-c); }
.mad-cmyk-chip .mad-m { inset: 0 0 50% 50%; background: var(--tool-omni-cmyk-m); }
.mad-cmyk-chip .mad-y { inset: 50% 50% 0 0; background: var(--tool-omni-cmyk-y); }
.mad-cmyk-chip .mad-k { inset: 50% 0 0 50%; background: var(--tool-omni-cmyk-k); }