/* ==========================================================================
   COASTAL BLUE — the chosen theme (Scripps "Coastal Research" + Light Break
   layout + Blue B surface color)

   HOW TO USE THIS FILE
   ---------------------
   Everything that can change color lives in the single :root block right
   below this comment. To change any color on the site, edit ONE line here —
   every card, button, section, and piece of text that uses that variable
   updates automatically, everywhere it appears. You never need to hunt
   through the rest of this file (or style.css) for a hardcoded hex code —
   there aren't any left; every rule below reads from these variables.

   The most likely one you'll want to tweak is --color-surface (currently
   Blue B, #203b58) — it's the color of the cards, the primary button, and
   (as a lighter tint) the headings in the light sections.

   This file is loaded AFTER style.css, which has the structural rules
   (spacing, grid, typography sizes, component shapes). This file only
   carries colors and a handful of layout choices specific to this theme
   (the light/dark section split, pill-shaped nav, etc).
   ========================================================================== */

:root {
  /* --- Base surfaces --- */
  --color-bg:          #142723;  /* main page background (dark teal) */
  --color-bg-alt:       #80b5aa;  /* alternating section background (light sage) — this is what makes every other ".section" a light "break" */
  --color-surface:      #203b58;  /* Blue B — card backgrounds, primary button fill, light-section heading text */
  --color-surface-hover: #2c4f73; /* hover state for anything using --color-surface as a fill */

  /* --- Borders & structure --- */
  --color-border:       #435165;  /* card borders, dividers, footer top-rule, stat-row dividers */

  /* --- Text --- */
  --color-text:         #edf2ef;  /* primary text on dark backgrounds (near-white) */
  --color-text-muted:   #647c76;  /* secondary/muted text on dark backgrounds */

  /* --- Accent (sage) --- */
  --color-accent:       #80b5aa;  /* links, secondary button outline, eyebrow labels on dark sections, avatar ring */
  --color-accent-dark:  #a3ccc3;  /* stat numbers, hover tint for accent elements */
  --color-accent-bg:    #1f3b34;  /* dark wash used behind small accent chips */
  --color-link:         #80b5aa;  /* plain text links (.link, .prose a) */

  /* --- Badge colors (the small pills on the Publications and Inventions
         pages: "First Author", "Patent Drafted", journal categories, and the
         skill tiers if a Skills page is ever added). style.css ships light-page
         versions of these; they're re-stated here so every color on the site
         is edited in this one file. --- */
  --badge-patent-bg:    #4a3b1e;  /* "Patent Drafted" */
  --badge-patent-text:  #e8c88a;
  --badge-pub-bg:       #1f3b34;  /* "Published Method" */
  --badge-pub-text:     #a3ccc3;
  --badge-biorxiv-bg:   #33294a;  /* "In Review / bioRxiv" */
  --badge-biorxiv-text: #c5b0e8;
  --badge-dev-bg:       #203b58;  /* "First Author", "Developed" */
  --badge-dev-text:     #cfe0f0;

  --tier-expert-bg:     #80b5aa;
  --tier-expert-text:   #142723;
  --tier-proficient-bg: #2c4f73;
  --tier-proficient-text: #dbe7f2;
  --tier-familiar-bg:   #24322e;
  --tier-familiar-text: #a8bab4;

  /* --- Corner rounding (soft, from the Coastal Research direction) --- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --lh-heading: 1.15;
}

/* ==========================================================================
   Typography & shape (inherited feel from the Scripps "Coastal Research"
   direction — soft serif headings, fully rounded buttons/badges/cards)
   ========================================================================== */
h1 { font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.4rem); }
h2 { font-weight: 400; }
.eyebrow { letter-spacing: 0.12em; font-weight: 600; }

.site-header { backdrop-filter: none; background: color-mix(in srgb, var(--color-bg) 92%, transparent); }
.nav a { border-radius: 999px; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--color-accent-bg); border-bottom-color: transparent; color: var(--color-accent-dark); }

.card { border: none; box-shadow: var(--shadow-sm); }
.btn { border-radius: 999px; }
.btn-secondary { border-color: var(--color-border); }
.stat-tile { border-radius: var(--radius-lg); }
.avatar { border: 4px solid var(--color-accent-bg); box-shadow: 0 0 0 2px var(--color-accent); }
.badge { border-radius: 999px; }

/* ==========================================================================
   Light Break sections

   HOW TO MAKE A SECTION LIGHT
   ----------------------------
   Add the word "section-light" to a section's class in the HTML:

       <section class="section">              <- dark (default)
       <section class="section section-light"> <- light sage break

   That one word switches the background AND flips all the text inside it to
   dark blue so it stays readable. Remove the word to switch it back.

   (This used to be automatic — "every other section" — but that broke as soon
   as a page had a different number of sections, silently putting dark text on
   a dark background. Marking sections explicitly is both safer and easier to
   see when you're reading the HTML.)
   ========================================================================== */
.section-light { background: var(--color-bg-alt); }

.section-light h2,
.section-light .eyebrow,
.section-light strong { color: var(--color-surface); }

.section-light p,
.section-light .text-muted,
.section-light .check-list li { color: color-mix(in srgb, var(--color-surface) 82%, white 18%); }

.section-light .card { background: var(--color-surface); }
.section-light .card h3 { color: var(--color-text); }
.section-light .card p,
.section-light .card .card-body { color: var(--color-text-muted); }

/* Footer stays on the dark base color rather than the light alt-section
   color, so it reads as its own element instead of bleeding into whichever
   section sits above it. */
.site-footer {
  background: var(--color-bg);
  border-top: 2px solid var(--color-border);
}

/* Primary button picks up the same blue as the cards, so it isn't the only
   thing using that color — it appears in a second, separate context. */
.btn-primary {
  background: var(--color-surface);
  color: var(--color-text);
}
.btn-primary:hover {
  background: var(--color-surface-hover);
}