/* ============================================================
   Pixelsly Solutions — Colours & Type
   Modern. Smart. Human.
   Source of truth: assets/pixelsly-brand-guide-v2.html
   ============================================================ */

/* Type system — creative editorial refresh (see README § Typography).
   Instrument Serif = expressive display — hero & section headlines, tagline, pull-quotes.
   Inter            = UI, sub-heads & body (brand-guide primary, full compatibility).
   JetBrains Mono   = labels / numbers / code / the >>> arrow. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ---- Primary palette --------------------------------- */
  --navy:        #17285E;   /* primary · structure · headlines · 50–60% */
  --teal:        #0E9AA7;   /* primary accent · CTAs · links · "Modern" · ~20% */
  --pink:        #FF4F8B;   /* emphasis · "Human" · REAL IMPACT · <10% */
  --orange:      #FF9F1C;   /* energy · >>> arrow · step numbers · <10% */

  /* ---- Navy family + accent shades --------------------- */
  --navy-2:      #1A3A60;
  --navy-deep:   #1A2035;
  --teal-dark:   #009090;   /* hover/press for teal */
  --pixel-blue:  #A9D4E8;   /* light pixel accent in the logo */

  /* ---- Pastels (soft fills behind icons / cards) ------- */
  --pastel-teal:   #E0F5FC;
  --pastel-pink:   #FFE8EE;
  --pastel-orange: #FFF3E0;
  --pastel-navy:   #F0F4FF;
  --pastel-blue:   #C5DBE8;

  /* ---- Surfaces & lines -------------------------------- */
  --bg:          #FAFBFC;   /* page */
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #F4F7FA;   /* alt panels */
  --line:        #E5EAF0;   /* default 1px divider */
  --line-2:      #D4DCE5;   /* stronger divider */

  /* ---- Text -------------------------------------------- */
  --ink:         #17285E;   /* primary text = navy */
  --ink-2:       #1A3A60;   /* body text */
  --muted:       #64748B;   /* secondary text */
  --muted-2:     #94A3B8;   /* tertiary / metadata */
  --on-dark:     #E6EBF5;   /* text on navy */

  /* ---- Type families ----------------------------------- */
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif; /* expressive display */
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;          /* structural headings / UI */
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (px) --------------------------------- */
  --fs-display:  clamp(48px, 6vw, 88px);  /* hero */
  --fs-h1:       clamp(36px, 4vw, 56px);
  --fs-h2:       32px;
  --fs-h3:       20px;
  --fs-h4:       16px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-eyebrow:  12px;   /* mono, letter-spaced */

  --lh-display:  1.08;
  --lh-heading:  1.18;
  --lh-sub:      1.35;
  --lh-body:     1.6;

  /* ---- Spacing scale ----------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --maxw:    1240px;

  /* ---- Radius ------------------------------------------ */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;   /* upper bound — use rarely */
  --r-pill: 999px;

  /* ---- Elevation (quiet; structure from borders) ------- */
  --shadow-sm: 0 1px 2px rgba(23,40,94,0.06);
  --shadow-md: 0 6px 20px rgba(23,40,94,0.08);
  --shadow-lg: 0 18px 48px rgba(23,40,94,0.12);

  /* ---- Motion ------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out */
  --dur-fast: 160ms;
  --dur:      260ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Semantic element styles — opt in by importing this file.
   ============================================================ */

/* Expressive editorial display — the brand's creative voice (hero & big headlines) */
.px-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.px-display em, .px-display .accent { font-style: italic; color: var(--teal); }

h1, .px-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.025em;
  color: var(--navy);
}

h2, .px-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.02em;
  color: var(--navy);
}

h3, .px-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-sub);
  color: var(--navy);
}

h4, .px-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-sub);
  color: var(--ink);
}

p, .px-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

.px-lead {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

small, .px-small {
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Eyebrow / section label — mono, caps, letter-spaced */
.px-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The brand tagline — editorial serif italic, each word coloured */
.px-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.px-tagline .w-modern { color: var(--teal); }
.px-tagline .w-smart  { color: var(--navy); }
.px-tagline .w-human  { color: var(--pink); }

/* Secondary tagline / action line */
.px-action {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.px-action .arrow { font-family: var(--font-mono); color: var(--orange); margin-right: 10px; }
.px-action .real  { color: var(--pink); }

code, .px-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a, .px-link { color: var(--teal); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover, .px-link:hover { color: var(--teal-dark); }

/* ---- Buttons ------------------------------------------ */
.px-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 14px 26px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.px-btn-primary { background: var(--teal); color: #fff; }
.px-btn-primary:hover { background: var(--teal-dark); }
.px-btn-primary:active { transform: translateY(1px); }

.px-btn-navy { background: var(--navy); color: #fff; }
.px-btn-navy:hover { background: var(--navy-2); }

.px-btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.px-btn-ghost:hover { border-color: var(--navy); }

/* ---- Card --------------------------------------------- */
.px-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}