/* =========================================================================
   Fancy Pixel — Design Tokens
   Single source of truth for color, type, spacing, radii, shadow, motion.
   ========================================================================= */

/* ---------- Brand fonts ------------------------------------------------- */
/* Identified by visual analysis of the FANCY PIXEL brochures, rollup, and
   FANCYBOX wordmark. Display = Futura PT (the wordmark's geometric sans),
   body = Lato (the brochure paragraph face), mono = Roboto Mono.
   Files live in /fonts/. */

/* --- Futura PT (display, headlines, wordmark, all-caps labels) --- */
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-Light.ttf") format("truetype");        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-LightOblique.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-Book.ttf") format("truetype");         font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-BookOblique.ttf") format("truetype");  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-Medium.ttf") format("truetype");       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-Demi.ttf") format("truetype");         font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-Bold.ttf") format("truetype");         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT"; src: url("fonts/FuturaPT-Heavy.ttf") format("truetype");        font-weight: 800; font-style: normal; font-display: swap; }

/* Condensed cut — kept as a separate family so you can opt into it explicitly
   for tight pannelli-fiera headlines. */
@font-face { font-family: "Futura PT Cond"; src: url("fonts/FuturaPT-CondBook.ttf") format("truetype");   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT Cond"; src: url("fonts/FuturaPT-CondMedium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Futura PT Cond"; src: url("fonts/FuturaPT-CondBold.ttf") format("truetype");   font-weight: 700; font-style: normal; font-display: swap; }

/* --- Lato (body, UI, paragraph copy) --- */
@font-face { font-family: "Lato"; src: url("fonts/Lato-Light.ttf") format("truetype");       font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Regular.ttf") format("truetype");     font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Italic.ttf") format("truetype");      font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Medium.ttf") format("truetype");      font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Semibold.ttf") format("truetype");    font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-Bold.ttf") format("truetype");        font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/Lato-BoldItalic.ttf") format("truetype");  font-weight: 700; font-style: italic; font-display: swap; }

