/* ============================================================
   PAISLEY MURAL TRAIL — design tokens
   Sampled from the painted folk-art logo. Palette is warm and
   earthy: cream paper, chocolate ink, with teal/tomato/ochre
   pulled forward as the working accents.
   ============================================================ */

:root {
  /* ——— core hues ——— */
  --pmt-cream:        #F4EBC8;   /* primary background, "paper" */
  --pmt-cream-2:      #EFE2B0;   /* warmer cream for cards on cream */
  --pmt-cream-3:      #FBF6E2;   /* lightest cream — input fields */

  --pmt-ink:          #2A1A12;   /* chocolate brown — body text, plaque ground */
  --pmt-ink-2:        #4A2E1F;   /* softer ink for secondary text */
  --pmt-ink-3:        #6B4A35;   /* muted ink for captions, dividers */

  --pmt-teal:         #15616D;   /* deep paisley teal — primary action */
  --pmt-teal-deep:    #0E454E;   /* hover / pressed */
  --pmt-teal-soft:    #76A6AE;   /* tints, illustrative fills */

  --pmt-tomato:       #D9531E;   /* signature accent — pins, highlights */
  --pmt-tomato-deep:  #A33B12;
  --pmt-brick:        #8B3A1F;

  --pmt-ochre:        #E8A317;   /* warm yellow-orange */
  --pmt-butter:       #F2D24A;   /* light yellow */
  --pmt-moss:         #A8B845;   /* leafy green */

  /* ——— semantic surfaces ——— */
  --bg:               var(--pmt-cream);
  --bg-elevated:      var(--pmt-cream-3);
  --bg-card:          #FFFFFF;
  --bg-inverse:       var(--pmt-ink);

  --fg:               var(--pmt-ink);
  --fg-muted:         var(--pmt-ink-2);
  --fg-subtle:        var(--pmt-ink-3);
  --fg-on-dark:       var(--pmt-cream);

  --accent:           var(--pmt-teal);
  --accent-hover:     var(--pmt-teal-deep);
  --highlight:        var(--pmt-tomato);

  --border:           rgba(42, 26, 18, 0.18);
  --border-strong:    rgba(42, 26, 18, 0.42);
  --divider:          rgba(42, 26, 18, 0.10);

  /* ——— type scale ——— */
  --font-display:     "Yellowtail", "Pacifico", cursive;                  /* brush-script — echoes "Paisley" */
  --font-slab:        "Ultra", "Bowlby One SC", "Rockwell", serif;        /* heavy slab — echoes "MURAL TRAIL" */
  --font-editorial:   "Fraunces", "Source Serif 4", Georgia, serif;       /* warm serif for body editorial */
  --font-body:        "Work Sans", system-ui, -apple-system, sans-serif;  /* clean UI sans */
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-5xl:   88px;

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ——— spacing (8pt) ——— */
  --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;

  /* ——— radii ——— */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ——— shadows (warm, not generic grey) ——— */
  --shadow-sm:   0 1px 0 rgba(42,26,18,.10),  0 2px 6px rgba(42,26,18,.06);
  --shadow-md:   0 2px 0 rgba(42,26,18,.10),  0 8px 18px rgba(42,26,18,.10);
  --shadow-lg:   0 4px 0 rgba(42,26,18,.10),  0 18px 38px rgba(42,26,18,.14);
  --shadow-cut:  4px 4px 0 var(--pmt-ink);   /* signature offset shadow */
}

/* ——— global type defaults ——— */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* ——— utility primitives ——— */
.pmt-display   { font-family: var(--font-display); font-weight: 400; line-height: var(--leading-tight); }
.pmt-slab      { font-family: var(--font-slab);    font-weight: 400; letter-spacing: .01em; line-height: var(--leading-tight); text-transform: uppercase; }
.pmt-body      { font-family: var(--font-body);    font-weight: 400; }
.pmt-eyebrow   { font-family: var(--font-slab);    font-size: var(--text-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }

/* a paper texture made of two soft radial gradients — gives every cream surface a hand-painted feel without an image */
.pmt-paper {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(232,163,23,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(21,97,109,.07), transparent 55%),
    var(--bg);
}