/* ============================================================
   GPLabTech Design System — Colors & Typography
   Generated: April 2026
   ============================================================ */

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

/* ── BRAND FONT: TypeWritersSubstitute Black ────────────── */
@font-face {
  font-family: 'TypeWritersSubstitute';
  src: url('/fonts/TypeWritersSubstitute-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ── BRAND COLORS ─────────────────────────────────────── */
  --color-navy-950:   #060d1f;
  --color-navy-900:   #0b1f4f;   /* Primary brand navy */
  --color-navy-800:   #102668;
  --color-navy-700:   #163080;
  --color-navy-600:   #1d3ea3;
  --color-navy-100:   #e8edff;
  --color-navy-50:    #f0f4ff;

  --color-teal-900:   #003d38;
  --color-teal-700:   #007569;
  --color-teal-600:   #008a7c;
  --color-teal-500:   #009e8e;   /* Primary brand teal */
  --color-teal-400:   #00b8a5;
  --color-teal-300:   #33c8b8;
  --color-teal-100:   #d0f5f1;
  --color-teal-50:    #e8faf8;

  /* ── NEUTRAL SCALE ────────────────────────────────────── */
  --color-slate-950:  #0f172a;
  --color-slate-900:  #1e293b;
  --color-slate-800:  #334155;
  --color-slate-700:  #475569;
  --color-slate-600:  #64748b;
  --color-slate-500:  #94a3b8;
  --color-slate-400:  #cbd5e1;
  --color-slate-300:  #e2e8f0;
  --color-slate-200:  #f1f5f9;
  --color-slate-100:  #f8fafc;
  --color-white:      #ffffff;

  /* ── SEMANTIC COLORS ──────────────────────────────────── */
  --color-success-700: #15803d;
  --color-success-500: #22c55e;
  --color-success-100: #dcfce7;
  --color-success-50:  #f0fdf4;

  --color-warning-700: #b45309;
  --color-warning-500: #f59e0b;
  --color-warning-100: #fef3c7;
  --color-warning-50:  #fffbeb;

  --color-error-700:   #b91c1c;
  --color-error-500:   #ef4444;
  --color-error-100:   #fee2e2;
  --color-error-50:    #fef2f2;

  --color-info-700:    #1d4ed8;
  --color-info-500:    #3b82f6;
  --color-info-100:    #dbeafe;
  --color-info-50:     #eff6ff;

  /* ── DATA VISUALIZATION PALETTE ──────────────────────── */
  --color-dataviz-1:  #009e8e;   /* teal */
  --color-dataviz-2:  #0b1f4f;   /* navy */
  --color-dataviz-3:  #f59e0b;   /* amber */
  --color-dataviz-4:  #f87171;   /* coral */
  --color-dataviz-5:  #6ee7b7;   /* sage */
  --color-dataviz-6:  #a78bfa;   /* violet */

  /* ── SEMANTIC SURFACE TOKENS ──────────────────────────── */
  --surface-bg:           var(--color-slate-100);
  --surface-card:         var(--color-white);
  --surface-sidebar:      var(--color-navy-900);
  --surface-overlay:      rgba(11, 31, 79, 0.5);
  --surface-elevated:     var(--color-white);

  --fg-primary:           var(--color-slate-950);
  --fg-secondary:         var(--color-slate-700);
  --fg-muted:             var(--color-slate-600);
  --fg-disabled:          var(--color-slate-500);
  --fg-inverse:           var(--color-white);
  --fg-brand:             var(--color-navy-900);
  --fg-accent:            var(--color-teal-500);
  --fg-link:              var(--color-teal-600);
  --fg-link-hover:        var(--color-teal-500);

  --border-default:       var(--color-slate-300);
  --border-subtle:        var(--color-slate-200);
  --border-focus:         var(--color-teal-500);
  --border-error:         var(--color-error-500);
  --border-strong:        var(--color-slate-500);

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font-brand:     'TypeWritersSubstitute', 'Sora', sans-serif;  /* Brand Black — headlines, hero */
  --font-display:   'Sora', sans-serif;
  --font-body:      'DM Sans', sans-serif;
  --font-mono:      'JetBrains Mono', monospace;

  --fw-regular:     400;  /* @kind font */
  --fw-medium:      500;  /* @kind font */
  --fw-semibold:    600;  /* @kind font */
  --fw-bold:        700;  /* @kind font */

  --lh-display:     1.2;  /* @kind font */
  --lh-heading:     1.3;  /* @kind font */
  --lh-body:        1.6;  /* @kind font */
  --lh-mono:        1.5;  /* @kind font */
  --lh-tight:       1.1;  /* @kind font */

  --ls-tight:       -0.03em;
  --ls-normal:       0em;
  --ls-wide:         0.04em;
  --ls-caps:         0.08em;

  /* Type scale */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   60px;

  /* Semantic type tokens */
  --type-h1:      700 var(--text-4xl)/var(--lh-display) var(--font-display);
  --type-h2:      700 var(--text-3xl)/var(--lh-display) var(--font-display);
  --type-h3:      600 var(--text-2xl)/var(--lh-heading) var(--font-display);
  --type-h4:      600 var(--text-xl)/var(--lh-heading) var(--font-body);
  --type-h5:      600 var(--text-lg)/var(--lh-heading) var(--font-body);
  --type-h6:      600 var(--text-md)/var(--lh-heading) var(--font-body);
  --type-body-lg: 400 var(--text-md)/var(--lh-body) var(--font-body);
  --type-body:    400 var(--text-base)/var(--lh-body) var(--font-body);
  --type-body-sm: 400 var(--text-sm)/var(--lh-body) var(--font-body);
  --type-label:   500 var(--text-sm)/1.4 var(--font-body);
  --type-caption: 400 var(--text-xs)/1.4 var(--font-body);
  --type-code:    400 var(--text-sm)/var(--lh-mono) var(--font-mono);
  --type-stat:    700 var(--text-3xl)/1.1 var(--font-display);

  /* ── SPACING ──────────────────────────────────────────── */
  --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;
  --space-20:  80px;
  --space-24:  96px;

  /* ── BORDER RADII ─────────────────────────────────────── */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* ── SHADOWS / ELEVATION ──────────────────────────────── */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.09), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-3: 0 12px 40px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.08);
  --shadow-focus: 0 0 0 3px rgba(0,158,142,0.25);

  /* ── ANIMATION ────────────────────────────────────────── */
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --ease-out:      ease-out;  /* @kind other */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --dur-fast:      150ms;  /* @kind other */
  --dur-base:      250ms;  /* @kind other */
  --dur-slow:      400ms;  /* @kind other */
}

/* ── BASE ELEMENT STYLES ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font: var(--type-body);
  color: var(--fg-primary);
  background: var(--surface-bg);
  -webkit-font-smoothing: antialiased;
}

h1 { font: var(--type-h1); letter-spacing: var(--ls-tight); color: var(--fg-brand); }
h2 { font: var(--type-h2); letter-spacing: var(--ls-tight); color: var(--fg-brand); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }
h5 { font: var(--type-h5); }
h6 { font: var(--type-h6); }

p  { font: var(--type-body); margin: 0 0 1em; }
small { font: var(--type-caption); color: var(--fg-muted); }
code, pre { font: var(--type-code); background: var(--color-slate-200); border-radius: var(--radius-xs); padding: 0.15em 0.4em; }

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }