/* ===================================================================
   Dashcrab Design System - Colors & Type
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand & surfaces ------------------------------------------ */
  --color-primary:        #7B53EA;
  --color-primary-light:  #F5F3FF;
  --color-primary-dark:   #5E3CCB;

  --color-bg:             #FAF7F4;
  --color-surface:        #FFFFFF;
  --color-surface-muted:  #F9F8F6;
  --color-border:         #E8E4F0;

  /* ---- Text ------------------------------------------------------ */
  --color-text:           #1A1A2E;
  --color-text-secondary: #6B6B8A;
  --color-text-muted:     #9B9BB4;
  --color-text-on-primary:#FFFFFF;

  /* ---- Platform dot colors --------------------------------------- */
  --color-meta:           #1877F2;
  --color-tiktok:         #00C8A0;
  --color-google:         #FBBC04;
  --color-ga4:            #F9AB00;
  --color-instagram:      #C13584;
  --color-linkedin:       #0A66C2;

  /* ---- Semantic feedback ----------------------------------------- */
  --color-success:        #059669;
  --color-success-bg:     #D1FAE5;
  --color-success-text:   #065F46;
  --color-warning:        #D97706;
  --color-warning-bg:     #FEF3C7;
  --color-warning-text:   #92400E;
  --color-danger:         #DC2626;
  --color-danger-bg:      #FEE2E2;
  --color-danger-text:    #991B1B;
  --color-neutral-bg:     #F3F4F6;
  --color-neutral-text:   #4B5563;

  /* ---- Typography ------------------------------------------------ */
  --font-title: 'Fraunces', Georgia, serif;
  --font-body:  'Inter', system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --type-display:   700 40px/1.1 var(--font-title);
  --type-h1:        700 32px/1.1 var(--font-title);
  --type-h2:        700 28px/1.1 var(--font-title);
  --type-h3:        600 22px/1.2 var(--font-title);
  --type-eyebrow:   600 11px/1.4 var(--font-body);
  --type-body:      400 14px/1.5 var(--font-body);
  --type-body-md:   500 14px/1.5 var(--font-body);
  --type-body-sm:   400 13px/1.5 var(--font-body);
  --type-label:     600 13px/1.4 var(--font-body);
  --type-caption:   400 12px/1.4 var(--font-body);
  --type-button:    500 14px/1   var(--font-body);
  --type-table-th:  600 12px/1.2 var(--font-body);
  --type-table-td:  400 13px/1.4 var(--font-body);
  --type-kpi:       700 32px/1   var(--font-title);

  /* ---- Radii & elevation ----------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-nav: 10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 4px 24px rgba(0, 0, 0, 0.08);

  /* ---- Spacing scale (4px base) ---------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Motion ---------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-1:  0.15s;
  --duration-2:  0.25s;
}

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: var(--type-display); margin: 0 0 8px; color: var(--color-text); letter-spacing: -0.01em; }
h2 { font: var(--type-h1);      margin: 0 0 8px; color: var(--color-text); letter-spacing: -0.005em; }
h3 { font: var(--type-h2);      margin: 0 0 8px; color: var(--color-text); }
h4 { font: var(--type-h3);      margin: 0 0 6px; color: var(--color-text); }
p  { margin: 0 0 12px; }

small { font: var(--type-caption); color: var(--color-text-muted); }
code  { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-surface-muted);
        padding: 1px 6px; border-radius: 4px; border: 1px solid var(--color-border); }

a { color: var(--color-primary); text-decoration: none; font-weight: 500; }
a:hover { color: var(--color-primary-dark); }

.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}

.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.font-title     { font-family: var(--font-title); }
.font-body      { font-family: var(--font-body); }

.tabular { font-variant-numeric: tabular-nums; }