/* =====================================================================
   kylandforms.com — the colour tokens, one file (Instruction 22)
   ---------------------------------------------------------------------
   Every public page, the map and /leads load this before their own
   stylesheet, and none of those stylesheets declares a colour of its
   own. Sizes, type, radii and shadows stay with each stylesheet: the
   pages' scale and the map's differ, and making them one would move
   pixels (22's build notes list the differences).

   :root holds the hub's colours. A sister site's palette is one block,
   [data-site="…"] on <html>: set by the page when the request is on
   that site's host, and by the map when exactly one of its types is
   showing (decision 3). A palette is a dozen base values; every tint
   is derived from a base through its -rgb triplet, so a block never
   has to list the forty colours it changes.

   The hub's values are fixed by tests/unit-sites.php: a change to one
   of them has to change the test too, so it is never an accident.
   ===================================================================== */
:root {
  /* the two base colours, and each as a triplet for the tints */
  --bg:          #E8DCC8;                    /* sandstone page */
  --ink:         #2E2418;                    /* dark brown text */
  --ink-rgb:     46, 36, 24;                 /* --ink, for rgba(var(--ink-rgb), a) */
  --on-dark-rgb: 232, 220, 200;              /* the light colour on the banner and the map's chrome */
  --banner-bg:   #2E2418;
  --banner-text: #E8DCC8;
  --banner-muted: rgba(var(--on-dark-rgb), 0.62);

  /* section accents — set on <body data-section> below */
  --accent-tunnels:    #6B4A3A;
  --accent-lakes:      #4A7C93;
  --accent-caves:      #4F5359;
  --accent-leads:      #8A6A2F;
  --accent-chimneys:   #7B5E8C;              /* muted plum — confirmed by Morris (12) */
  /* the three sibling sites, used for outbound markers and nearby dots, and each one's own accent */
  --accent-arches:     #9E3B2E;              /* kyarches brick red — confirmed by Morris (28) */
  --accent-overlooks:  #4A7C59;              /* kyoverlooks earth green */
  --accent-waterfalls: #1A6EC4;              /* kywaterfalls blue */

  --accent:      var(--ink);                 /* hub default: no accent, the rule is ink */
  --accent-text: var(--bg);                  /* text on an accent surface */

  /* derived neutrals — always from the two base colours */
  --muted:       rgba(var(--ink-rgb), 0.58);
  --muted-2:     rgba(var(--ink-rgb), 0.40);
  --line:        rgba(var(--ink-rgb), 0.16);
  --line-strong: rgba(var(--ink-rgb), 0.30);
  --surface:     rgba(255, 255, 255, 0.28);  /* raised card on sandstone */
  --surface-2:   rgba(var(--ink-rgb), 0.06); /* recessed panel */
  --focus:       #1A6EC4;

  /* the map: its bar, buttons and popups (chrome), its panels, and what lies under the tiles */
  --chrome:         rgba(var(--ink-rgb), 0.92);
  --chrome-text:    #E8DCC8;
  --chrome-muted:   rgba(var(--on-dark-rgb), 0.62);
  --chrome-line:    rgba(var(--on-dark-rgb), 0.18);
  --chrome-fill:    rgba(var(--on-dark-rgb), 0.10);   /* the search field */
  --chrome-fill-2:  rgba(var(--on-dark-rgb), 0.12);   /* a popup's buttons */
  --chrome-fill-3:  rgba(var(--on-dark-rgb), 0.16);   /* the search button */
  --chrome-edge:    rgba(var(--on-dark-rgb), 0.22);   /* the round buttons' rim */
  --pin-halo:       rgba(var(--on-dark-rgb), 0.55);   /* the focused pin's halo */
  --attribution-bg: rgba(var(--on-dark-rgb), 0.85);
  --panel:          #F4ECDD;
  --panel-2:        rgba(var(--ink-rgb), 0.06);
  --map-bg:         #1b1610;                          /* behind the tiles while they load */
  --map-county:     #3a2f24;                          /* county lines (map.js reads it) */
  --map-state:      var(--ink);                       /* the state outline (map.js reads it) */
  --scrim:          rgba(20, 15, 10, 0.72);           /* behind the disclaimer */
  --picture-ground: var(--banner-bg);                 /* a sister site's front picture's ground (panel.php reads it; 33) */

  /* the heat map (30): the old kyarches.com heat map's own colours, the same for every type and every site (heat-map.js reads
     the ramp, at the old map's stops 0, .15, .3, .45, .55, .7, .85 and 1; the legend's bar takes five of them, as the old one did) */
  --heat-ground:  #000000;                            /* the ground under the faded hillshade */
  --heat-county:  #666666;                            /* the county lines */
  --heat-count:   #E8A545;                            /* the figure in the count line */
  --heat-ramp-0:  #0D47A1;  --heat-ramp-1: #1565C0;  --heat-ramp-2: #43A047;  --heat-ramp-3: #8BC34A;
  --heat-ramp-4:  #FDD835;  --heat-ramp-5: #FF8F00;  --heat-ramp-6: #E65100;  --heat-ramp-7: #B71C1C;
  --ok:   #6adb8a;
  --warn: #d9a34f;
  --err:  #A63D2F;

  /* the sunrise-and-sunset widget on a sister site's front page (23): the sky, earliest to latest, as triplets
     (sun-widget.js reads them), and what it draws over the sky — the old kyoverlooks.com widget's own values */
  --sun-rise-1-rgb: 38, 42, 88;
  --sun-rise-2-rgb: 88, 70, 122;
  --sun-rise-3-rgb: 200, 105, 90;
  --sun-rise-4-rgb: 240, 165, 75;
  --sun-rise-5-rgb: 252, 220, 135;
  --sun-set-1-rgb:  252, 205, 115;
  --sun-set-2-rgb:  240, 145, 65;
  --sun-set-3-rgb:  205, 80, 70;
  --sun-set-4-rgb:  110, 55, 110;
  --sun-set-5-rgb:  38, 42, 88;
  --sun-over-rgb:   255, 255, 255;                    /* the time-zone line, its labels, the point */
  --sun-shade-rgb:  0, 0, 0;                          /* the labels' outline */

  /* 24 — the record page's lightbox */
  --lightbox-bg:    rgba(12, 9, 6, 0.96);
  --lightbox-text:  #F4ECDD;

  /* 24 — Vista Conditions: the five ratings' bar (the old kyoverlooks.com card's own colours); the rating's word is always --ink */
  --vc-clear: #4A7C59;
  --vc-good:  #6B8E5A;
  --vc-hazy:  #B5A78A;
  --vc-poor:  #A0826D;
  --vc-fog:   #8B4513;

  /* 24 — Golden Hour's drawings (the sun compass, the sun-height chart): fills and lines only; every time on the page is ink */
  --gh-golden-rgb: 240, 165, 75;                      /* golden hour */
  --gh-blue-rgb:   55, 110, 190;                      /* blue hour */
  --gh-sun:        #C8702A;                           /* the sun's path and the sun */
  --gh-rise:       #D08A1E;                           /* the line to sunrise */
  --gh-set:        #B8452E;                           /* the line to sunset */
  --gh-view-rgb:   74, 124, 89;                       /* an overlook's view: which way it faces, how wide */

  /* 24 — the map's land layer (map.js reads them; it typed them until 24), as they were: the map extras below change two */
  --land-forest:       #2f6b3a;
  --land-conservation: #6b8f3a;
  --land-wma-line:     #7a6a2f;
  --land-wma:          #8A6A2F;
  --land-state-park:   #3d5e3a;                       /* reads as the forests' green (bugs.md): [data-map-extras] */
  --land-preserve:     #4a7c59;
  --land-natural-area: #4a7c59;                       /* the preserves' green: [data-map-extras] */
  --land-nps:          #8B4513;
  --land-refuge:       #3a5e7a;
  --land-military:     #7A7F86;
  --land-ngo:          #6b5b4e;
  --land-city:         #4f5359;
}

