/* ════════════════════════════════════════════════════════════════════════════
   MAKRO ADMIN · DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════════════
   Apply this stylesheet at the document root so every admin component reads
   from a single source of truth. Distinct from the website (amber primary)
   and extension (warm browns) — admin is indigo on dark.

   Do not paste this into the marketing site or extension; their token sets
   are separate by design (see makro_migration_kit/tokens.css and
   makro_extension_kit/tokens.css).
   ════════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── BACKGROUNDS ──────────────────────────────────────────────────────────
     Three depth tiers + a deeper "well" used for table headers and card
     foots. Surfaces step UP toward the eye (1 < 2 < 3 < hi). bg-deep is
     used as a recessed surface, not as page background — the page uses --bg.
     ────────────────────────────────────────────────────────────────────── */
  --bg:         #0a0c10;  /* page background */
  --bg-deep:    #06080c;  /* recessed: topbar/sidebar/table heads/foots */
  --surface-1:  #11141b;  /* default card background */
  --surface-2:  #161a23;  /* hover, elevated rows, secondary input */
  --surface-3:  #1d2230;  /* active hover, button-secondary hover */
  --surface-hi: #232a3b;  /* highest: tooltips, popovers */

  /* ── BORDERS ──────────────────────────────────────────────────────────────
     Three weights. Use --border for almost everything, --border-soft for
     subtle row separators inside cards, --border-hi for emphasis on hover.
     --border-focus is reserved for input :focus state.
     ────────────────────────────────────────────────────────────────────── */
  --border:       #1f2533;
  --border-soft:  #161b26;  /* row dividers, card-internal separators */
  --border-hi:    #2c3344;  /* hover, focused-but-unfilled states */
  --border-focus: #4f46e5;  /* indigo-600 · matches input focus ring */

  /* ── TEXT ─────────────────────────────────────────────────────────────────
     Four weights. Use --text-muted for secondary copy, --text-dim for
     metadata and form-label microcopy, --text-ghost for the deepest disabled
     state — almost-but-not-quite invisible.
     ────────────────────────────────────────────────────────────────────── */
  --text:       #eef0f6;  /* primary */
  --text-muted: #9aa3b8;  /* secondary, descriptions */
  --text-dim:   #6b7388;  /* metadata, form labels, timestamps */
  --text-ghost: #4a5168;  /* disabled, placeholder, separator dots */

  /* ── INDIGO — PRIMARY ─────────────────────────────────────────────────────
     The admin's identity color. Used for active sidebar links, primary CTAs,
     focus rings, "selected" states, and Customer Detail pages.
     ────────────────────────────────────────────────────────────────────── */
  --indigo:      #6366f1;
  --indigo-hi:   #818cf8;  /* on hover, on-text on dark surface */
  --indigo-dim:  #4338ca;  /* shadowed bottom edge of buttons, borders */
  --indigo-wash: rgba(99, 102, 241, 0.10);  /* tinted backgrounds */
  --indigo-glow: rgba(99, 102, 241, 0.25);  /* button shadows, focus rings */

  /* ── SEMANTIC: GREEN (healthy / positive / paid) ──────────────────────────
     Used for: healthy status, positive deltas, paid revenue, recovered
     checkouts, connected services, the global topbar status pill.
     Consistent across all three Makro surfaces — green always means "good".
     ────────────────────────────────────────────────────────────────────── */
  --green:       #22c55e;
  --green-hi:    #4ade80;
  --green-dim:   #166534;
  --green-wash:  rgba(34, 197, 94, 0.10);

  /* ── SEMANTIC: AMBER (warning / attention / pending) ──────────────────────
     Used for: at-risk health, abandoned checkouts, paused promos, scheduled
     incidents not yet active, system-notice severity-medium entries.
     Polar Customer Detail uses amber as its lens accent.
     ────────────────────────────────────────────────────────────────────── */
  --amber:       #f59e0b;
  --amber-hi:    #fbbf24;
  --amber-dim:   #b45309;
  --amber-wash:  rgba(245, 158, 11, 0.10);

  /* ── SEMANTIC: RED (danger / failure / incident) ──────────────────────────
     Used for: failed sends, expired states, active incidents, destructive
     actions, audit-log critical events. Should feel rare — overuse erodes
     attention. If you find yourself reaching for red on a nominal data
     point, reach for amber instead.
     ────────────────────────────────────────────────────────────────────── */
  --red:         #ef4444;
  --red-hi:      #f87171;
  --red-dim:     #991b1b;
  --red-wash:    rgba(239, 68, 68, 0.10);

  /* ── ACCENT: CYAN (information / technical metadata) ──────────────────────
     Used for: scheduled-but-pending states, technical IDs, code references,
     event names in audit logs, slug previews. Customer Profile lens uses
     cyan as its accent color to differentiate from Customer Detail (indigo).
     ────────────────────────────────────────────────────────────────────── */
  --cyan:        #06b6d4;
  --cyan-wash:   rgba(6, 182, 212, 0.10);

  /* ── ACCENT: PURPLE (AI / synthesized / generated) ────────────────────────
     Reserved for AI-generated content. Intelligence Hub uses purple as its
     primary accent. Form fields with AI-generate buttons use purple-wash.
     This is a constraint, not a palette: do not use purple decoratively or
     for non-AI affordances — that's how the user learns what purple means.
     ────────────────────────────────────────────────────────────────────── */
  --purple:      #a855f7;
  --purple-hi:   #c084fc;
  --purple-dim:  #7e22ce;
  --purple-wash: rgba(168, 85, 247, 0.10);

  /* ── ACCENT: PINK (seasonal / referral) ───────────────────────────────────
     Used by Promotions for seasonal campaigns and the referral type. Should
     not appear elsewhere. Like purple, the constraint is the point.
     ────────────────────────────────────────────────────────────────────── */
  --pink:        #ec4899;
  --pink-hi:     #f472b6;

  /* ── SOCIAL PLATFORM ACCENTS ──────────────────────────────────────────────
     Only used on the Social page. Muted from full-saturation brand colors
     to fit the dark UI. Active sub-tab borders pick from these so each
     platform has a recognizable signal without overwhelming the page.
     ────────────────────────────────────────────────────────────────────── */
  --mastodon:      #6364ff;
  --mastodon-wash: rgba(99, 100, 255, 0.10);
  --mastodon-dim:  rgba(99, 100, 255, 0.4);
  --bluesky:       #0085ff;
  --bluesky-wash:  rgba(0, 133, 255, 0.10);
  --bluesky-dim:   rgba(0, 133, 255, 0.4);
  --reddit:        #ff4500;
  --reddit-wash:   rgba(255, 69, 0, 0.10);
  --reddit-dim:    rgba(255, 69, 0, 0.4);

  /* ── TYPOGRAPHY ───────────────────────────────────────────────────────────
     Inter for UI, JetBrains Mono for data. The mono font is non-negotiable
     for IDs, timestamps, counts, and code — it makes scanning columns of
     numbers fast and aligns digits naturally. Inter is loaded via Google
     Fonts; if you self-host, keep the same weight set (400/500/600/700).
     ────────────────────────────────────────────────────────────────────── */
  --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Body uses 13px base. Do not raise this without rebuilding the density
     model — most components assume 13px line-height: 1.5 = 19.5px rows. */
  --font-size-base: 13px;
  --font-size-sm:   12px;
  --font-size-xs:   11px;
  --font-size-2xs:  10px;  /* metadata */
  --font-size-3xs:  9px;   /* table heads, pills, eyebrow labels */

  /* Letter-spacing scale. Mono labels use 0.04–0.16em, all-caps eyebrow
     labels use 0.14em uniformly. Body never goes above 0.01em. */

  /* ── RADIUS ───────────────────────────────────────────────────────────────
     Four steps. Pills get 100px (full-round), chips and small inputs get sm,
     buttons and inputs get md, surface containers get lg, top-level cards
     get xl. Don't mix arbitrary radii — pick from this scale.
     ────────────────────────────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* ── MOTION ───────────────────────────────────────────────────────────────
     One transition speed for hover states (background, border, color).
     Respect prefers-reduced-motion — see global rule below.
     ────────────────────────────────────────────────────────────────────── */
  --t: 120ms;

  /* ── LAYOUT ───────────────────────────────────────────────────────────────
     Hard-coded for the admin shell. Sidebar is 220px (vs the marketing
     site's 280 — admin is denser). Topbar is 52px (vs site 64 — admin
     does more with less chrome).
     ────────────────────────────────────────────────────────────────────── */
  --sidebar-w: 220px;
  --topbar-h:  52px;

  /* Page max-width. Pages should use this so wide monitors don't spread
     content too thin. The split-pane layouts get a target width inside this
     so neither column collapses below readable. */
  --main-max-w: 1500px;
  --main-pad:   24px;

  /* ── DENSITY TIERS ────────────────────────────────────────────────────────
     Three tiers: cozy / default / dense. Each maps to a row height + a
     padding scale. Used by tables and lists.
       - cozy:    52px rows · 14px padding · for empty/sparse data
       - default: 44px rows · 12px padding · the assumed baseline
       - dense:   34px rows · 9px padding  · for analytics, audit logs
     Switch at the table level, not at the page level.
     ────────────────────────────────────────────────────────────────────── */
  --row-h-cozy:    52px;
  --row-h-default: 44px;
  --row-h-dense:   34px;
  --row-pad-cozy:    14px 18px;
  --row-pad-default: 12px 16px;
  --row-pad-dense:   9px 14px;

  /* ── ELEVATION ────────────────────────────────────────────────────────────
     Reserved for popovers, dropdowns, modals. Cards do not use shadows —
     they use borders + surface tier to express depth on dark backgrounds.
     Shadows on dark UI tend to look muddy; layering surfaces is cleaner.
     ────────────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50);
}


/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL RESET — minimal
   ════════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: var(--font-size-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  letter-spacing: inherit;
}

input, textarea, select {
  font: inherit;
  letter-spacing: inherit;
}


/* ════════════════════════════════════════════════════════════════════════════
   ANIMATION
   ════════════════════════════════════════════════════════════════════════════ */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════════
   SCROLLBAR (sidebar only — keep main content with native scrollbar)
   ════════════════════════════════════════════════════════════════════════════ */

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }