/* ============================================================
   BRAVE2GROW DESIGN SYSTEM — Bundle (gerado)
   NÃO edite este arquivo à mão. Gere com:
       python manage.py build_designsystem
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ===== colors.css ===== */
/* ============================================
   BRAVE2GROW — COLOR TOKENS
   Derived from logo: purple/violet crystal + red/coral accent
   ============================================ */

:root {
  /* Brand Purple (primary) */
  --color-purple-950: oklch(15% 0.18 292);
  --color-purple-900: oklch(20% 0.22 292);
  --color-purple-800: oklch(28% 0.26 292);
  --color-purple-700: oklch(36% 0.28 292);
  --color-purple-600: oklch(44% 0.28 292);
  --color-purple-500: oklch(52% 0.27 292);
  --color-purple-400: oklch(62% 0.24 292);
  --color-purple-300: oklch(72% 0.20 292);
  --color-purple-200: oklch(82% 0.14 292);
  --color-purple-100: oklch(92% 0.07 292);
  --color-purple-50:  oklch(97% 0.03 292);

  /* Brand Red/Coral (accent) */
  --color-red-950: oklch(18% 0.20 20);
  --color-red-900: oklch(24% 0.24 20);
  --color-red-800: oklch(32% 0.28 20);
  --color-red-700: oklch(40% 0.30 20);
  --color-red-600: oklch(50% 0.30 20);
  --color-red-500: oklch(60% 0.28 20);
  --color-red-400: oklch(68% 0.24 20);
  --color-red-300: oklch(76% 0.20 20);
  --color-red-200: oklch(85% 0.14 20);
  --color-red-100: oklch(93% 0.07 20);
  --color-red-50:  oklch(97% 0.03 20);

  /* Neutral */
  --color-neutral-950: oklch(8%  0.01 285);
  --color-neutral-900: oklch(12% 0.015 285);
  --color-neutral-800: oklch(18% 0.015 285);
  --color-neutral-700: oklch(26% 0.012 285);
  --color-neutral-600: oklch(38% 0.010 285);
  --color-neutral-500: oklch(52% 0.008 285);
  --color-neutral-400: oklch(65% 0.006 285);
  --color-neutral-300: oklch(78% 0.005 285);
  --color-neutral-200: oklch(88% 0.004 285);
  --color-neutral-100: oklch(94% 0.003 285);
  --color-neutral-50:  oklch(98% 0.002 285);

  /* Semantic */
  --color-success-700: oklch(38% 0.14 160);
  --color-success-500: oklch(56% 0.17 160);
  --color-success-100: oklch(94% 0.05 160);
  --color-warning-700: oklch(52% 0.16 70);
  --color-warning-500: oklch(72% 0.18 70);
  --color-warning-100: oklch(96% 0.05 70);
  --color-error-700:   oklch(40% 0.20 28);
  --color-error-500:   oklch(58% 0.22 28);
  --color-error-100:   oklch(95% 0.05 28);
  --color-info-700:    oklch(42% 0.18 250);
  --color-info-500:    oklch(60% 0.20 250);
  --color-info-100:    oklch(94% 0.05 250);

  /* Semantic Aliases */
  --color-brand:           var(--color-purple-500);
  --color-brand-dark:      var(--color-purple-700);
  --color-brand-light:     var(--color-purple-300);
  --color-accent:          var(--color-red-500);
  --color-accent-dark:     var(--color-red-700);

  /* Surfaces */
  --surface-app:           var(--color-neutral-950);
  --surface-base:          var(--color-neutral-900);
  --surface-raised:        var(--color-neutral-800);
  --surface-overlay:       var(--color-neutral-700);
  --surface-card:          var(--color-neutral-900);
  --surface-card-hover:    var(--color-neutral-800);

  /* Text */
  --text-primary:          var(--color-neutral-50);
  --text-secondary:        var(--color-neutral-300);
  --text-tertiary:         var(--color-neutral-500);
  --text-disabled:         var(--color-neutral-600);
  --text-on-brand:         #ffffff;
  --text-inverse:          var(--color-neutral-950);

  /* Borders */
  --border-subtle:         var(--color-neutral-800);
  --border-default:        var(--color-neutral-700);
  --border-strong:         var(--color-neutral-500);
  --border-brand:          var(--color-purple-500);
  --border-accent:         var(--color-red-500);

  /* Interactive */
  --interactive-primary:   var(--color-purple-500);
  --interactive-primary-hover: var(--color-purple-400);
  --interactive-primary-active: var(--color-purple-600);
  --interactive-accent:    var(--color-red-500);
  --interactive-accent-hover: var(--color-red-400);
}