/* 24 — the map extras (feature.map_extras; the map page sets data-map-extras on <html>): state parks and state natural areas in
   greens of their own. CIELAB ΔE to the forests' green: state parks 12.6 before, 29.9 after; natural areas to the preserves' 0 before,
   28.4 after. */
[data-map-extras] {
  --land-state-park:   #2A9D8F;
  --land-natural-area: #9CC5A1;
}

/* Kentucky Overlooks (22; reworked in 33 after Morris's "too white", 3 October): his page #ECE7DA and text #26352A; the banner's
   green #2C3E2D and the accent #4A7C59 as they were. The panels a little lighter than the page, the muted text stronger than the
   hub's 0.58 so that it reads 4.5:1 or more on the page, the map's chrome and the front picture's ground from the text's green.
   Every pair measured (33 build notes, B.5). Change any value here by name; the tints follow. */
[data-site="overlooks"] {
  --bg:           #ECE7DA;                   /* page: Morris's */
  --ink:          #26352A;                   /* text: Morris's */
  --ink-rgb:      38, 53, 42;
  --on-dark-rgb:  242, 237, 228;
  --banner-bg:    #2C3E2D;                   /* the banner's green, as it was */
  --banner-text:  #F2EDE4;
  --chrome-text:  #F2EDE4;
  --muted:        rgba(var(--ink-rgb), 0.72);  /* 4.8:1 on the page */
  --muted-2:      rgba(var(--ink-rgb), 0.56);  /* 3.1:1: the "no photo" placeholder */
  --accent:       var(--accent-overlooks);   /* the rule under the banner, buttons */
  --accent-text:  #FFFFFF;                   /* 4.9:1 on the accent */
  --panel:        #F4F0E6;                   /* a little lighter than the page */
  --map-bg:       #141c15;
  --map-county:   #2f4231;
  --scrim:        rgba(12, 20, 13, 0.72);
  --picture-ground: var(--ink);              /* the front picture's ground: the text's green */
}

