/* ============================================================
   Geinfor Design System — Foundations
   Colors + Type tokens for ERP / industrial-software UI.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------------------------------------------------------
     BRAND — coral/red primary, with warm orange + violet
     gradient territory. Pulled from the hex-logo mark.
     --------------------------------------------------------- */
  --brand-primary:        #da5661;   /* canonical coral */
  --brand-primary-hover:  #c64752;
  --brand-primary-press:  #b03d48;
  --brand-primary-soft:   #fde9eb;   /* tinted background */
  --brand-primary-ink:    #7a2530;   /* text on soft */

  --brand-orange:         #f0a060;   /* warm gradient stop */
  --brand-amber:          #f7c486;
  --brand-violet:         #7c5cff;   /* secondary accent */
  --brand-violet-soft:    #ece8ff;
  --brand-violet-deep:    #4f3dbf;

  /* Signature gradients */
  --grad-brand:    linear-gradient(135deg, #da5661 0%, #f0a060 100%);
  --grad-violet:   linear-gradient(135deg, #8b5cf6 0%, #da5661 100%);
  --grad-cool:     linear-gradient(135deg, #6d6df0 0%, #a78bfa 100%);
  --grad-hero:     linear-gradient(135deg, #1a1f3a 0%, #2d1f4a 50%, #4a2548 100%);

  /* ---------------------------------------------------------
     NEUTRALS — cool grays with a slight blue tilt to feel
     technical / data-dense. Sidebar is near-black navy.
     --------------------------------------------------------- */
  --navy-950: #0b1124;   /* sidebar background */
  --navy-900: #111a36;
  --navy-800: #1b2547;
  --navy-700: #2a3866;

  --ink-900:  #0f172a;   /* primary headings */
  --ink-800:  #1e293b;
  --ink-700:  #334155;   /* body text */
  --ink-600:  #475569;   /* secondary body */
  --ink-500:  #64748b;   /* meta / labels */
  --ink-400:  #94a3b8;   /* muted */
  --ink-300:  #cbd5e1;   /* dividers strong */
  --ink-200:  #e2e8f0;   /* borders */
  --ink-100:  #f1f5f9;   /* subtle bg */
  --ink-50:   #f8fafc;   /* app bg */
  --white:    #ffffff;

  /* ---------------------------------------------------------
     SEMANTIC — status & data viz. Soft tinted surfaces are
     paired with a solid icon-tile and a solid value color.
     --------------------------------------------------------- */
  --success:        #10b981;
  --success-soft:   #e8f7f0;
  --success-ink:    #047857;

  --info:           #3b82f6;
  --info-soft:      #e8eefb;
  --info-ink:       #1e40af;

  --warning:        #f59e0b;
  --warning-soft:   #fdf1de;
  --warning-ink:    #b45309;

  --danger:         #ef4444;
  --danger-soft:    #fde8e8;
  --danger-ink:     #b91c1c;

  --purple:         #8b5cf6;
  --purple-soft:    #f0ebfd;
  --purple-ink:     #5b21b6;

  /* Chart palette — used in time-series and donut visualisations */
  --chart-1: #3b82f6;   /* blue */
  --chart-2: #8b5cf6;   /* violet */
  --chart-3: #10b981;   /* mint */
  --chart-4: #f59e0b;   /* amber */
  --chart-5: #ef4444;   /* coral */
  --chart-6: #06b6d4;   /* cyan */
  --chart-7: #a78bfa;   /* lavender */
  --chart-8: #14b8a6;   /* teal */

  /* ---------------------------------------------------------
     SURFACES — application chrome
     --------------------------------------------------------- */
  --bg-app:        var(--ink-50);
  --bg-surface:    var(--white);
  --bg-sunken:     var(--ink-100);
  --bg-sidebar:    var(--navy-950);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);

  /* ---------------------------------------------------------
     TYPOGRAPHY — Inter throughout. Tabular numerals on for
     financial data. Tight tracking on large display sizes.
     --------------------------------------------------------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 56px;   /* hero / marketing */
  --fs-h1:      32px;   /* page title */
  --fs-h2:      24px;   /* section title */
  --fs-h3:      18px;   /* card title */
  --fs-h4:      16px;   /* sub-title */
  --fs-body:    14px;   /* default UI text */
  --fs-body-lg: 16px;
  --fs-small:   13px;
  --fs-xs:      12px;   /* meta, table labels */

  --fs-metric-xl: 40px; /* KPI hero number */
  --fs-metric:    28px; /* KPI card number */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------------------------------------------------------
     SPACING / RADIUS / SHADOW
     --------------------------------------------------------- */
  --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;
  --space-16: 64px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* cards, tiles */
  --radius-lg: 16px;   /* large surfaces */
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-brand: 0 10px 30px rgba(218, 86, 97, 0.25);
  --shadow-inset: inset 0 0 0 1px var(--border-default);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.4, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply directly to elements
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-800);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--ink-900);
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-800);
}

p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--ink-700);
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); }
.small   { font-size: var(--fs-small); color: var(--ink-600); }
.meta    {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  letter-spacing: var(--tracking-wide);
}
.label-caps {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.metric-xl {
  font-size: var(--fs-metric-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.metric {
  font-size: var(--fs-metric);
  font-weight: 700;
  letter-spacing: var(--tracking-snug);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

code, .mono, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-primary-hover); }