/* =========================================================
   Refractal — Design Tokens
   Colors + Typography
   ========================================================= */

/* ---------- Fonts ---------- */
/* Refractal's wordmark is set in a clean, slightly-wide geometric sans
   (Poppins / Figtree family). We use Figtree as the primary type face —
   neutral, corporate-friendly, wide apertures, excellent at display sizes.
   Inter is the reading companion. JetBrains Mono for anything code/data.
   If hosting locally, drop .ttf/.woff2 in /fonts and swap @import for @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* =======================================================
     COLOR — BRAND
     Derived from the isometric cube logo: a gradient that
     moves violet → indigo → teal. These are the spine of
     the brand.
     ======================================================= */
  --brand-violet: #B49CFF;       /* top face of cube, light lilac */
  --brand-violet-deep: #8E6FF3;  /* violet pushed darker */
  --brand-indigo: #6B72EE;       /* front face midtone */
  --brand-periwinkle: #7A9BF0;   /* blue-leaning transition */
  --brand-teal: #4FC6BF;         /* side face, cyan-green */
  --brand-teal-deep: #2EA39C;
  --brand-mint: #8FDCD2;

  /* The signature gradient (logo DNA) */
  --brand-gradient: linear-gradient(135deg, #B49CFF 0%, #8E6FF3 28%, #6B72EE 55%, #4FC6BF 100%);
  --brand-gradient-soft: linear-gradient(135deg, #EADFFF 0%, #DCE5FF 50%, #D7F2EE 100%);
  --brand-gradient-radial: radial-gradient(ellipse at 30% 20%, #B49CFF 0%, #6B72EE 45%, #4FC6BF 100%);

  /* =======================================================
     COLOR — NEUTRALS
     Refractal is B2B / boardroom. Neutrals are cool-cream
     in light mode (enterprise trust, not sterile white) and
     a graphite/navy in dark mode.
     ======================================================= */
  --ink-900: #0B0D12;   /* near-black, body text on light bg */
  --ink-800: #14171F;
  --ink-700: #242834;
  --ink-600: #3B4050;
  --ink-500: #5B6070;   /* secondary text */
  --ink-400: #878C9C;   /* tertiary text / meta */
  --ink-300: #B4B8C5;   /* disabled, dividers on color */
  --ink-200: #D8DAE2;   /* borders */
  --ink-100: #ECEDF1;   /* hairlines, subtle fills */
  --ink-50:  #F6F6F8;   /* app bg (light) */

  --paper:     #FAFAF7; /* signature cream-white page, NOT pure white */
  --paper-alt: #F1F0EA; /* section backgrounds, alternating stripe */
  --paper-warm:#EDEBE3; /* deeper cream for bands */

  /* =======================================================
     COLOR — SEMANTIC (functional)
     Muted, enterprise-appropriate. No neon.
     ======================================================= */
  --ok-700: #1E7A4B;
  --ok-500: #2FA367;
  --ok-100: #DCF1E6;

  --warn-700: #9A6A12;
  --warn-500: #D49327;
  --warn-100: #FAEDD1;

  --risk-700: #A83226;   /* high-severity, audit red */
  --risk-500: #D94A3B;
  --risk-100: #FBDED9;

  --info-700: #1E5FB5;
  --info-500: #2E7BD9;
  --info-100: #DCEAFB;

  /* =======================================================
     COLOR — SEVERITY (domain-specific: risk monitoring)
     Used in liability heatmaps, alert badges, audit trails.
     ======================================================= */
  --sev-critical: #8B1A12;
  --sev-high:     #D94A3B;
  --sev-medium:   #E5A32B;
  --sev-low:      #4FC6BF;   /* brand teal doubles as "informational" */
  --sev-none:     #B4B8C5;

  /* =======================================================
     COLOR — FOREGROUND / BACKGROUND (semantic tokens)
     Use these in product surfaces; never reach for --ink-* directly.
     ======================================================= */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-600);   /* secondary text */
  --fg-3: var(--ink-400);   /* tertiary / captions */
  --fg-invert: #FAFAF7;     /* on dark surface */
  --fg-brand: var(--brand-indigo);
  --fg-link:  var(--brand-indigo);

  --bg-1: var(--paper);     /* page */
  --bg-2: #FFFFFF;          /* elevated card */
  --bg-3: var(--ink-50);    /* inset / muted panel */
  --bg-inverse: var(--ink-900);
  --bg-brand-soft: #EFEAFE;

  --border-1: var(--ink-200);
  --border-2: var(--ink-100);
  --border-strong: var(--ink-300);

  /* =======================================================
     TYPOGRAPHY — FAMILIES
     ======================================================= */
  --font-display: 'Figtree', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Inter', 'Figtree', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* =======================================================
     TYPOGRAPHY — SCALE
     Modular scale ~1.2. Line-heights tuned tight on display,
     generous on body.
     ======================================================= */
  --fs-d1: 72px;   --lh-d1: 1.02;   --ls-d1: -0.03em;
  --fs-d2: 56px;   --lh-d2: 1.05;   --ls-d2: -0.025em;
  --fs-d3: 44px;   --lh-d3: 1.08;   --ls-d3: -0.022em;
  --fs-h1: 34px;   --lh-h1: 1.15;   --ls-h1: -0.02em;
  --fs-h2: 26px;   --lh-h2: 1.2;    --ls-h2: -0.015em;
  --fs-h3: 20px;   --lh-h3: 1.3;    --ls-h3: -0.01em;
  --fs-h4: 17px;   --lh-h4: 1.35;   --ls-h4: -0.005em;
  --fs-body: 15px; --lh-body: 1.55; --ls-body: 0;
  --fs-body-lg: 17px; --lh-body-lg: 1.55;
  --fs-small: 13px; --lh-small: 1.45;
  --fs-micro: 11px; --lh-micro: 1.4; --ls-micro: 0.06em;  /* eyebrow / uppercase label */

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

  /* =======================================================
     SPACING (4px base)
     ======================================================= */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* =======================================================
     RADII
     Refractal is restrained — radii are small. Cards 12px,
     pills fully rounded, inputs 8px.
     ======================================================= */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* =======================================================
     ELEVATION / SHADOWS
     Soft, low-contrast, enterprise. Never punchy.
     ======================================================= */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(11, 13, 18, 0.04), 0 1px 1px rgba(11, 13, 18, 0.03);
  --shadow-2: 0 2px 6px rgba(11, 13, 18, 0.05), 0 1px 2px rgba(11, 13, 18, 0.04);
  --shadow-3: 0 8px 24px rgba(11, 13, 18, 0.07), 0 2px 6px rgba(11, 13, 18, 0.04);
  --shadow-4: 0 24px 48px rgba(11, 13, 18, 0.10), 0 4px 12px rgba(11, 13, 18, 0.05);
  --shadow-brand: 0 12px 36px -8px rgba(139, 111, 243, 0.35);
  --ring-focus: 0 0 0 3px rgba(107, 114, 238, 0.25);
  --ring-risk:  0 0 0 3px rgba(217, 74, 59, 0.22);

  /* =======================================================
     MOTION
     Slow, measured, enterprise. No bouncy easing.
     ======================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   Use these by name — don't compose from raw tokens.
   ========================================================= */
.display-1,
.t-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-d1);
  line-height: var(--lh-d1);
  letter-spacing: var(--ls-d1);
  color: var(--fg-1);
}
.display-2, .t-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--fg-1);
}
.display-3, .t-display-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-d3);
  line-height: var(--lh-d3);
  letter-spacing: var(--ls-d3);
  color: var(--fg-1);
}
h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--fg-1);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--fg-1);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--fg-1);
  margin: 0;
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-1);
  margin: 0;
}
p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--fg-1);
}
.t-small, small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}
.t-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--fg-2);
}
code, .t-code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink-700);
  background: var(--ink-100);
  padding: 1px 5px;
  border-radius: var(--r-xs);
}

/* Utilities */
.text-brand { color: var(--brand-indigo); }
.text-muted { color: var(--fg-2); }
.text-subtle { color: var(--fg-3); }
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}