/* --- Roboto Mono (technical labels, code, timestamps) --- */
@font-face { font-family: "Roboto Mono"; src: url("fonts/RobotoMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("fonts/RobotoMono-Medium.ttf") format("truetype");  font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ============================ COLORS ================================== */

  /* Primary brand blue — pulled directly from the logo SVG (#327BD0). */
  --fp-blue-50:  #eef5fc;
  --fp-blue-100: #d6e6f7;
  --fp-blue-200: #abcdef;
  --fp-blue-300: #7eb1e6;
  --fp-blue-400: #5697db;
  --fp-blue-500: #327bd0;     /* ← brand */
  --fp-blue-600: #2867b1;
  --fp-blue-700: #1f5290;
  --fp-blue-800: #173d6c;
  --fp-blue-900: #0f2a4a;

  /* Neutral / ink — cool slate, complements the blue without going corporate-gray */
  --fp-ink-0:    #ffffff;
  --fp-ink-25:   #fafbfc;
  --fp-ink-50:   #f4f6f8;
  --fp-ink-100:  #e7ebef;
  --fp-ink-200:  #cdd5dd;
  --fp-ink-300:  #a6b2bf;
  --fp-ink-400:  #7a8796;
  --fp-ink-500:  #56636f;
  --fp-ink-600:  #3d4854;
  --fp-ink-700:  #2a323c;
  --fp-ink-800:  #1a2027;
  --fp-ink-900:  #0d1117;     /* near-black with a blue lean */

  /* Semantic — kept simple, derived to live alongside the brand blue */
  --fp-success-50:  #e7f7ee;
  --fp-success-500: #2bb673;
  --fp-success-700: #1c8254;

  --fp-warning-50:  #fff5e1;
  --fp-warning-500: #f5a524;
  --fp-warning-700: #b3730d;

  --fp-danger-50:   #fdecec;
  --fp-danger-500:  #e23b3b;
  --fp-danger-700:  #a72626;

  --fp-info-50:     #eaf3fb;
  --fp-info-500:    #2f7bd0;     /* alias of brand blue */
  --fp-info-700:    #1f5290;

  /* Surface colors — semantic aliases */
  --fp-bg:           var(--fp-ink-0);
  --fp-bg-subtle:    var(--fp-ink-25);
  --fp-bg-muted:     var(--fp-ink-50);
  --fp-bg-inverse:   var(--fp-ink-900);

  --fp-surface:      var(--fp-ink-0);
  --fp-surface-raised: var(--fp-ink-0);
  --fp-surface-sunken:  var(--fp-ink-50);

  /* Foreground — text */
  --fp-fg-1:         var(--fp-ink-900);   /* primary text */
  --fp-fg-2:         var(--fp-ink-700);   /* secondary */
  --fp-fg-3:         var(--fp-ink-500);   /* tertiary / meta */
  --fp-fg-4:         var(--fp-ink-400);   /* placeholder, disabled */
  --fp-fg-on-brand:  #ffffff;
  --fp-fg-on-dark:   #ffffff;

  /* Borders & dividers */
  --fp-border-1:     var(--fp-ink-100);
  --fp-border-2:     var(--fp-ink-200);
  --fp-border-strong:var(--fp-ink-300);
  --fp-border-focus: var(--fp-blue-500);

  /* Brand aliases */
  --fp-accent:       var(--fp-blue-500);
  --fp-accent-hover: var(--fp-blue-600);
  --fp-accent-press: var(--fp-blue-700);
  --fp-accent-soft:  var(--fp-blue-50);

  /* ============================ TYPE ===================================== */

  /* Display / headings — Futura PT, the geometric sans of the wordmark. */
  --fp-font-display: "Futura PT", "Futura", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;

  /* Condensed display — for tight, vertical-set headlines (pannelli, posters). */
  --fp-font-display-cond: "Futura PT Cond", "Futura PT", "Futura Condensed", "Avenir Next Condensed", sans-serif;

  /* Body / UI — Lato, the brochure paragraph face. */
  --fp-font-sans:    "Lato", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Mono — for code, timestamps, technical labels (engineering tone). */
  --fp-font-mono:    "Roboto Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* Type scale — modular 1.25 (major third) anchored at 16px */
  --fp-text-xs:      0.75rem;     /* 12 */
  --fp-text-sm:      0.875rem;    /* 14 */
  --fp-text-base:    1rem;        /* 16 */
  --fp-text-md:      1.125rem;    /* 18 */
  --fp-text-lg:      1.25rem;     /* 20 */
  --fp-text-xl:      1.5rem;      /* 24 */
  --fp-text-2xl:     1.875rem;    /* 30 */
  --fp-text-3xl:     2.25rem;     /* 36 */
  --fp-text-4xl:     3rem;        /* 48 */
  --fp-text-5xl:     3.75rem;     /* 60 */
  --fp-text-6xl:     4.5rem;      /* 72 */

  /* Weights — Futura PT (300–800) and Lato (300–700) cover the same ramp.
     Use weight + size + tracking for hierarchy. */
  --fp-weight-light:    300;
  --fp-weight-regular:  400;
  --fp-weight-medium:   500;
  --fp-weight-semibold: 600;
  --fp-weight-bold:     700;
  --fp-weight-heavy:    800;     /* Futura PT only */

  /* Line heights */
  --fp-leading-tight:  1.1;
  --fp-leading-snug:   1.25;
  --fp-leading-normal: 1.5;
  --fp-leading-loose:  1.7;

  /* Tracking */
  --fp-track-tighter: -0.025em;
  --fp-track-tight:   -0.015em;
  --fp-track-normal:  0;
  --fp-track-wide:    0.04em;
  --fp-track-wider:   0.08em;
  --fp-track-widest:  0.18em;     /* for ALL-CAPS eyebrow labels */

  /* ============================ SPACING ================================== */
  --fp-space-0:   0;
  --fp-space-1:   4px;
  --fp-space-2:   8px;
  --fp-space-3:   12px;
  --fp-space-4:   16px;
  --fp-space-5:   24px;
  --fp-space-6:   32px;
  --fp-space-7:   48px;
  --fp-space-8:   64px;
  --fp-space-9:   96px;
  --fp-space-10: 128px;

  /* ============================ RADII ==================================== */
  /* The logo silhouette is a very generously rounded square — that 28% radius
     is the brand's signature corner. Carry that DNA into UI. */
  --fp-radius-xs:  4px;
  --fp-radius-sm:  6px;
  --fp-radius-md:  10px;
  --fp-radius-lg:  14px;
  --fp-radius-xl:  20px;
  --fp-radius-2xl: 28px;     /* matches logo silhouette */
  --fp-radius-pill: 999px;

  /* ============================ SHADOWS ================================== */
  /* Soft, cool-tinted — never harsh black. */
  --fp-shadow-xs: 0 1px 2px rgba(15, 42, 74, 0.06);
  --fp-shadow-sm: 0 2px 4px rgba(15, 42, 74, 0.06), 0 1px 2px rgba(15, 42, 74, 0.04);
  --fp-shadow-md: 0 6px 16px rgba(15, 42, 74, 0.08), 0 2px 4px rgba(15, 42, 74, 0.04);
  --fp-shadow-lg: 0 14px 32px rgba(15, 42, 74, 0.10), 0 4px 8px rgba(15, 42, 74, 0.06);
  --fp-shadow-xl: 0 28px 56px rgba(15, 42, 74, 0.14), 0 8px 16px rgba(15, 42, 74, 0.08);
  --fp-shadow-focus: 0 0 0 4px rgba(50, 123, 208, 0.18);

  /* ============================ MOTION =================================== */
  --fp-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --fp-ease-emphasis: cubic-bezier(0.3, 0.7, 0.1, 1);
  --fp-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);

  --fp-dur-fast:  120ms;
  --fp-dur-base:  200ms;
  --fp-dur-slow:  360ms;

  /* ============================ LAYOUT =================================== */
  --fp-container:    1200px;
  --fp-container-wide: 1440px;
  --fp-gutter:       clamp(16px, 4vw, 32px);
}