/* ===== typography.css ===== */
/* ============================================
   BRAVE2GROW — TYPOGRAPHY TOKENS
   Geometric Modern: DM Sans (body) + Space Grotesk (display)
   ============================================ */


:root {
  /* ── Font Families ── */
  --font-display:  'Space Grotesk', system-ui, sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* ── Font Weights ── */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;

  /* ── Type Scale ── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;
  --text-7xl:   4.5rem;

  /* ── Line Heights ── */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  /* ── Letter Spacing ── */
  --ls-tight:   -0.04em;
  --ls-snug:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.16em;

  /* ── Semantic Type Roles ── */
  --type-hero-size:        var(--text-6xl);
  --type-hero-weight:      var(--fw-bold);
  --type-hero-family:      var(--font-display);
  --type-hero-lh:          var(--lh-tight);
  --type-hero-ls:          var(--ls-tight);

  --type-h1-size:          var(--text-5xl);
  --type-h1-weight:        var(--fw-bold);
  --type-h1-family:        var(--font-display);
  --type-h1-lh:            var(--lh-tight);
  --type-h1-ls:            var(--ls-snug);

  --type-h2-size:          var(--text-4xl);
  --type-h2-weight:        var(--fw-semibold);
  --type-h2-family:        var(--font-display);
  --type-h2-lh:            var(--lh-snug);
  --type-h2-ls:            var(--ls-snug);

  --type-h3-size:          var(--text-3xl);
  --type-h3-weight:        var(--fw-semibold);
  --type-h3-family:        var(--font-display);
  --type-h3-lh:            var(--lh-snug);
  --type-h3-ls:            var(--ls-snug);

  --type-h4-size:          var(--text-xl);
  --type-h4-weight:        var(--fw-semibold);
  --type-h4-family:        var(--font-display);
  --type-h4-lh:            var(--lh-snug);

  --type-h5-size:          var(--text-lg);
  --type-h5-weight:        var(--fw-medium);
  --type-h5-family:        var(--font-body);

  --type-body-size:        var(--text-base);
  --type-body-weight:      var(--fw-regular);
  --type-body-family:      var(--font-body);
  --type-body-lh:          var(--lh-normal);

  --type-body-sm-size:     var(--text-sm);
  --type-body-sm-weight:   var(--fw-regular);
  --type-body-sm-family:   var(--font-body);
  --type-body-sm-lh:       var(--lh-normal);

  --type-label-size:       var(--text-sm);
  --type-label-weight:     var(--fw-medium);
  --type-label-family:     var(--font-body);
  --type-label-ls:         var(--ls-wide);

  --type-caption-size:     var(--text-xs);
  --type-caption-weight:   var(--fw-regular);
  --type-caption-family:   var(--font-body);

  --type-overline-size:    var(--text-xs);
  --type-overline-weight:  var(--fw-semibold);
  --type-overline-family:  var(--font-body);
  --type-overline-ls:      var(--ls-widest);

  --type-code-size:        var(--text-sm);
  --type-code-family:      var(--font-mono);
  --type-code-weight:      var(--fw-regular);
}

/* ===== spacing.css ===== */
/* ============================================
   BRAVE2GROW — SPACING TOKENS
   4px base grid
   ============================================ */

