/* ==========================================================================
   Fingerpaint Group — Colors & Type
   Source: 2025 Fingerpaint Group Color Palette + Style Guide AI Notes
   ==========================================================================

   Usage notes
   -----------
   - Backgrounds: MUST be white (#FFFFFF). This is a brand rule.
   - Headlines: Georgia, not bold, ~28pt at document scale.
   - Body: Arial. Body copy sits between 11pt and 18pt.
   - Knockout white on a brand color is allowed. Black text is used for on-white.
   - Tertiary colors (Plum, Electric Pink) are available to any Fingerpaint
     Group solution but should be used sparingly as accents.
*/

/* ---------- Brand palette ------------------------------------------------ */
:root {
  /* Primary */
  --fpg-orange:         #FC8549;  /* FPG Legacy Orange */
  --fpg-purple:         #47254A;  /* FPG Legacy Purple */
  --fpg-gray:           #1A2025;  /* FPG Gray — near-black */
  --fpg-cotton:         #F8F8F8;  /* FPG Cotton — off-white */
  --fpg-black:          #050607;  /* FPG Black */
  --fpg-white:          #FFFFFF;

  /* Tertiary (accents only) */
  --fpg-plum:           #880068;
  --fpg-pink:           #FF76BA;

  /* Orange scale — from the printed palette */
  --fpg-orange-50:      #FEFDED;   /* lightest tint */
  --fpg-orange-100:     #FEF0E9;
  --fpg-orange-200:     #FCE1D1;
  --fpg-orange-300:     #F8A67F;
  --fpg-orange-400:     #F78A62;
  --fpg-orange-500:     #FC8549;   /* brand orange */
  --fpg-orange-600:     #F58543;
  --fpg-orange-700:     #C25218;   /* "*" on-black text color */
  --fpg-orange-800:     #963E14;
  --fpg-orange-900:     #6F2E0F;
  --fpg-orange-950:     #30150B;

  /* Purple scale */
  --fpg-purple-50:      #DFC4E2;
  --fpg-purple-100:     #D08403;   /* lavender tint */
  --fpg-purple-200:     #B7AEB6;
  --fpg-purple-300:     #A294A5;
  --fpg-purple-400:     #B2132B;
  --fpg-purple-500:     #47254A;   /* brand purple */
  --fpg-purple-600:     #281420;
  --fpg-purple-700:     #43721A;   /* (derived tone) */
  --fpg-purple-800:     #1E0E13;

  /* Neutral / gray scale */
  --fpg-gray-50:        #F8F8F8;   /* same as cotton */
  --fpg-gray-100:       #ECECEC;
  --fpg-gray-200:       #D5D5D5;
  --fpg-gray-300:       #B0B0B0;
  --fpg-gray-400:       #7E7E7E;
  --fpg-gray-500:       #505050;
  --fpg-gray-600:       #323C3A;
  --fpg-gray-700:       #262F36;
  --fpg-gray-800:       #1A2025;   /* brand gray */
  --fpg-gray-900:       #15181E;
  --fpg-gray-950:       #0C0F12;

  /* ---------- Semantic foreground ---------------------------------------- */
  --fg:                 var(--fpg-gray);          /* default text on white */
  --fg-strong:          var(--fpg-black);
  --fg-muted:           var(--fpg-gray-500);
  --fg-subtle:          var(--fpg-gray-400);
  --fg-on-brand:        var(--fpg-white);         /* text on orange/purple */
  --fg-on-brand-alt:    var(--fpg-orange-700);    /* orange text on black */
  --fg-accent:          var(--fpg-orange);
  --fg-link:            var(--fpg-orange-700);

  /* ---------- Semantic background ---------------------------------------- */
  --bg:                 var(--fpg-white);         /* MUST be white */
  --bg-alt:             var(--fpg-cotton);        /* subtle off-white */
  --bg-inverse:         var(--fpg-gray);
  --bg-brand:           var(--fpg-orange);
  --bg-brand-alt:       var(--fpg-purple);
  --bg-accent-soft:     var(--fpg-orange-100);

  /* ---------- Borders ---------------------------------------------------- */
  --border:             var(--fpg-gray-200);
  --border-strong:      var(--fpg-gray);
  --border-muted:       var(--fpg-gray-100);

  /* ---------- Type families --------------------------------------------- */
  /* Brand fonts. Georgia + Arial are licensed system fonts; no webfont needed. */
  --font-display:       Georgia, "Times New Roman", Times, serif;
  --font-body:          Arial, Helvetica, "Liberation Sans", sans-serif;
  --font-mono:          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale ------------------------------------------------- */
  /* 28pt ≈ 37px at 96dpi — matches style guide headline spec. */
  --fs-display:         48px;
  --fs-h1:              37px;   /* 28pt */
  --fs-h2:              28px;
  --fs-h3:              22px;
  --fs-h4:              18px;
  --fs-body:            16px;   /* ~12pt */
  --fs-body-lg:         18px;   /* body ceiling per style guide */
  --fs-body-sm:         14px;   /* ~11pt floor */
  --fs-caption:         12px;

  --lh-tight:           1.1;
  --lh-snug:            1.25;
  --lh-normal:          1.5;
  --lh-relaxed:         1.6;

  /* Weights — Georgia headlines are NOT bold. */
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-bold:            700;

  /* ---------- Spacing / layout (not in brand guide; derived) ------------- */
  --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;

  --radius-sm:          2px;
  --radius-md:          4px;
  --radius-lg:          8px;
  --radius-pill:        999px;

  /* Shadows — brand is fairly flat; kept restrained. */
  --shadow-sm:          0 1px 2px rgba(26, 32, 37, 0.06);
  --shadow-md:          0 4px 12px rgba(26, 32, 37, 0.08);
  --shadow-lg:          0 12px 32px rgba(26, 32, 37, 0.12);
}

/* ---------- Base ---------------------------------------------------------- */
html, body {
  background: var(--bg);            /* MUST be white */
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Semantic type styles ---------------------------------------- */
.fpg-display,
h1.fpg-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);   /* NEVER bold Georgia headlines */
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}

h1, .fpg-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0 0 var(--space-4);
}

h2, .fpg-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

h3, .fpg-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-transform: uppercase;        /* section labels use uppercase Arial */
  letter-spacing: 0.06em;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

h4, .fpg-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--space-2);
}

p, .fpg-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  max-width: 70ch;
  text-wrap: pretty;
}

.fpg-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}

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

.fpg-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Bulleted lists — style guide: .2" before text, .2" hanging, 6pt after */
ul.fpg-list, ol.fpg-list {
  padding-left: 19px;           /* .2" ≈ 19px */
  margin: 0 0 var(--space-4);
}
ul.fpg-list li, ol.fpg-list li {
  padding-left: 0;
  margin-bottom: 8px;           /* 6pt ≈ 8px */
  line-height: var(--lh-normal);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--fpg-orange-800); }

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