/* Appearance tint.
 *
 * Loaded after color-scheme.css, which owns the light and dark palettes. This
 * file does not replace either one. It lays a translucent accent wash over the
 * page and its principal surfaces, so choosing a colour tints the whole site the
 * way choosing Dark does, without touching a single text colour.
 *
 * The wash is a background layer rather than a colour swap on purpose. The night
 * mode is a hand-tuned palette of 79 literals that includes semantic colours:
 * error reds, warning ambers, success greens and the QR tools' brand purple.
 * Driving those from a theme colour would quietly turn a validation error into
 * whatever the visitor picked, so the tint stays behind the text.
 *
 * Every accent was generated with its text colour checked against the tinted
 * background it actually sits on, not against the untinted one. All twelve clear
 * 4.5:1 in both schemes. The values are produced by gen_palette.py; this file is
 * the output, not the source of truth.
 */


html[data-sk-accent] {
  --sk-pick: #68438b;
  --sk-pick-hover: #5c3b7a;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(104,67,139,0.12);
  --sk-pick-line: rgba(104,67,139,0.34);
  --sk-pick-tint: #fafbfc;
}

html[data-sk-accent="blue"] {
  --sk-pick: #1e64dc;
  --sk-pick-hover: #1b58c1;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(30,99,219,0.12);
  --sk-pick-line: rgba(30,99,219,0.34);
  --sk-pick-tint: #e7eefa;
}
html[data-sk-accent="indigo"] {
  --sk-pick: #4338ca;
  --sk-pick-hover: #3b31b2;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(67,56,202,0.12);
  --sk-pick-line: rgba(67,56,202,0.34);
  --sk-pick-tint: #eaeaf8;
}
html[data-sk-accent="violet"] {
  --sk-pick: #6d28d9;
  --sk-pick-hover: #6023bf;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(109,40,217,0.12);
  --sk-pick-line: rgba(109,40,217,0.34);
  --sk-pick-tint: #eee9f9;
}
html[data-sk-accent="teal"] {
  --sk-pick: #0f766e;
  --sk-pick-hover: #0d6861;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(15,118,110,0.12);
  --sk-pick-line: rgba(15,118,110,0.34);
  --sk-pick-tint: #e6f0f0;
}
html[data-sk-accent="green"] {
  --sk-pick: #147b3b;
  --sk-pick-hover: #126c34;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(20,122,58,0.12);
  --sk-pick-line: rgba(20,122,58,0.34);
  --sk-pick-tint: #e7f1ec;
}
html[data-sk-accent="forest"] {
  --sk-pick: #166534;
  --sk-pick-hover: #13592e;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(22,101,52,0.12);
  --sk-pick-line: rgba(22,101,52,0.34);
  --sk-pick-tint: #e7eeeb;
}
html[data-sk-accent="amber"] {
  --sk-pick: #ad5009;
  --sk-pick-hover: #984608;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(172,79,8,0.12);
  --sk-pick-line: rgba(172,79,8,0.34);
  --sk-pick-tint: #f4ede7;
}
html[data-sk-accent="orange"] {
  --sk-pick: #be400c;
  --sk-pick-hover: #a7380a;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(190,63,11,0.12);
  --sk-pick-line: rgba(190,63,11,0.34);
  --sk-pick-tint: #f5ebe8;
}
html[data-sk-accent="red"] {
  --sk-pick: #b91c1c;
  --sk-pick-hover: #a31919;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(185,28,28,0.12);
  --sk-pick-line: rgba(185,28,28,0.34);
  --sk-pick-tint: #f4e8e9;
}
html[data-sk-accent="rose"] {
  --sk-pick: #be123c;
  --sk-pick-hover: #a71035;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(190,18,60,0.12);
  --sk-pick-line: rgba(190,18,60,0.34);
  --sk-pick-tint: #f5e7ec;
}
html[data-sk-accent="pink"] {
  --sk-pick: #c6236c;
  --sk-pick-hover: #ae1f5f;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(197,35,107,0.12);
  --sk-pick-line: rgba(197,35,107,0.34);
  --sk-pick-tint: #f7e9f1;
}
html[data-sk-accent="slate"] {
  --sk-pick: #475569;
  --sk-pick-hover: #3e4b5c;
  --sk-pick-ink: #ffffff;
  --sk-pick-soft: rgba(71,85,105,0.12);
  --sk-pick-line: rgba(71,85,105,0.34);
  --sk-pick-tint: #ebedf0;
}

/* In the dark scheme the accent has to be lighter to stay legible against a
   near-black page, so the same attribute yields a different set of values. */