/* =========================================================================
   Semantic typography — drop these classes onto elements directly.
   ========================================================================= */

.fp-eyebrow {
  font-family: var(--fp-font-display-cond);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-bold);
  letter-spacing: var(--fp-track-widest);
  text-transform: uppercase;
  color: var(--fp-blue-600);
}

.fp-display {
  font-family: var(--fp-font-display);
  font-size: clamp(2.5rem, 5vw, var(--fp-text-6xl));
  font-weight: var(--fp-weight-bold);
  line-height: var(--fp-leading-tight);
  letter-spacing: var(--fp-track-tight);
  color: var(--fp-fg-1);
  text-transform: uppercase;
}

.fp-h1 {
  font-family: var(--fp-font-display);
  font-size: clamp(2rem, 4vw, var(--fp-text-4xl));
  font-weight: var(--fp-weight-bold);
  line-height: var(--fp-leading-tight);
  letter-spacing: var(--fp-track-tight);
  color: var(--fp-fg-1);
}

.fp-h2 {
  font-family: var(--fp-font-display);
  font-size: clamp(1.5rem, 3vw, var(--fp-text-3xl));
  font-weight: var(--fp-weight-semibold);
  line-height: var(--fp-leading-snug);
  letter-spacing: var(--fp-track-tight);
  color: var(--fp-fg-1);
}

.fp-h3 {
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-2xl);
  font-weight: var(--fp-weight-medium);
  line-height: var(--fp-leading-snug);
  color: var(--fp-fg-1);
}

.fp-h4 {
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-xl);
  font-weight: var(--fp-weight-bold);
  line-height: var(--fp-leading-snug);
  color: var(--fp-fg-1);
}

.fp-lead {
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-md);
  font-weight: var(--fp-weight-light);
  line-height: var(--fp-leading-loose);
  color: var(--fp-fg-2);
  text-wrap: pretty;
}

.fp-body {
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-weight-regular);
  line-height: var(--fp-leading-normal);
  color: var(--fp-fg-2);
}

.fp-small {
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-sm);
  line-height: var(--fp-leading-normal);
  color: var(--fp-fg-3);
}

.fp-meta {
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-xs);
  line-height: var(--fp-leading-normal);
  color: var(--fp-fg-3);
}

.fp-code,
.fp-mono {
  font-family: var(--fp-font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0;
}

/* Inline code chip */
.fp-code-inline {
  font-family: var(--fp-font-mono);
  font-size: 0.88em;
  background: var(--fp-bg-muted);
  border: 1px solid var(--fp-border-1);
  border-radius: var(--fp-radius-sm);
  padding: 0.1em 0.4em;
  color: var(--fp-fg-1);
}

/* =========================================================================
   Base reset for components in the design system previews
   ========================================================================= */
.fp-root,
.fp-root * {
  box-sizing: border-box;
}
.fp-root {
  font-family: var(--fp-font-sans);
  color: var(--fp-fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}