:root {
  /* ── Base Scale ── */
  --space-0:    0;
  --space-0-5:  0.125rem;
  --space-1:    0.25rem;
  --space-1-5:  0.375rem;
  --space-2:    0.5rem;
  --space-2-5:  0.625rem;
  --space-3:    0.75rem;
  --space-3-5:  0.875rem;
  --space-4:    1rem;
  --space-5:    1.25rem;
  --space-6:    1.5rem;
  --space-7:    1.75rem;
  --space-8:    2rem;
  --space-10:   2.5rem;
  --space-12:   3rem;
  --space-14:   3.5rem;
  --space-16:   4rem;
  --space-20:   5rem;
  --space-24:   6rem;
  --space-32:   8rem;
  --space-40:   10rem;
  --space-48:   12rem;

  /* ── Semantic Spacing ── */
  --gap-xs:         var(--space-1);
  --gap-sm:         var(--space-2);
  --gap-md:         var(--space-4);
  --gap-lg:         var(--space-6);
  --gap-xl:         var(--space-8);
  --gap-2xl:        var(--space-12);
  --gap-3xl:        var(--space-16);

  /* ── Component Padding ── */
  --pad-btn-sm:     var(--space-2) var(--space-3);
  --pad-btn-md:     var(--space-2-5) var(--space-5);
  --pad-btn-lg:     var(--space-3) var(--space-6);
  --pad-input:      var(--space-2-5) var(--space-3-5);
  --pad-card-sm:    var(--space-4);
  --pad-card-md:    var(--space-6);
  --pad-card-lg:    var(--space-8);

  /* ── Border Radius ── */
  --radius-none:    0;
  --radius-sm:      0.25rem;
  --radius-md:      0.5rem;
  --radius-lg:      0.75rem;
  --radius-xl:      1rem;
  --radius-2xl:     1.5rem;
  --radius-3xl:     2rem;
  --radius-full:    9999px;

  /* ── Semantic Radius ── */
  --radius-btn:     var(--radius-md);
  --radius-input:   var(--radius-md);
  --radius-card:    var(--radius-xl);
  --radius-badge:   var(--radius-full);
  --radius-avatar:  var(--radius-full);
  --radius-dialog:  var(--radius-2xl);
  --radius-tooltip: var(--radius-md);

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --sidebar-width:  260px;
  --topbar-height:  64px;
}

/* ===== shadows.css ===== */
/* ============================================
   BRAVE2GROW — SHADOW & ELEVATION TOKENS
   ============================================ */

:root {
  /* ── Elevation (dark-mode optimized, purple-tinted) ── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:   0 2px 4px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.35);
  --shadow-xl:   0 16px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,0.65);

  /* ── Brand Glow (purple) ── */
  --glow-brand-sm:  0 0 8px  oklch(52% 0.27 292 / 0.35);
  --glow-brand-md:  0 0 20px oklch(52% 0.27 292 / 0.45);
  --glow-brand-lg:  0 0 40px oklch(52% 0.27 292 / 0.5);

  /* ── Accent Glow (red/coral) ── */
  --glow-accent-sm: 0 0 8px  oklch(60% 0.28 20 / 0.35);
  --glow-accent-md: 0 0 20px oklch(60% 0.28 20 / 0.45);

  /* ── Inner Shadows ── */
  --inset-sm:    inset 0 1px 2px rgba(0,0,0,0.3);
  --inset-md:    inset 0 2px 6px rgba(0,0,0,0.4);

  /* ── Semantic ── */
  --shadow-card:    var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg), var(--glow-brand-sm);
  --shadow-dialog:  var(--shadow-2xl);
  --shadow-btn-primary: var(--glow-brand-sm);
  --shadow-btn-primary-hover: var(--glow-brand-md);

  /* ── Transitions ── */
  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    100ms;
  --duration-normal:  200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  --transition-default: all var(--duration-normal) var(--ease-default);
  --transition-colors:  color var(--duration-fast) var(--ease-default),
                        background-color var(--duration-fast) var(--ease-default),
                        border-color var(--duration-fast) var(--ease-default),
                        box-shadow var(--duration-normal) var(--ease-default);
}