/* ============================================================
   FlatFilePro — Foundations
   Source of truth for color and typography tokens.
   ============================================================ */

/* ---------- Webfonts (Google) -------------------------------- */
/*
   FlatFilePro uses a chunky geometric sans for display and a
   clean grotesque for body. We're approximating the wordmark
   weight with Archivo Black for display, and Inter for UI/body.
   If exact source files become available, replace these.
*/

:root {
  /* ---------- Brand color (extracted from logo + illos) ------- */
  --ffp-purple-500: #6048F8;   /* Primary brand purple */
  --ffp-purple-600: #5840D8;
  --ffp-purple-700: #4838A8;
  --ffp-purple-400: #8878F8;
  --ffp-purple-300: #B5A8FA;
  --ffp-purple-200: #D0C0FF;   /* Light tint, used in logo bubble + soft fills */
  --ffp-purple-100: #ECE6FF;
  --ffp-purple-50:  #F7F3FF;

  /* ---------- Neutral system (high contrast) ----------------- */
  --ffp-black:    #0A0A0A;     /* True ink black, used for outlines + text */
  --ffp-ink-900:  #111111;
  --ffp-ink-800:  #1F1F1F;
  --ffp-ink-700:  #3A3A3A;
  --ffp-ink-500:  #6B6B6B;
  --ffp-ink-400:  #9A9A9A;
  --ffp-ink-300:  #C9C9C9;
  --ffp-ink-200:  #E6E6E6;
  --ffp-ink-100:  #F2F2F2;
  --ffp-ink-50:   #F8F8F8;
  --ffp-white:    #FFFFFF;

  /* ---------- Semantic ---------------------------------------- */
  --ffp-success: #1FAE6A;       /* Listings live / synced */
  --ffp-warning: #F5A623;       /* Catalog rot / drift */
  --ffp-danger:  #E5484D;       /* Broken / disabled */
  --ffp-info:    var(--ffp-purple-500);

  /* ---------- Surface tokens --------------------------------- */
  --ffp-bg:           var(--ffp-white);
  --ffp-bg-soft:      var(--ffp-ink-50);
  --ffp-bg-tint:      var(--ffp-purple-50);
  --ffp-surface:      var(--ffp-white);
  --ffp-surface-alt:  var(--ffp-ink-100);
  --ffp-fg:           var(--ffp-ink-900);
  --ffp-fg-muted:     var(--ffp-ink-500);
  --ffp-fg-subtle:    var(--ffp-ink-400);
  --ffp-fg-inverse:   var(--ffp-white);
  --ffp-border:       var(--ffp-black);          /* Brand uses heavy black outlines */
  --ffp-border-soft:  var(--ffp-ink-200);
  --ffp-accent:       var(--ffp-purple-500);

  /* ---------- Type families ---------------------------------- */
  --ffp-font-display: 'Archivo Black', 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --ffp-font-heading: 'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --ffp-font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --ffp-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (px-anchored, fluid)----------------- */
  /* Display: chunky, all-caps, the wordmark vibe */
  --ffp-display-xl:  clamp(56px, 7vw, 96px);
  --ffp-display-lg:  clamp(44px, 5.5vw, 72px);
  --ffp-display-md:  clamp(36px, 4vw, 56px);

  --ffp-h1: clamp(36px, 3.5vw, 48px);
  --ffp-h2: 32px;
  --ffp-h3: 24px;
  --ffp-h4: 20px;
  --ffp-h5: 18px;
  --ffp-eyebrow: 14px;        /* All-caps label */
  --ffp-body-lg: 18px;
  --ffp-body:    16px;
  --ffp-body-sm: 14px;
  --ffp-caption: 12px;

  /* ---------- Line height + tracking ------------------------- */
  --ffp-lh-tight:   1.0;
  --ffp-lh-display: 1.05;
  --ffp-lh-heading: 1.15;
  --ffp-lh-body:    1.55;
  --ffp-lh-loose:   1.7;
  --ffp-tracking-tight: -0.02em;
  --ffp-tracking-snug:  -0.01em;
  --ffp-tracking-wide:  0.08em;
  --ffp-tracking-eyebrow: 0.14em;

  /* ---------- Spacing (4px base) ----------------------------- */
  --ffp-space-1: 4px;
  --ffp-space-2: 8px;
  --ffp-space-3: 12px;
  --ffp-space-4: 16px;
  --ffp-space-5: 20px;
  --ffp-space-6: 24px;
  --ffp-space-8: 32px;
  --ffp-space-10: 40px;
  --ffp-space-12: 48px;
  --ffp-space-16: 64px;
  --ffp-space-20: 80px;
  --ffp-space-24: 96px;

  /* ---------- Radius ----------------------------------------- */
  /* Brand leans pill-and-square: soft 8/12 on cards, fully rounded on CTAs */
  --ffp-r-xs: 4px;
  --ffp-r-sm: 8px;
  --ffp-r-md: 12px;
  --ffp-r-lg: 16px;
  --ffp-r-xl: 24px;
  --ffp-r-pill: 999px;

  /* ---------- Borders (brand uses heavy black strokes) ------- */
  --ffp-stroke-1: 1.5px;
  --ffp-stroke-2: 2px;
  --ffp-stroke-3: 3px;          /* Default outline weight on illustrations */
  --ffp-stroke-4: 4px;

  /* ---------- Shadows (chunky, opaque-offset "neo" style) --- */
  /* Drop-shadow look comes from a hard offset, not a blur. */
  --ffp-shadow-flat:    4px 4px 0 0 var(--ffp-black);
  --ffp-shadow-flat-lg: 8px 8px 0 0 var(--ffp-black);
  --ffp-shadow-soft:    0 8px 24px -8px rgba(10, 10, 10, 0.18);
  --ffp-shadow-card:    0 4px 16px -4px rgba(10, 10, 10, 0.10),
                        0 1px 2px rgba(10, 10, 10, 0.06);
  --ffp-shadow-pop:     0 16px 40px -12px rgba(96, 72, 248, 0.35);

  /* ---------- Motion ----------------------------------------- */
  --ffp-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ffp-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ffp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ffp-dur-fast: 120ms;
  --ffp-dur:      200ms;
  --ffp-dur-slow: 320ms;
}

