/* ReckonWells teal skin for the embedded well-health tool.
   -------------------------------------------------------------------------
   Loaded AFTER styles.css on the tool pages (well-lookup / well-map /
   royalty-calculator / railroad-commission-well-search). styles.css is a
   byte-identical copy of ftwsoft's tool stylesheet and MUST stay that way —
   so all ReckonWells re-branding of the tool lives HERE, not in styles.css.
   The tool is ~fully tokenized (212 var(--…) refs), so redefining the token
   block flips almost everything; the three rules below cover the few warm
   colors that are hardcoded (a gradient stop + the button-hover + shadow).

   Contrast: the tool's buttons use WHITE text on --primary, and the bright
   brand teal #3ca6a0 fails AA with white (~2.9:1). So --primary is a DARK
   teal (white ~6:1) and the bright #3ca6a0 is --accent (fills/links/borders,
   never carrying white button text). See CLAUDE.md “Pages & brand”. */

:root {
    --bg-dark: #0f1416;            /* cool dark, matches the marketing pages */
    --text-main: #e9ecec;
    --text-muted: #9aa6a6;
    --primary: #0f6b62;            /* buttons — white text ~6.4:1 AA */
    --primary-glow: rgba(60, 166, 160, 0.22);
    --secondary: #3ca6a0;
    --accent: #3ca6a0;            /* bright brand teal — fills, links, borders */
    --warm: #5cc3ba;             /* light teal for small text accents (AA on dark) */
    --warm-muted: rgba(60, 166, 160, 0.12);
    --warm-border: rgba(60, 166, 160, 0.30);
}

/* Non-tokenized warm spots that the token block can't reach: */
.scroll-progress { background: linear-gradient(90deg, var(--primary), #3ca6a0); }
.btn-primary { box-shadow: 0 2px 8px rgba(60, 166, 160, 0.30); }
.btn-primary:hover {
    background: #147d73;                              /* lighter teal, still white-safe (~5:1) */
    box-shadow: 0 4px 12px rgba(60, 166, 160, 0.35);
}

/* The lookup hero's ambient page glow — orange radials → teal. */
.hero-bg {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0) 0 0 / 32px 32px,
        radial-gradient(ellipse at 70% 50%, rgba(60, 166, 160, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse at 25% 75%, rgba(60, 166, 160, 0.05) 0%, transparent 50%);
}

/* Hand-drawn underline under the hero highlight ("API number") — orange squiggle → teal
   (same SVG, stroke #c47a3c → #3ca6a0). */
.highlight::after {
    background: url("data:image/svg+xml,%3Csvg width='200' height='30' viewBox='0 0 200 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='r' x='-10%25' y='-20%25' width='120%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='5.5'/%3E%3C/filter%3E%3Cpath d='M2 15 C 28 5 58 25 92 15 C 126 5 162 25 198 15' stroke='%233ca6a0' stroke-width='8' stroke-linecap='round' fill='none' filter='url(%23r)' opacity='0.92'/%3E%3C/svg%3E") repeat-x;
    background-size: 200px 30px;
}