/* ==========================================================================
   BrickManagement Design System — bundle for the GestCo CRM page.
   Imported from Claude Design project ed71247c (BrickManagement Design System):
   fonts + colors + base + effects + radius + spacing + typography tokens.
   Scope: loaded only on the /crm page (layouts/crm.blade.php).
   ========================================================================== */

/* ── Webfonts (Google Fonts) ── must stay first (@import rule). */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500&family=IBM+Plex+Mono:wght@400;500&family=Schibsted+Grotesk:wght@400;500&family=Space+Grotesk:wght@400;500&display=swap');

/* ── Color tokens ── */
:root {
  --pw-50:  #F2F2FF;
  --pw-100: #E4E4FF;
  --pw-200: #C9C8FF;
  --pw-300: #ABAAFF;
  --pw-400: #8886FF;
  --pw-500: #6260FF;
  --pw-600: #504EE6;
  --pw-700: #413FBE;
  --pw-800: #312F8F;
  --pw-900: #242369;

  --n-0:   #FFFFFF;
  --n-50:  #F8F8FB;
  --n-100: #F1F1F6;
  --n-150: #E9E9F1;
  --n-200: #DCDCE8;
  --n-300: #C3C3D5;
  --n-400: #9696AC;
  --n-500: #6F6F89;
  --n-600: #565670;
  --n-700: #414159;
  --n-800: #242C46;
  --n-900: #141D38;
  --n-950: #0E1630;

  --green-50:  #E9F7EE; --green-600: #16A34A; --green-700: #15803D; --green-800: #166534;
  --amber-50:  #FDF3E3; --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E;
  --red-50:    #FCECEC; --red-600:   #DC2626; --red-700:   #B91C1C; --red-800:   #991B1B;

  --surface:              var(--n-0);
  --surface-2:            var(--n-50);
  --surface-sunken:       var(--n-100);
  --surface-lavender:     var(--pw-100);
  --surface-lavender-soft:var(--pw-50);

  --border-subtle: var(--n-150);
  --border:        var(--n-200);
  --border-strong: var(--n-300);

  --text-body:      var(--n-900);
  --text-strong:    var(--n-950);
  --text-secondary: var(--n-700);
  --text-muted:     var(--n-500);
  --text-faint:     var(--n-400);
  --text-link:      var(--pw-600);
  --text-heading:   var(--pw-500);
  --text-on-accent: var(--n-0);

  --accent:            var(--pw-500);
  --accent-hover:      var(--pw-600);
  --accent-press:      var(--pw-700);
  --accent-strong:     var(--pw-700);
  --accent-tint:       var(--pw-100);
  --accent-tint-soft:  var(--pw-50);
  --accent-border:     var(--pw-200);

  --success-fg: var(--green-800); --success-solid: var(--green-600); --success-bg: var(--green-50); --success-border: #BFE6CC;
  --warning-fg: var(--amber-800); --warning-solid: var(--amber-600); --warning-bg: var(--amber-50); --warning-border: #F3D9A6;
  --danger-fg:  var(--red-800);   --danger-solid:  var(--red-600);   --danger-bg:  var(--red-50);   --danger-border:  #F2C4C4;
  --info-fg:    var(--pw-700);    --info-solid:    var(--pw-500);    --info-bg:    var(--pw-100);    --info-border:    var(--pw-200);

  --focus-ring: 0 0 0 3px rgba(98, 96, 255, .35);
}

/* ── Base element defaults ── */
:root { color-scheme: light; --body-font: var(--font-sans); }

/* ── Effects tokens ── */
:root {
  --border-width: 1px;
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(20, 29, 56, .06);
  --shadow-overlay: 0 8px 28px -8px rgba(20, 29, 56, .22);
  --transition-fast: 110ms ease;
  --transition:      160ms ease;
  --transition-slow: 240ms ease;
}

/* ── Radius tokens ── */
:root {
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;
}

/* ── Spacing tokens ── */
:root {
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px; --space-4:  16px;
  --space-5:  20px; --space-6:  24px; --space-7:  28px; --space-8:  32px;
  --space-10: 40px; --space-12: 48px;
}

/* ── Typography tokens ── */
:root {
  --font-display: "Space Grotesk", "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fw-normal: 400; --fw-medium: 500;
}