/* ============================================================
   Semantic typography — apply directly with class names
   ============================================================ */
.ffp-display-xl,
.ffp-display-lg,
.ffp-display-md {
  font-family: var(--ffp-font-display);
  color: var(--ffp-fg);
  line-height: var(--ffp-lh-display);
  letter-spacing: var(--ffp-tracking-tight);
  text-transform: uppercase;
}
.ffp-display-xl { font-size: var(--ffp-display-xl); }
.ffp-display-lg { font-size: var(--ffp-display-lg); }
.ffp-display-md { font-size: var(--ffp-display-md); }

.ffp-h1, .ffp-h2, .ffp-h3, .ffp-h4, .ffp-h5 {
  font-family: var(--ffp-font-heading);
  color: var(--ffp-fg);
  line-height: var(--ffp-lh-heading);
  letter-spacing: var(--ffp-tracking-snug);
  font-weight: 800;
  text-wrap: balance;
}
.ffp-h1 { font-size: var(--ffp-h1); }
.ffp-h2 { font-size: var(--ffp-h2); font-weight: 700; }
.ffp-h3 { font-size: var(--ffp-h3); font-weight: 700; }
.ffp-h4 { font-size: var(--ffp-h4); font-weight: 700; }
.ffp-h5 { font-size: var(--ffp-h5); font-weight: 600; }

.ffp-eyebrow {
  font-family: var(--ffp-font-heading);
  font-size: var(--ffp-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ffp-tracking-eyebrow);
  color: var(--ffp-purple-600);
}

.ffp-body-lg, .ffp-body, .ffp-body-sm, .ffp-caption {
  font-family: var(--ffp-font-body);
  color: var(--ffp-fg);
  line-height: var(--ffp-lh-body);
  text-wrap: pretty;
}
.ffp-body-lg { font-size: var(--ffp-body-lg); }
.ffp-body    { font-size: var(--ffp-body); }
.ffp-body-sm { font-size: var(--ffp-body-sm); color: var(--ffp-fg-muted); }
.ffp-caption { font-size: var(--ffp-caption); color: var(--ffp-fg-muted); letter-spacing: 0.01em; }

.ffp-mono {
  font-family: var(--ffp-font-mono);
  font-size: 0.92em;
}

/* Base reset for design previews */
.ffp-root {
  font-family: var(--ffp-font-body);
  color: var(--ffp-fg);
  background: var(--ffp-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}