/*
 * theme.css — PhyloCloud design token definitions
 *
 * ALL project-specific colour values are defined here as CSS custom properties.
 * No colour hex literals may appear in phylocloud.css or any other stylesheet.
 *
 * Tabler CSS variables (--tblr-*) are overridden here for the project theme:
 *   primary → teal (#0ca678), font → JetBrains Mono, corners → 0.5rem, bg → zinc
 */

:root {
  /* ── Tabler primary colour override → teal ───────────────────── */
  --tblr-primary:               #0ca678;
  --tblr-primary-rgb:           12, 166, 120;
  --tblr-primary-fg:            #fff;
  --tblr-primary-lt:            color-mix(in oklab, #0ca678 10%, transparent);
  --tblr-primary-darken:        color-mix(in oklab, #0ca678, #000 20%);
  --tblr-primary-bg-subtle:     color-mix(in oklab, #0ca678 12%, white);
  --tblr-primary-border-subtle: color-mix(in oklab, #0ca678 30%, white);
  --tblr-primary-text-emphasis: color-mix(in oklab, #0ca678, #000 35%);

  /* ── Monospace UI font ───────────────────────────────────────── */
  --tblr-font-sans-serif:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* ── Subtle rounded corners (base 0.5rem) ───────────────────────── */
  --tblr-border-radius-scale:  1;
  --tblr-border-radius:        0.5rem;
  --tblr-border-radius-sm:     0.25rem;
  --tblr-border-radius-md:     0.5rem;
  --tblr-border-radius-lg:     0.75rem;
  --tblr-border-radius-xl:     1rem;
  --tblr-border-radius-xxl:    1.5rem;
  --tblr-border-radius-pill:   100rem;

  /* ── Zinc background base ─────────────────────────────────────── */
  --tblr-body-bg:              #f4f4f5;
  --tblr-bg-surface-secondary: #fafafa;

  /* ── Brand ───────────────────────────────────────────────────── */
  --color-brand-green:       #0ca678;

  /* ── Code blocks — light (Newick preview) ────────────────────── */
  --color-code-light-bg:     #f6f8fa;
  --color-code-light-fg:     #1f2328;
  --color-code-light-border: #d1d9e0;

  /* ── Code blocks — dark (ASCII art) ──────────────────────────── */
  --color-code-dark-bg:      #161b22;
  --color-code-dark-fg:      #c9d1d9;
  --color-code-dark-border:  #30363d;

  /* ── Form inputs ──────────────────────────────────────────────── */
  --color-input-fg:          #1d273b;
  --color-focus-border:      #0ca678;
  --color-focus-shadow:      rgba(12, 166, 120, 0.12);
  --color-accent:            #0ca678;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans:   "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-mono:   "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* ── Surface / background tokens ─────────────────────────────── */
  --color-surface:           #ffffff;
  --color-surface-secondary: #f4f4f5;
  --color-border:            #e4e4e7;
  --color-text-primary:      #1d273b;
  --color-text-muted:        #71717a;

  /* ── Navigation active state ──────────────────────────────────── */
  --color-nav-active-bg:     rgba(12, 166, 120, 0.08);
  --color-nav-active-fg:     #0ca678;

  /* ── News card ────────────────────────────────────────────────── */
  --color-news-border:       #d1d9e0;
  --color-news-tag-bg:       color-mix(in oklab, #0ca678 12%, white);
  --color-news-tag-fg:       #0ca678;

  /* ── Markdown rendered body ───────────────────────────────────── */
  --color-md-blockquote-border: #0ca678;
  --color-md-code-bg:           var(--color-code-light-bg);
  --color-md-code-fg:           var(--color-code-light-fg);
  --color-md-link:              #0ca678;
}

/* ── Dark mode: OS-level preference ──────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    --color-surface:              #1a1d23;
    --color-surface-secondary:    #22262e;
    --color-border:               #2e3440;
    --color-text-primary:         #c9d1d9;
    --color-text-muted:           #8b949e;
    --color-code-light-bg:        var(--color-code-dark-bg);
    --color-code-light-fg:        var(--color-code-dark-fg);
    --color-code-light-border:    var(--color-code-dark-border);
    --color-nav-active-bg:        rgba(12, 166, 120, 0.15);
    --color-nav-active-fg:        #34d399;
    --color-news-border:          #30363d;
    --color-news-tag-bg:          rgba(12, 166, 120, 0.15);
    --color-news-tag-fg:          #34d399;
    --color-md-blockquote-border: #34d399;
    --color-md-link:              #34d399;
  }
}

/* ── Dark mode: explicit JS toggle via data-bs-theme="dark" ──── */
[data-bs-theme="dark"] {
  --color-surface:              #1a1d23;
  --color-surface-secondary:    #22262e;
  --color-border:               #2e3440;
  --color-text-primary:         #c9d1d9;
  --color-text-muted:           #8b949e;
  --color-code-light-bg:        var(--color-code-dark-bg);
  --color-code-light-fg:        var(--color-code-dark-fg);
  --color-code-light-border:    var(--color-code-dark-border);
  --color-nav-active-bg:        rgba(12, 166, 120, 0.15);
  --color-nav-active-fg:        #34d399;
  --color-news-border:          #30363d;
  --color-news-tag-bg:          rgba(12, 166, 120, 0.15);
  --color-news-tag-fg:          #34d399;
  --color-md-blockquote-border: #34d399;
  --color-md-link:              #34d399;
}

/* ── Self-hosted fonts ─────────────────────────────────────────── */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Geist-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Geist-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Geist-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Geist-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Bold.woff2") format("woff2");
}