/* Bakircay Lab brand layer — loaded last, overrides colors and type of public.css / theme.css.
   Layout concept: deep teal "lab glass" surfaces, leaf green for living accents,
   copper (bakır) for instrument-style labels and active marks.
   Every selector is prefixed with html:root so it always outranks the older rules it mirrors. */
:root {
  --paper: #ffffff;
  --mist: #f1f6f4;
  --line: #d9e4e0;
  --ink: #0e2e31;
  --text: #3b5551;
  --muted: #566d69;
  --leaf: #2a7a4e;
  --copper: #a3582a;
  --deep: #0c3a3f;
  --btn-bg: #0c3a3f;
  --btn-fg: #ffffff;
  --btn-hover: #145057;
  --chip: rgba(42, 122, 78, .13);
  --hero: #071f22;
  --hero-text: #cfe2dd;
  --hero-accent: #e8ab80;
  --on-deep: #c3d6d2;
  --on-deep-em: #9fdcb4;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1416; --mist: #122125; --line: #23363a; --ink: #e9f1ef; --text: #b8cac6; --muted: #93aaa5;
    --leaf: #86d0a0; --copper: #e3a072; --deep: #123f44; --btn-bg: #86d0a0; --btn-fg: #0b1416; --btn-hover: #a2dfb6;
    --chip: rgba(134, 208, 160, .16); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1416; --mist: #122125; --line: #23363a; --ink: #e9f1ef; --text: #b8cac6; --muted: #93aaa5;
  --leaf: #86d0a0; --copper: #e3a072; --deep: #123f44; --btn-bg: #86d0a0; --btn-fg: #0b1416; --btn-hover: #a2dfb6;
  --chip: rgba(134, 208, 160, .16); color-scheme: dark;
}