html[data-sk-scheme="dark"] {
  --sk-pick: #c79bf0;
  --sk-pick-hover: #cea7f2;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(199,155,240,0.18);
  --sk-pick-line: rgba(199,155,240,0.40);
  --sk-pick-tint: #14121a;
}

html[data-sk-scheme="dark"][data-sk-accent="blue"] {
  --sk-pick: #7fb0ff;
  --sk-pick-hover: #8eb9ff;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(127,176,255,0.18);
  --sk-pick-line: rgba(127,176,255,0.40);
  --sk-pick-tint: #222738;
}
html[data-sk-scheme="dark"][data-sk-accent="indigo"] {
  --sk-pick: #9a92f0;
  --sk-pick-hover: #a69ff2;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(154,146,240,0.18);
  --sk-pick-line: rgba(154,146,240,0.40);
  --sk-pick-tint: #252336;
}
html[data-sk-scheme="dark"][data-sk-accent="violet"] {
  --sk-pick: #b89fef;
  --sk-pick-hover: #c1abf1;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(184,159,239,0.18);
  --sk-pick-line: rgba(184,159,239,0.40);
  --sk-pick-tint: #292436;
}
html[data-sk-scheme="dark"][data-sk-accent="teal"] {
  --sk-pick: #5cc9c4;
  --sk-pick-hover: #70cfcb;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(92,201,196,0.18);
  --sk-pick-line: rgba(92,201,196,0.40);
  --sk-pick-tint: #1d2a30;
}
html[data-sk-scheme="dark"][data-sk-accent="green"] {
  --sk-pick: #6bd18c;
  --sk-pick-hover: #7dd79a;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(107,209,140,0.18);
  --sk-pick-line: rgba(107,209,140,0.40);
  --sk-pick-tint: #1f2b29;
}
html[data-sk-scheme="dark"][data-sk-accent="forest"] {
  --sk-pick: #7cc98d;
  --sk-pick-hover: #8ccf9b;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(124,201,141,0.18);
  --sk-pick-line: rgba(124,201,141,0.40);
  --sk-pick-tint: #222a29;
}
html[data-sk-scheme="dark"][data-sk-accent="amber"] {
  --sk-pick: #e8b964;
  --sk-pick-hover: #ebc177;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(232,185,100,0.18);
  --sk-pick-line: rgba(232,185,100,0.40);
  --sk-pick-tint: #302824;
}
html[data-sk-scheme="dark"][data-sk-accent="orange"] {
  --sk-pick: #f5a06b;
  --sk-pick-hover: #f6ab7d;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(245,160,107,0.18);
  --sk-pick-line: rgba(245,160,107,0.40);
  --sk-pick-tint: #312425;
}
html[data-sk-scheme="dark"][data-sk-accent="red"] {
  --sk-pick: #f28b8b;
  --sk-pick-hover: #f49999;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(242,139,139,0.18);
  --sk-pick-line: rgba(242,139,139,0.40);
  --sk-pick-tint: #312229;
}
html[data-sk-scheme="dark"][data-sk-accent="rose"] {
  --sk-pick: #f28fa8;
  --sk-pick-hover: #f49cb2;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(242,143,168,0.18);
  --sk-pick-line: rgba(242,143,168,0.40);
  --sk-pick-tint: #31222c;
}
html[data-sk-scheme="dark"][data-sk-accent="pink"] {
  --sk-pick: #f472b6;
  --sk-pick-hover: #f583bf;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(244,114,182,0.18);
  --sk-pick-line: rgba(244,114,182,0.40);
  --sk-pick-tint: #311e2e;
}
html[data-sk-scheme="dark"][data-sk-accent="slate"] {
  --sk-pick: #9fb0c4;
  --sk-pick-hover: #abb9cb;
  --sk-pick-ink: #10141a;
  --sk-pick-soft: rgba(159,176,196,0.18);
  --sk-pick-line: rgba(159,176,196,0.40);
  --sk-pick-tint: #262730;
}

/* The names the rest of the plugin already reads. Defined once here, on the
   root, and deliberately not repeated per accent: they resolve to whichever
   --sk-pick the attribute selected. */
html[data-sk-accent] {
  --sk-accent: var(--sk-pick);
  --sk-accent-hover: var(--sk-pick-hover);
  --sk-accent-ink: var(--sk-pick-ink);
  --sk-accent-soft: var(--sk-pick-soft);
  --sk-accent-line: var(--sk-pick-line);
  --sk-tint: var(--sk-pick-tint);
}

