/* ============================================================
   GR Reporting — Design System
   Clean, light-themed professional dashboard.
   Brand purple (#43165C) used as a subtle accent only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap');

:root {
  /* ── Canvas & Surface ────────────────────────────────── */
  --color-bg:              #F8FAFC;   /* Slate 50 — page canvas */
  --color-surface:         #FFFFFF;   /* Pure white — card surfaces */
  --color-surface-hover:   #F8FAFC;   /* Slate 50 — row hovers */
  --color-surface-subtle:  #F1F5F9;   /* Slate 100 — table headers, wells */
  --color-surface-elevated:#FFFFFF;

  /* ── Text ─────────────────────────────────────────────── */
  --color-text-primary:    #0F172A;   /* Slate 900 — headings, numbers */
  --color-text-body:       #334155;   /* Slate 700 — body text */
  --color-text-secondary:  #64748B;   /* Slate 500 — labels, meta */
  --color-text-muted:      #94A3B8;   /* Slate 400 — placeholders */

  /* ── Borders ──────────────────────────────────────────── */
  --color-border:          #E2E8F0;   /* Slate 200 — card hairlines */
  --color-border-strong:   #CBD5E1;   /* Slate 300 — hover / inputs */
  --color-border-subtle:   #F1F5F9;   /* Slate 100 — dividers */

  /* ── Brand Accent (Purple — the 10% signal) ──────────── */
  --color-brand:           #43165C;   /* GR Purple */
  --color-brand-hover:     #351149;   /* Darker for hover */
  --color-brand-light:     #F3EEFF;   /* 5% purple tint for active bg */
  --color-brand-text:      #5B2D7A;   /* Readable purple for inline text */

  /* ── Status Colours ───────────────────────────────────── */
  --color-success:         #16A34A;
  --color-success-bg:      #DCFCE7;
  --color-warning:         #D97706;
  --color-warning-bg:      #FEF3C7;
  --color-danger:          #DC2626;
  --color-danger-bg:       #FEE2E2;
  --color-info:            #2563EB;
  --color-info-bg:         #DBEAFE;

  /* ── GR Brand Palette (reference only) ────────────────── */
  --gr-purple:             #43165C;
  --gr-yellow:             #FCE500;
  --gr-orange:             #EE7203;

  /* ── Typography ───────────────────────────────────────── */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* ── Spacing Scale ────────────────────────────────────── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;
  --space-7: 32px;  --space-8: 48px;  --space-9: 64px;

  /* ── Radius ───────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill:  999px;

  /* ── Shadows (ultra-soft, slate-tinted) ────────────────── */
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 24px -4px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.05);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-spring: 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ── Component Tokens ─────────────────────────────────── */
  --card-bg:      var(--color-surface);
  --card-border:  var(--color-border);
  --card-radius:  var(--radius-lg);
  --card-padding: var(--space-6);

  --sidebar-width:  250px;
  --sidebar-bg:     var(--color-surface);
  --header-height:  64px;
  --header-bg:      rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Global Reset
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
}

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

img {
  max-width: 100%;
  display: block;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   Utility Classes
   ============================================================ */

/* Tabular nums for financial data */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Card */
.gr-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.gr-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

/* Button — brand purple */
.gr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background-color: var(--color-brand);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 1px 2px rgba(67, 22, 92, 0.2);
}

.gr-button:hover {
  background-color: var(--color-brand-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(67, 22, 92, 0.15);
}

/* Badges */
.gr-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.gr-badge.success { background: var(--color-success-bg); color: var(--color-success); }
.gr-badge.warning { background: var(--color-warning-bg); color: var(--color-warning); }
.gr-badge.danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.gr-badge.info    { background: var(--color-info-bg);    color: var(--color-info); }
.gr-badge.neutral { background: var(--color-surface-subtle); color: var(--color-text-secondary); }