/* =========================================================
   PolysRock Design System — Colors & Type
   Source-of-truth colors and fonts extracted from the iWeb
   export (Home.html, Dyna.css). Some neutrals are modernised:
   the original site uses a flat 1000px grey panel (#D6D6D6)
   on a bright orange page; we keep a warmer cream paper here
   and gain rounded corners + soft shadows. Brand orange,
   body text and cat-name red are exact pulls.
   ========================================================= */

/* ---------- Color tokens ---------- */
:root {
  /* Brand orange — EXACT from iWeb body background rgb(255,147,0) */
  --pr-orange-700: #FF9300;   /* primary — the page surround */
  --pr-orange-900: #B0381C;   /* deep red — outline of the logo wordmark */
  --pr-orange-500: #FFB04C;   /* lighter brand orange — hover, accent */
  --pr-orange-400: #FFC677;   /* sun mid-tone */
  --pr-orange-300: #FFD79E;   /* warm highlight */
  --pr-orange-200: #FFE6C0;   /* very soft wash */
  --pr-orange-100: #FFF3DF;   /* panel tint over cream */
  --pr-yellow-500: #FFD23F;   /* sunny accent — paw academy ribbon flower */
  --pr-cream:     #FFF7EC;   /* page tint, off-white (modernised from the iWeb #D6D6D6) */
  --pr-paper:     #FFFFFF;   /* pure paper */
  --pr-grey-panel:#D6D6D6;   /* the ORIGINAL iWeb inner-panel grey — kept for purist reproductions */

  /* Neutrals — pulled from the iWeb CSS. rgb(88,77,77) is the body text. */
  --pr-ink-900:   #463C3C;   /* primary text / nav hover — from li:hover and current-page */
  --pr-ink-700:   #584D4D;   /* body text — rgb(88,77,77) from Home.css .Body */
  --pr-ink-500:   #666666;   /* secondary nav and links — from .navbar color #666 */
  --pr-ink-300:   #A7A7A7;   /* decorative "Header" grey — rgb(167,167,167) from Dyna.css .Header */
  --pr-ink-200:   #D6D6D6;   /* dividers, soft borders — matches the iWeb inner panel */
  --pr-ink-100:   #EFEAE4;   /* subtle fills tinted toward cream */

  /* Semantic accents — pulled exactly */
  --pr-rose:      #941100;   /* cat-name red — rgb(148,17,0) from Dyna.css .paragraph_style + .paragraph_style_2 */
  --pr-leaf:      #5B8C3E;   /* health green (system addition) */
  --pr-sky:       #6AA9D4;   /* link / info (system addition) */
  --pr-plum:      #7A4E8E;   /* show / award accent (system addition) */
  --pr-cocoa:     #6B4A2B;   /* warm brown (system addition) */

  /* Functional aliases */
  --bg:           var(--pr-cream);
  --bg-elev:      var(--pr-paper);
  --bg-tint:      var(--pr-orange-100);
  --bg-orange:    var(--pr-orange-700);  /* the page surround */
  --fg-1:         var(--pr-ink-900);
  --fg-2:         var(--pr-ink-700);
  --fg-3:         var(--pr-ink-500);
  --border:       var(--pr-ink-200);
  --border-strong:var(--pr-ink-300);
  --link:         var(--pr-orange-700);
  --link-hover:   var(--pr-orange-900);
  --accent:       var(--pr-orange-700);
  --accent-soft:  var(--pr-orange-200);

  /* Radii — modernisation (original site is flat-corner). Soften, don't sharpen. */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Spacing scale (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shadows — soft, warm. iWeb uses photo-reflection only; the rest is a modern addition. */
  --sh-1: 0 1px 2px rgba(70, 60, 60, 0.08);
  --sh-2: 0 4px 14px rgba(70, 60, 60, 0.10);
  --sh-3: 0 10px 30px rgba(255, 147, 0, 0.18);
  --sh-glow: 0 0 0 4px rgba(255, 147, 0, 0.25);  /* focus/glow on brand orange */
  --sh-inset-shine: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 0 rgba(176, 56, 28, 0.12);

  /* Gradients */
  --grad-logo:     linear-gradient(180deg, #FFC677 0%, #FFB04C 38%, #FF9300 62%, #B0381C 100%);
  --grad-orange:   linear-gradient(180deg, #FFB04C 0%, #FF9300 60%, #B0381C 100%);
  --grad-cream:    linear-gradient(180deg, #FFF7EC 0%, #FFEED1 100%);
  --grad-sunbeam:  radial-gradient(120% 80% at 30% 0%, rgba(255, 210, 63, .35), transparent 60%);

  /* Type families — EXACT from iWeb. Arial throughout; Geneva for tiny footer copy.
     There is NO custom display type. The logo image carries the brand. */
  --ff-body:    "ArialMT", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --ff-bold:    "Arial-BoldMT", Arial, sans-serif;
  --ff-italic:  "Arial-ItalicMT", Arial, sans-serif;
  --ff-footer:  Geneva, "Trebuchet MS", sans-serif;
  --ff-display: "Arial-BoldMT", Arial, sans-serif;  /* alias — no separate display face exists */
  --ff-mono:    "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff-body);
  color: var(--fg-1);
  background: var(--bg);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic typography ---------- */
.pr-display,
h1.pr-display {
  /* The brand has no display typeface — the logo image carries that role.
     This is a workaday accent for moments near the logo. Arial Bold, brand orange. */
  font-family: var(--ff-bold);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  color: var(--pr-orange-700);
}

h1, .pr-h1 {
  /* Cat-name / page-headline treatment — EXACT from Dyna.css .paragraph_style */
  font-family: var(--ff-bold);
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  letter-spacing: 0;
  color: var(--pr-rose);
  margin: 0 0 var(--s-4);
}

h2, .pr-h2 {
  font-family: var(--ff-bold);
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  color: var(--pr-rose);
  margin: 0 0 var(--s-3);
}

h3, .pr-h3 {
  font-family: var(--ff-bold);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--s-2);
}

h4, .pr-h4 {
  font-family: var(--ff-bold);
  font-weight: 700;
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 var(--s-2);
}

p, .pr-p {
  /* EXACT body from Home.css .Body — Arial 15/20, rgb(88,77,77) */
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 20px;
  color: var(--pr-ink-700);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.pr-lead {
  font-family: var(--ff-body);
  font-size: var(--fs-20);
  line-height: var(--lh-base);
  color: var(--fg-1);
  font-weight: 400;
}

.pr-small, small {
  font-size: var(--fs-14);
  color: var(--fg-3);
  line-height: var(--lh-base);
}

.pr-caption {
  font-size: var(--fs-12);
  color: var(--fg-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pr-quote {
  /* Dickens quote on the iWeb home — Arial Italic, NOT Georgia. */
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: 15px;
  line-height: 20px;
  color: var(--pr-ink-700);
  text-align: center;
}

.pr-quote-attr {
  font-family: var(--ff-italic);
  font-style: italic;
  font-size: 11px;
  line-height: 14px;
  color: var(--pr-ink-700);
  text-align: center;
}

.pr-cat-name {
  /* The "CH PolysRock Ms. Dynamite" treatment — EXACT from Dyna.css .paragraph_style */
  font-family: var(--ff-bold);
  font-weight: 700;
  font-size: 36px;
  line-height: 42px;
  color: var(--pr-rose);
  letter-spacing: 0;
}

a, .pr-link {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}
a:hover { color: var(--link-hover); }

code, .pr-code {
  font-family: var(--ff-mono);
  font-size: 0.9em;
  background: var(--pr-orange-100);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  color: var(--pr-orange-900);
}