/* The wash itself.
 *
 * background-image over an existing background-color composites the two, so the
 * theme's own colour still paints and the tint lands on top of it. Fixed
 * attachment is deliberately not used: it would leave the wash behind on mobile
 * as the page scrolled.
 *
 * The selector list is the page's principal surfaces: the body, the header and
 * footer bars, the site's own cards, panels and hero blocks, and the tool
 * wrappers. Anything not listed keeps its existing colour, which is the safe
 * direction to be wrong in. */
html[data-sk-accent] body,
html[data-sk-accent] [data-header*="type-1"] .ct-header,
html[data-sk-accent] .ct-footer,
html[data-sk-accent] .studykit-values-footer-container,
html[data-sk-accent] .sk-home-hero,
html[data-sk-accent] .sk-services-hero,
html[data-sk-accent] .sk-home-card,
html[data-sk-accent] .sk-services-card,
html[data-sk-accent] .sk-flow-card,
html[data-sk-accent] .sk-group-archive-header,
html[data-sk-accent] .sk-group-archive-link,
html[data-sk-accent] .sk-related-link,
html[data-sk-accent] .sk-hero,
html[data-sk-accent] .sk-media-panel,
html[data-sk-accent] .sk-rewrite-panel,
html[data-sk-accent] .sk-video-panel,
html[data-sk-accent] .sk-appearance-panel {
  background-image: linear-gradient(var(--sk-tint), var(--sk-tint));
}

/* Cards sitting on a card need a lighter touch than the page behind them, or
   the two wash levels flatten into one and the card stops reading as a card. */
