/* ═══════════════════════════════════════════════════════════════════════════
 * ArrParty.DesignSystem — Single brand-theme token foundation
 * ═══════════════════════════════════════════════════════════════════════════
 * Self-contained, Radzen-free design tokens shared by the auth UI and the new
 * domain UI. Loaded via _content/ArrParty.DesignSystem/css/brand-tokens.css.
 * Single settled `brand` theme — no [data-bs-theme] switching; every token
 * resolves unconditionally in :root.
 *
 * Evolved past the AuthCore.UI copy: bundled Geist + Geist Mono, subtle-round
 * radii, and a semantic action-colour layer (--ac-primary / --ac-accent / --ac-danger)
 * so the brand can be retuned from one place. AuthCore.UI re-points here in a fast-follow.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bundled typefaces (offline WebView-safe; latin subset) ─────────────────── */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/geistmono-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/geistmono-500.woff2') format('woff2'); }

:root {
  /* ── Brand palette (monochrome canvas + single oxblood accent) ──────────── */
  --brand-canvas:        #050506;  /* page background */
  --brand-chrome:        #0e0e10;  /* sidebar / header / sunken */
  --brand-surface:       #141416;  /* cards / forms / rows */
  --brand-surface-hover: #1a1a1d;  /* neutral hover wash */
  --brand-control:       #26262a;  /* button / control fills */
  --brand-control-hover: #303036;
  --brand-border-soft:   rgba(255, 255, 255, 0.06);  /* hairlines */
  --brand-border-strong: rgba(255, 255, 255, 0.14);  /* inputs, focus borders */
  --brand-text:          #f5f5f7;  /* primary text */
  --brand-text-idle:     #b5b5ba;  /* secondary */
  --brand-text-muted:    #8a8a8f;  /* tertiary */
  --brand-text-dim:      #6e6e73;  /* placeholders / disabled */
  --brand-accent:        #98131b;  /* legacy oxblood (auth-ui.css base); canonical accent is --ac-accent */
  --brand-marker:        #dc2626;  /* danger glyph / accent-hover */
  --brand-marker-hot:    #ef4444;
  --brand-danger-bg:     rgba(220, 38, 38, 0.06);
  --brand-danger-border: rgba(220, 38, 38, 0.45);

  /* ── Semantic action layer (retune the whole app from here) ─────────────── */
  /* Primary = dedicated indigo action colour (never red, never "delete").
     Held as an RGB triplet so every tinted fill/border/text derives from one source. */
  --ac-primary-rgb:     99, 102, 241;
  --ac-primary:         rgb(var(--ac-primary-rgb));
  --ac-primary-hover:   #7375f5;
  --ac-primary-fg:      #ffffff;
  --ac-primary-tint:    #a5a8f5;                            /* lightened indigo — text on a tinted fill */
  --ac-primary-soft:    rgba(var(--ac-primary-rgb), 0.14); /* tinted fill (badge, add-hover, panel) */
  --ac-primary-line:    rgba(var(--ac-primary-rgb), 0.40); /* tinted border */
  /* Focus ring = indigo — its own job, kept clear of the oxblood accent and red error. */
  --ac-focus:           var(--ac-primary);
  /* Accent = rationed oxblood — now ONLY the brand mark + favorite star. Focus, links, and
     add-affordances are indigo (--ac-primary); nav-selected is neutral gray (--ac-nav-active). */
  --ac-accent:          #b21f27;
  --ac-accent-hover:    #c8252e;
  --ac-accent-soft:     rgba(178, 31, 39, 0.14);
  /* Pin / spotlight = the favorite "pin a contact" mark (gold). Owner-chosen, distinct
     from the oxblood brand accent and from the share-level gold (--ac-share-private). */
  --ac-pin:             #e0a93b;
  --ac-pin-hover:       #ecbb55;
  --ac-pin-soft:        rgba(224, 169, 59, 0.16);
  --ac-pin-tint:        #f2cd7e;                      /* lightened gold — text on a pin-soft chip */
  --ac-pin-line:        rgba(224, 169, 59, 0.42);     /* pin chip border */
  /* Danger = distinct bright red, destructive actions + errors only. */
  --ac-danger:          #e5484d;
  --ac-danger-hover:    #ec5d62;
  --ac-danger-fg:       #ffffff;
  --ac-danger-soft:     rgba(229, 72, 77, 0.10);
  --ac-danger-border:   rgba(229, 72, 77, 0.42);
  /* Positive = verified / active / saved only. */
  --ac-success:         #3fb950;
  --ac-success-soft:    rgba(63, 185, 80, 0.12);
  /* "Go" = the begin/start action (Connect CTA). Emerald — kept distinct from status-green. */
  --ac-go:              #10b981;
  --ac-go-soft:         rgba(16, 185, 129, 0.08);
  --ac-go-line:         rgba(16, 185, 129, 0.42);
  --ac-go-icon:         #2dd4bf;
  /* Share-level scale — a state-colour ladder (private→searchable→open), not a warning.
     Open reuses --ac-success; private/searchable get their own tints. */
  --ac-share-private:         #d8b066;                      /* gold */
  --ac-share-private-soft:    rgba(212, 160, 80, 0.16);
  --ac-share-searchable:      #93c5fd;                      /* blue */
  --ac-share-searchable-soft: rgba(96, 165, 250, 0.16);

  /* Sidebar nav — neutral selected wash (was oxblood) + a per-item icon hue each. */
  --ac-nav-active:   var(--brand-control);
  --nav-contacts:    #fb7185;  /* rose — warm, human, "people" */
  --nav-cards:       #e6b450;  /* gold — the "membership card" metaphor */
  --nav-connect:     #2dd4bf;  /* teal — matches the Connect CTA */
  --nav-organizations: #a78bfa; /* violet — structure / org chart */
  --nav-settings:    #94a3b8;  /* slate — neutral utility */

  /* ── Typography (canonical two-typeface system) ────────────────────────── */
  --aspire-font-family-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --aspire-font-family-mono: 'Geist Mono', 'Consolas', ui-monospace, monospace;

  --aspire-font-size-xs: 0.75rem;
  --aspire-font-size-sm: 0.875rem;
  --aspire-font-size-base: 1rem;
  --aspire-font-size-lg: 1.125rem;
  --aspire-font-size-xl: 1.25rem;
  --aspire-font-size-2xl: 1.5rem;
  --aspire-font-size-3xl: 1.875rem;
  --aspire-font-size-4xl: 2.25rem;

  --aspire-font-weight-normal: 400;
  --aspire-font-weight-medium: 500;
  --aspire-font-weight-semibold: 600;
  --aspire-font-weight-bold: 700;

  --aspire-line-height-tight: 1.25;
  --aspire-line-height-normal: 1.5;
  --aspire-line-height-relaxed: 1.75;

  /* ── Spacing scale ─────────────────────────────────────────────────────── */
  --aspire-spacing-1: 0.25rem;
  --aspire-spacing-2: 0.5rem;
  --aspire-spacing-3: 0.75rem;
  --aspire-spacing-4: 1rem;
  --aspire-spacing-5: 1.25rem;
  --aspire-spacing-6: 1.5rem;
  --aspire-spacing-8: 2rem;
  --aspire-spacing-10: 2.5rem;
  --aspire-spacing-12: 3rem;
  --aspire-spacing-16: 4rem;

  /* ── Borders, radii, shadows, motion ───────────────────────────────────── */
  --aspire-border-width-thin: 1px;
  /* Subtle round — modern but restrained. */
  --aspire-border-radius-sm: 4px;
  --aspire-border-radius-md: 6px;
  --aspire-border-radius-lg: 8px;
  --aspire-border-radius-xl: 12px;   /* floating editor panels (identity / card / group / bio) */
  --aspire-border-radius-2xl: 16px;  /* business-card tile + empty-state panel */
  --aspire-border-radius-search: 10px;
  --aspire-border-radius-full: 9999px;

  --aspire-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --aspire-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --aspire-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.45), 0 4px 6px rgba(0, 0, 0, 0.35);
  /* Editor-panel elevation — the deep, soft float the Rev 2 form panels sit on. */
  --aspire-shadow-panel: 0 16px 44px rgba(0, 0, 0, 0.30);
  --aspire-shadow-panel-hover: 0 22px 56px rgba(0, 0, 0, 0.42);  /* business-card lift on hover */

  --aspire-transition-fast: 0.15s ease;
  --aspire-transition-base: 0.2s ease;

  --aspire-z-dropdown: 1000;
  --aspire-z-modal-backdrop: 1040;
  --aspire-z-modal: 1050;
  --aspire-z-tooltip: 1070;

  /* ── Status colors (brand variants) ────────────────────────────────────── */
  --aspire-success: #4ade80;
  --aspire-warning: #fbbf24;
  --aspire-danger: #f87171;
  --aspire-info: #60a5fa;

  /* ── Semantic surface/text/accent mappings → brand values ──────────────── */
  --aspire-surface:           var(--brand-canvas);
  --aspire-surface-elevated:  var(--brand-surface);
  --aspire-surface-sunken:    var(--brand-chrome);
  --aspire-surface-hover:     var(--brand-surface-hover);
  --aspire-surface-disabled:  var(--brand-surface-hover);

  --aspire-text-primary:   var(--brand-text);
  --aspire-text-heading:   var(--brand-text);
  --aspire-text-secondary: var(--brand-text-idle);
  --aspire-text-tertiary:  var(--brand-text-muted);
  --aspire-text-muted:     var(--brand-text-muted);
  --aspire-text-placeholder: var(--brand-text-dim);
  --aspire-text-disabled:  var(--brand-text-dim);

  --aspire-border:        var(--brand-border-soft);
  --aspire-border-strong: var(--brand-border-strong);
  --aspire-border-hover:  var(--brand-border-strong);

  --aspire-accent:        var(--ac-accent);
  --aspire-accent-hover:  var(--ac-accent-hover);
  --aspire-focus-ring:    rgba(var(--ac-primary-rgb), 0.5);  /* indigo — was a leftover tan */

  --aspire-primary:            var(--brand-control);
  --aspire-primary-hover:      var(--brand-control-hover);
  --aspire-primary-foreground: var(--brand-text);

  --aspire-input-bg:   var(--brand-surface);
  --aspire-popover-bg: var(--brand-surface);

  /* ── Viewer-card surface system (vc-*) — the "how others see this" card/preview
     surfaces, shared by the Cards grid tiles and the card/contact preview. ──────── */
  --vc-panel:        var(--brand-surface);       /* the card body */
  --vc-panel-border: var(--brand-border-soft);
  --vc-bg:           var(--brand-canvas);        /* sunken inset (playing-card content frame) */
  --vc-divider:      var(--brand-border-soft);
  --vc-glow:         rgba(var(--ac-primary-rgb), 0.12);  /* indigo hero glow (preview) */

  /* ── Bootstrap surface mapping (MAUI ships the Bootstrap base) ──────────── */
  --bs-body-bg: var(--brand-canvas);
  --bs-body-color: var(--brand-text);
  --bs-secondary-color: var(--brand-text-idle);
  --bs-tertiary-bg: var(--brand-surface);
  --bs-border-color: var(--brand-border-soft);
  --bs-card-bg: var(--brand-surface);
  --bs-card-color: var(--brand-text);
  --bs-link-color: var(--ac-primary);        /* links = indigo action; structural <a> inherit (design-system.css) */
  --bs-link-hover-color: var(--ac-primary-hover);

  color-scheme: dark;
}

/* Base element defaults so any host (MAUI WebView, Brave) lands on the brand
 * canvas immediately, before component styles load. */
html {
  background-color: var(--brand-canvas);
  color-scheme: dark;
}

body {
  background-color: var(--brand-canvas);
  color: var(--brand-text);
  font-family: var(--aspire-font-family-sans);
  font-size: var(--aspire-font-size-base);
  line-height: var(--aspire-line-height-normal);
}