/* ---------- Base ---------- */
html:root { font-family: var(--font-body); color: var(--ink); background: var(--paper); }
html:root body { background: var(--paper); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
html:root ::selection { background: var(--chip); }
html:root button:focus-visible, html:root a:focus-visible { outline-color: var(--leaf); }
html:root em { color: var(--leaf); }
html:root h1, html:root h2, html:root h3 { font-family: var(--font-display); text-wrap: balance; }

/* Instrument-style labels */
html:root .section-label,
html:root .info-heading .section-label,
html:root .about-copy .section-label,
html:root .home-intro .section-label,
html:root .project-heading .section-label {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; color: var(--copper);
}
html:root .project-number,
html:root .principles article > span,
html:root .purpose-steps article > span {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .1em; color: var(--copper);
}

/* ---------- Header ---------- */
html:root .public-header { border-color: var(--line); background: var(--paper); }
html:root .wordmark { color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: .09em; }
html:root .wordmark b { font-weight: 400; }
html:root .wordmark small { font-family: var(--font-mono); font-weight: 500; letter-spacing: .2em; color: var(--muted); }
html:root nav a { color: var(--muted); font-weight: 500; }
html:root nav a:hover { color: var(--ink); }
html:root nav a[aria-current=page] { color: var(--ink); }
html:root nav a[aria-current=page]:not(.nav-login) { box-shadow: 0 2px var(--copper); }
html:root .theme-toggle { border-color: var(--line); background: transparent; color: var(--text); }
html:root .theme-toggle:hover { background: var(--mist); }
html:root .language-switch { border-color: var(--line); color: var(--text); }
html:root .language-switch button[aria-pressed=true] { background: var(--chip); color: var(--ink); box-shadow: inset 0 -2px var(--copper); }

/* Header over the home video */
html:root .home-page .public-header { background: linear-gradient(rgba(7, 31, 34, .72), rgba(7, 31, 34, 0)); border-color: rgba(255, 255, 255, .12); color: #fff; }
html:root .home-page .wordmark, html:root .home-page .public-header nav a { color: #fff; }
html:root .home-page .wordmark small { color: var(--hero-text); }
html:root .home-page .public-header nav a { font-weight: 600; letter-spacing: .06em; }
html:root .home-page .public-header nav a:hover { color: var(--hero-accent); }
html:root .home-page .theme-toggle, html:root .home-page .language-switch { border-color: rgba(255, 255, 255, .38); color: #fff; background: transparent; }
html:root .home-page .theme-toggle:hover { background: rgba(255, 255, 255, .1); }
html:root .home-page .language-switch button[aria-pressed=true] { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 -2px var(--hero-accent); }

/* ---------- Home hero ---------- */
html:root .home-hero { background: var(--hero); }
html:root .home-hero .video-shade { background: linear-gradient(180deg, rgba(7, 31, 34, .55) 0%, rgba(7, 31, 34, .3) 45%, rgba(7, 31, 34, .9) 100%); }
html:root .hero-eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: .22em; color: var(--hero-text); }
html:root .hero-copy h1 { font-family: var(--font-display); font-weight: 700; font-stretch: 80%; letter-spacing: .01em; line-height: 1.02; }
html:root .hero-copy > p { font-family: var(--font-body); font-weight: 500; letter-spacing: .32em; color: var(--hero-text) !important; }
html:root .hero-link { border-color: var(--hero-accent); color: #fff; font-weight: 500; }
html:root .hero-link:hover { color: var(--hero-accent); }
html:root .project-selector button { color: var(--hero-text); font-family: var(--font-body); font-weight: 500; }
html:root .project-selector button span { font-family: var(--font-mono); }
html:root .project-selector button[aria-pressed=true] { color: #fff; border-color: var(--hero-accent); }
html:root .hero-bottom > a { font-family: var(--font-mono); letter-spacing: .16em; color: var(--hero-text); }
html:root .hero-bottom .video-toggle { background: rgba(7, 31, 34, .6); border-color: rgba(255, 255, 255, .35); font-family: var(--font-body); font-weight: 500; }
html:root .hero-bottom .video-toggle:hover { background: rgba(7, 31, 34, .85); }
html:root .project-arrow:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 700px) {
  html:root .home-page .public-header { background: var(--hero); }
  html:root .home-hero, html:root .home-hero .background-video { background: var(--hero); }
  html:root .home-hero .project-arrow { background: rgba(7, 31, 34, .55); }
  html:root .hero-copy > p { letter-spacing: .14em; }
}

/* ---------- Projects ---------- */
html:root .project-heading h2 { color: var(--ink); font-weight: 600; letter-spacing: -.025em; }
html:root .project-heading p { color: var(--text); }
html:root .project-card { background: var(--mist); border-color: var(--line); }
html:root .project-card h3 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
html:root .project-card p { color: var(--text); }
html:root .project-card .project-stage { color: var(--muted); border-color: var(--line); }

/* Links styled as underlined text */
html:root .inline-link, html:root .project-preview { color: var(--leaf); border-color: var(--copper); font-weight: 500; font-family: var(--font-body); }
html:root .inline-link:hover { color: var(--ink); }

/* ---------- Home intro ---------- */
html:root .home-intro h2 { color: var(--ink); font-weight: 600; letter-spacing: -.025em; }
html:root .home-intro p { color: var(--text); }

/* ---------- About / Purpose ---------- */
html:root .info-heading h1 { color: var(--ink); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
html:root .info-heading em { color: var(--leaf); }
html:root .info-heading > p { color: var(--text); }
html:root .about-logo { background: var(--mist); border-color: var(--line); }
html:root .about-copy h2 { color: var(--ink); font-weight: 600; letter-spacing: -.025em; }
html:root .about-copy p { color: var(--text); }
html:root .principles { border-color: var(--line); }
html:root .principles h3 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
html:root .principles p { color: var(--text); }
html:root .purpose-callout { background: var(--deep); color: #fff; }
html:root .purpose-callout .section-label { color: var(--hero-accent); }
html:root .purpose-callout h2 { font-weight: 600; letter-spacing: -.03em; color: #fff; }
html:root .purpose-callout h2 em { color: var(--on-deep-em); }
html:root .purpose-callout p { color: var(--on-deep); }
html:root .purpose-steps article { border-color: var(--line); }
html:root .purpose-steps h3 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
html:root .purpose-steps p { color: var(--text); }
html:root .scope-note { color: var(--muted); }
html:root .info-cta { border-color: var(--line); }
html:root .info-cta h2 { color: var(--ink); font-weight: 600; letter-spacing: -.02em; }
html:root .info-cta p { color: var(--text); }
html:root .button-link { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
html:root .button-link:hover { background: var(--btn-hover); }
html:root .about-replay { border-color: var(--line); color: var(--text); font-family: var(--font-body); font-weight: 500; }
html:root .about-replay:hover { background: var(--paper); color: var(--ink); }

/* ---------- Footer ---------- */
html:root .public-footer { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; }
html:root .public-footer > span:nth-child(2) { font-style: normal; color: var(--leaf); }