html[data-sk-accent] .sk-home-card,
html[data-sk-accent] .sk-services-card,
html[data-sk-accent] .sk-flow-card,
html[data-sk-accent] .sk-group-archive-link,
html[data-sk-accent] .sk-related-link,
html[data-sk-accent] .sk-media-panel,
html[data-sk-accent] .sk-rewrite-panel,
html[data-sk-accent] .sk-video-panel,
html[data-sk-accent] .sk-appearance-panel {
  background-color: var(--sk-surface, #fff);
}

/* Heading and link colour follows the accent so the page does not read as a
   purple page with a coloured border. Only the site's own surfaces are listed,
   which is the same boundary the rest of the appearance tool works within. */
html[data-sk-accent] .ct-header .ct-nav a:hover,
html[data-sk-accent] .ct-footer a,
html[data-sk-accent] .entry-content a,
html[data-sk-accent] .sk-home-card:hover,
html[data-sk-accent] .sk-services-card:hover,
html[data-sk-accent] .sk-group-archive-link:hover {
  color: var(--sk-accent);
}

/* Borders pick up a faint line of the same colour so panels do not sit on the
   page with a neutral edge against a tinted field. */
html[data-sk-accent] .ct-footer,
html[data-sk-accent] .sk-home-card,
html[data-sk-accent] .sk-services-card,
html[data-sk-accent] .sk-group-archive-link,
html[data-sk-accent] .sk-related-link,
html[data-sk-accent] .sk-media-panel,
html[data-sk-accent] .sk-rewrite-panel,
html[data-sk-accent] .sk-video-panel {
  border-color: var(--sk-accent-line);
}


/* The site's own accent family, re-pointed at the chosen colour. */
html[data-sk-accent] {
  --sk-purple: var(--sk-accent);
  --sk-purple-dark: var(--sk-accent);
  --skh-purple: var(--sk-accent);
  --skh-purple-dark: var(--sk-accent);
  --skr-purple: var(--sk-accent);
  --skr-purple-dark: var(--sk-accent);
  --theme-heading-color: var(--sk-accent);
  --theme-headings-color: var(--sk-accent);
  --theme-heading-2-color: var(--sk-accent);
}

html[data-sk-accent][data-sk-scheme="dark"] {
  --sk-purple: var(--sk-accent);
  --sk-purple-dark: var(--sk-accent);
  --skh-purple: var(--sk-accent);
  --skh-purple-dark: var(--sk-accent);
  --skr-purple: var(--sk-accent);
  --skr-purple-dark: var(--sk-accent);
  --theme-heading-color: var(--sk-accent);
  --theme-headings-color: var(--sk-accent);
  --theme-heading-2-color: var(--sk-accent);
}

/* The same tokens, on the wrappers that declare them for themselves. This is
   not redundancy: the rule above cannot reach inside these, because an
   inherited value loses to any declaration on the element that re-declares
   it, whatever the specificity of the inheriting rule. */
html[data-sk-accent] .sk-home-page,
html[data-sk-accent] .sk-services-page,
html[data-sk-accent] body.home .entry-content {
  --sk-purple: var(--sk-accent);
  --sk-purple-dark: var(--sk-accent);
  --skh-purple: var(--sk-accent);
  --skh-purple-dark: var(--sk-accent);
  --skr-purple: var(--sk-accent);
  --skr-purple-dark: var(--sk-accent);
  --theme-heading-color: var(--sk-accent);
  --theme-headings-color: var(--sk-accent);
  --theme-heading-2-color: var(--sk-accent);
}

/* The tool pages declare a four-token accent family of their own, plus a soft
   neutral for chips and the upload target. That neutral is not actually
   neutral: it is the old palette's purple at four percent, which reads as a
   pink box on a teal page. It is folded into the accent for the same reason. */
html[data-sk-accent] .sk-media-page,
html[data-sk-accent] .sk-rewrite-wrap,
html[data-sk-accent] .sk-video-page,
/* Flashcards is in this family for the same reason the others are: its
   stylesheet declares --sk-accent itself, and without being named here that
   declaration outranks the tint and the accent picker has no effect on the
   tool. Its primary button then kept the light accent while taking the dark
   scheme's dark-on-accent text, which is the one combination on the site that
   is genuinely hard to read. */
html[data-sk-accent] .sk-fc-root {
  --sk-accent: var(--sk-pick);
  --sk-accent-hover: var(--sk-pick-hover);
  --sk-accent-strong: var(--sk-pick-hover);
  --sk-on-accent: var(--sk-pick-ink);
  --sk-accent-bg: var(--sk-pick-tint);
  --sk-soft: var(--sk-pick-tint);
}

/* The primary button and the closing panel are the two places the home and
   services pages use a literal rather than a token, so they are named here. */
html[data-sk-accent] .sk-home-button:not(.secondary),
html[data-sk-accent] .sk-services-button:not(.secondary) {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
  color: var(--sk-accent-ink);
}
html[data-sk-accent] .sk-home-button:not(.secondary):hover,
html[data-sk-accent] .sk-services-button:not(.secondary):hover {
  background: var(--sk-accent-hover);
  border-color: var(--sk-accent-hover);
}

/* The closing call to action is a saturated block by design. It takes the
   accent wash rather than the flat accent, so the button inside it still reads
   as the brightest thing on the page. */
html[data-sk-accent] .sk-home-cta,
html[data-sk-accent] .sk-services-cta {
  background: var(--sk-tint);
}
html[data-sk-accent] .sk-home-cta .sk-home-button,
html[data-sk-accent] .sk-services-cta .sk-services-button {
  background: var(--sk-accent);
  color: var(--sk-accent-ink);
  border-color: var(--sk-accent);
}

/* The back-to-top button is pinned pink in the theme, which reads as a second
   accent on a page that already has one. */
html[data-sk-accent] .ct-back-to-top {
  background: var(--sk-accent);
  color: var(--sk-accent-ink);
}

/* Dark scheme headings.
 *
 * In the light scheme the headings follow the accent through --theme-heading-color
 * and needed nothing extra. Dark mode does not: color-scheme.css pins headings to
 * a literal lavender, and to a literal pink for the blog title and the footer
 * headings, so the tokens are never consulted and an amber page kept lavender
 * headings. These selectors are the same specificity as that file's, and this one
 * loads later, so they win without !important.
 *
 * Matching the specificity is deliberate. Padding the selector until it won
 * outright would also outrank anything the theme adds later that was meant to
 * keep its own colour. */

html[data-sk-scheme="dark"][data-sk-accent] h1,
html[data-sk-scheme="dark"][data-sk-accent] h2,
html[data-sk-scheme="dark"][data-sk-accent] h3,
html[data-sk-scheme="dark"][data-sk-accent] h4,
html[data-sk-scheme="dark"][data-sk-accent] h5,
html[data-sk-scheme="dark"][data-sk-accent] h6,
html[data-sk-scheme="dark"][data-sk-accent] .sk-services-grouphead,
html[data-sk-scheme="dark"][data-sk-accent] .sk-group-archive-header h1,
html[data-sk-scheme="dark"][data-sk-accent] .sk-group-archive-name,
html[data-sk-scheme="dark"][data-sk-accent] .ct-footer h3,
html[data-sk-scheme="dark"][data-sk-accent] .ct-footer h4,
html[data-sk-scheme="dark"][data-sk-accent] [data-prefix="blog"] .entry-header .page-title {
  color: var(--sk-accent);
}