@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== tokens/colors.css ===== */
/* ============================================================
   Flashexpand — Color tokens
   Electric ultramarine + precise Swiss neutrals.
   ============================================================ */

:root {
  /* ---- Brand: Electric Blue (sampled from logo #0000FE) ---- */
  --fe-blue-50:  #eaeaff;
  --fe-blue-100: #d2d2ff;
  --fe-blue-200: #a6a6ff;
  --fe-blue-300: #7070ff;
  --fe-blue-400: #3a3aff;
  --fe-blue-500: #2000ff;  /* core brand (Framer: Blue) */
  --fe-blue-600: #1800c4;  /* Framer: Blue Dark */
  --fe-blue-700: #0000a8;
  --fe-blue-800: #00007d;
  --fe-blue-900: #00004f;

  /* ---- Neutrals: near-black to white, slightly cool ---- */
  --fe-ink:      #0a0a0a;  /* primary text / black mark */
  --fe-gray-900: #111114;
  --fe-gray-800: #1d1d22;
  --fe-gray-700: #2e2e36;
  --fe-gray-600: #4a4a55;
  --fe-gray-500: #6b6b75;  /* Framer: Gray */
  --fe-gray-400: #969aa6;  /* gray mark ~ #b3b3b3 family */
  --fe-gray-300: #c4c7d0;
  --fe-gray-200: #e8e8ee;  /* Framer: Line */
  --fe-gray-100: #eef0f4;
  --fe-gray-50:  #f6f7fb;  /* Framer: BG Soft */
  --fe-white:    #ffffff;

  /* ---- Semantic accents (kept restrained, Swiss) ---- */
  --fe-success: #00875a;
  --fe-success-bg: #e3f4ec;
  --fe-warning: #b7791f;
  --fe-warning-bg: #fbf0db;
  --fe-danger:  #d22f2f;
  --fe-danger-bg: #fbe7e7;
  --fe-info:    #2000ff;
  --fe-info-bg: #eaeaff;

  /* ============================================================
     Semantic aliases — reference these in components/UI
     ============================================================ */

  /* Brand */
  --color-brand:        var(--fe-blue-500);
  --color-brand-hover:  var(--fe-blue-600);
  --color-brand-active: var(--fe-blue-700);
  --color-brand-subtle: var(--fe-blue-50);
  --color-brand-on:     var(--fe-white);   /* text/icon on brand */

  /* Text */
  --text-primary:   var(--fe-ink);
  --text-secondary: var(--fe-gray-600);
  --text-tertiary:  var(--fe-gray-500);
  --text-disabled:  var(--fe-gray-400);
  --text-inverse:   var(--fe-white);
  --text-brand:     var(--fe-blue-500);
  --text-link:      var(--fe-blue-500);

  /* Surfaces */
  --surface-page:    var(--fe-white);
  --surface-subtle:  var(--fe-gray-50);
  --surface-card:    var(--fe-white);
  --surface-sunken:  var(--fe-gray-100);
  --surface-inverse: var(--fe-ink);
  --surface-brand:   var(--fe-blue-500);

  /* Borders */
  --border-subtle:  var(--fe-gray-200);
  --border-default: var(--fe-gray-300);
  --border-strong:  var(--fe-gray-400);
  --border-brand:   var(--fe-blue-500);
  --border-focus:   var(--fe-blue-500);

  /* Status text/surfaces */
  --status-success: var(--fe-success);
  --status-warning: var(--fe-warning);
  --status-danger:  var(--fe-danger);
  --status-info:    var(--fe-info);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Flashexpand — Typography tokens
   Display/UI: "Manrope" (site font, from Framer source)
   Mono: "JetBrains Mono"
   ============================================================ */



:root {
  /* ---- Families ---- */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  /* ---- Type scale (px) — Swiss, tight & deliberate ---- */
  --text-display-2xl: 76px;
  --text-display-xl:  60px;
  --text-display-lg:  48px;
  --text-display-md:  38px;
  --text-heading-xl:  30px;
  --text-heading-lg:  24px;
  --text-heading-md:  20px;
  --text-heading-sm:  17px;
  --text-body-lg:     18px;
  --text-body-md:     15px;
  --text-body-sm:     13px;
  --text-caption:     12px;
  --text-overline:    11px;

  /* ---- Line heights ---- */
  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-overline:0.14em;  /* uppercase labels */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Flashexpand — Spacing, radius, sizing tokens
   4px base grid (Swiss precision).
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --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;
  --space-32: 128px;

  /* ---- Corner radii — soft but controlled (echoes logo's rounded corners) ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-narrow: 820px;
  --gutter: 24px;

  /* ---- Control heights ---- */
  --control-sm: 34px;
  --control-md: 42px;
  --control-lg: 52px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   Flashexpand — Effects: shadows, focus, motion
   Restrained, crisp. Shadows are subtle & neutral-tinted;
   the brand blue carries emphasis instead of heavy elevation.
   ============================================================ */

:root {
  /* ---- Shadows (low, precise) ---- */
  --shadow-xs: 0 1px 2px rgba(8, 8, 10, 0.06);
  --shadow-sm: 0 1px 3px rgba(8, 8, 10, 0.08), 0 1px 2px rgba(8, 8, 10, 0.04);
  --shadow-md: 0 4px 12px rgba(8, 8, 10, 0.08), 0 1px 3px rgba(8, 8, 10, 0.05);
  --shadow-lg: 0 12px 32px rgba(8, 8, 10, 0.10), 0 4px 8px rgba(8, 8, 10, 0.05);
  --shadow-xl: 0 24px 56px rgba(8, 8, 10, 0.14);

  /* Brand-tinted glow for emphasis / focus surfaces */
  --shadow-brand: 0 10px 30px rgba(0, 0, 254, 0.22);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(0, 0, 254, 0.30);
  --focus-ring-offset: 0 0 0 2px var(--fe-white), 0 0 0 4px var(--fe-blue-500);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ /* swift, settled */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow: 360ms; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Flashexpand — Base reset & element defaults
   Minimal, applies brand type + colors to the document.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv01';
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-standard);
}
a:hover { opacity: 0.72; }

code, pre, kbd { font-family: var(--font-mono); }

button { font-family: inherit; }

::selection { background: var(--fe-blue-500); color: #fff; }