/* Kentucky Arches (28; reworked in 29 after Morris's first look, 1 October): a warm cream page toward the hub's sandstone and a
   dark brown with a little red for the text, the banner and the map's chrome; the brick red #9E3B2E stays for the rule, the
   buttons and the badges. Every pair measured (29 build notes): text 11.4:1 on the page, the banner's 11.4:1, white on the brick
   red 6.7:1, the brick red as text 5.5:1. The muted text is stronger here than the hub's 0.58 so that it reads 4.8:1 on the
   cream. Change any value here by name; the tints follow. */
[data-site="arches"] {
  --bg:           #EFE6DA;                   /* page: a warm cream */
  --ink:          #3B2622;                   /* text: dark brown with a little red */
  --ink-rgb:      59, 38, 34;
  --on-dark-rgb:  239, 230, 218;             /* the cream, on the banner and the map's chrome */
  --banner-bg:    #3B2622;
  --banner-text:  #EFE6DA;
  --chrome-text:  #EFE6DA;
  --muted:        rgba(var(--ink-rgb), 0.70);  /* 4.8:1 on the page */
  --muted-2:      rgba(var(--ink-rgb), 0.55);  /* 3.2:1: the "no photo" placeholder */
  --accent:       var(--accent-arches);      /* the rule under the banner, buttons */
  --accent-text:  #FFFFFF;                   /* 6.7:1 on the accent */
  --panel:        #F6EFE6;
  --map-bg:       #1E1411;
  --map-county:   #4A302A;
  --scrim:        rgba(24, 15, 13, 0.72);
}

/* Kentucky Waterfalls (35, one draft for Morris to judge on the rehearsal host; Question 857's decision 8): a cream page, a little
   cooler than the arches' and the overlooks' for the blue, and the old kywaterfalls.com's deep blue #082D52 for the text, the banner
   and the map's chrome; the waterfall blue #1A6EC4 for the rule, the buttons and the badges. As small text the waterfall blue reads
   4.2:1 on the page and 4.5:1 on a card, so text in the accent takes a darker blue of its own (--accent-ink: 5.3:1 on the page,
   5.6:1 on a card) from the start, the lesson of kyoverlooks.com's green (bugs.md §14). Every pair measured (35 build notes): text
   11.4:1 on the page, the banner's 11.9:1, white on the waterfall blue 5.2:1, the muted text 5.0:1. Change any value here by name;
   the tints follow. */
[data-site="waterfalls"] {
  --bg:           #ECE8DF;                   /* page: a cool cream */
  --ink:          #082D52;                   /* text: the old site's deep blue */
  --ink-rgb:      8, 45, 82;
  --on-dark-rgb:  241, 237, 229;             /* the light cream, on the banner and the map's chrome */
  --banner-bg:    #082D52;
  --banner-text:  #F1EDE5;
  --chrome-text:  #F1EDE5;
  --muted:        rgba(var(--ink-rgb), 0.70);  /* 4.95:1 on the page */
  --muted-2:      rgba(var(--ink-rgb), 0.55);  /* 3.3:1: the "no photo" placeholder */
  --accent:       var(--accent-waterfalls);  /* the rule under the banner, buttons, badges */
  --accent-text:  #FFFFFF;                   /* 5.2:1 on the accent */
  --accent-ink:   #1A5FA8;                   /* the accent as text (a card's type, "copied"): 5.3:1 on the page, 5.6:1 on a card */
  --panel:        #F4F1EA;
  --map-bg:       #07131F;
  --map-county:   #213A52;
  --scrim:        rgba(4, 14, 26, 0.72);
}

/* section accents: ONE line per landform type */
body[data-section="tunnels"]    { --accent: var(--accent-tunnels); }
body[data-section="lakes"]      { --accent: var(--accent-lakes); }
body[data-section="caves"]      { --accent: var(--accent-caves); }
body[data-section="leads"]      { --accent: var(--accent-leads); }
body[data-section="chimneys"]   { --accent: var(--accent-chimneys); }
body[data-section="arches"]     { --accent: var(--accent-arches); }
body[data-section="overlooks"]  { --accent: var(--accent-overlooks); }
body[data-section="waterfalls"] { --accent: var(--accent-waterfalls); }
/* per-element accent (type band, nearby dots, county lists) */
[data-type="tunnel"]    { --type-accent: var(--accent-tunnels); }
[data-type="lake"]      { --type-accent: var(--accent-lakes); }
[data-type="cave"]      { --type-accent: var(--accent-caves); }
[data-type="lead"]      { --type-accent: var(--accent-leads); }
[data-type="chimney"]   { --type-accent: var(--accent-chimneys); }
[data-type="arch"]      { --type-accent: var(--accent-arches); }
[data-type="overlook"]  { --type-accent: var(--accent-overlooks); }
[data-type="waterfall"] { --type-accent: var(--accent-waterfalls); }