/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 *
 * Override: match the main site's warm, earthy palette + Cormorant Garamond / Mulish fonts
 */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Font fallbacks (matching main site) ── */
@font-face {
  font-family: "Cormorant Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("Droid Serif");
  size-adjust: 88.38%;
  ascent-override: 104.55%;
  descent-override: 32.47%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Mulish Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Roboto"), local("Noto Sans");
  size-adjust: 104.08%;
  ascent-override: 96.56%;
  descent-override: 24.02%;
  line-gap-override: 0%;
}

/* ── Light theme — warm cream / taupe / teal ── */
:root,
:root[data-theme="light"] {
  /* Backgrounds */
  --q2-bg: #F2EAE0;              /* cream — main page canvas */
  --q2-bg-elev: #F0E2C3;         /* cream-soft — cards / content surfaces */
  --q2-bg-muted: #DCECE9;         /* accent-light — recessed / hover states */
  --q2-bg-inverse: #2D2824;       /* ink — for inverted surfaces */

  /* Text */
  --q2-text: #5D5348;             /* body */
  --q2-text-strong: #2D2824;      /* ink — headings, strong emphasis */
  --q2-text-muted: #82B2C0;       /* brown / teal accent — muted text */
  --q2-text-inverse: #FFFFFF;

  /* Borders & dividers */
  --q2-border-ring: rgba(130, 178, 192, 0.18);
  --q2-border-strong: rgba(130, 178, 192, 0.32);
  --q2-divider: rgba(130, 178, 192, 0.18);

  /* Shadows — lifted from main site card feel */
  --q2-shadow-card:
    rgba(45, 40, 36, 0.06) 0 1px 3px,
    rgba(130, 178, 192, 0.1) 0 0 0 1px,
    rgba(45, 40, 36, 0.04) 0 4px 12px 0;
  --q2-shadow-raised:
    rgba(45, 40, 36, 0.08) 0 1px 4px,
    rgba(130, 178, 192, 0.14) 0 0 0 1px,
    rgba(45, 40, 36, 0.06) 0 12px 28px -8px;
  --q2-shadow-dropdown:
    rgba(45, 40, 36, 0.1) 0 1px 5px -4px,
    rgba(130, 178, 192, 0.14) 0 0 0 1px,
    rgba(45, 40, 36, 0.1) 0 16px 32px -12px;

  /* Nav */
  --q2-nav-bg: rgba(242, 234, 224, 0.78);
  --q2-nav-border: rgba(130, 178, 192, 0.12);

  /* Accent & links */
  --q2-accent: #82B2C0;
  --q2-accent-contrast: #FFFFFF;
  --q2-link: #82B2C0;
  --q2-focus-ring: color-mix(in oklab, #82B2C0 45%, transparent);

  /* Fonts — override Pico defaults */
  --pico-font-family-sans-serif:
    "Mulish", "Mulish Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-display:
    "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --forum-font-display: var(--pico-font-family-display);

  /* Pico overrides */
  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-h1-color: var(--q2-text-strong);
  --pico-h2-color: var(--q2-text-strong);
  --pico-h3-color: var(--q2-text-strong);
  --pico-h4-color: var(--q2-text-strong);
  --pico-h5-color: var(--q2-text-strong);
  --pico-h6-color: var(--q2-text-strong);
  --pico-muted-color: var(--q2-text-muted);
  --pico-muted-border-color: var(--q2-divider);
  --pico-primary: var(--q2-text-strong);
  --pico-primary-hover: #1a1714;
  --pico-primary-focus: var(--q2-focus-ring);
  --pico-primary-inverse: var(--q2-text-inverse);
  --pico-secondary: var(--q2-text-muted);
  --pico-secondary-hover: var(--q2-text);
  --pico-contrast: var(--q2-text-strong);
  --pico-contrast-hover: #1a1714;
  --pico-contrast-inverse: var(--q2-text-inverse);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-border-color: transparent;
  --pico-card-box-shadow: var(--q2-shadow-card);
  --pico-card-sectioning-background-color: var(--q2-bg-muted);
  --pico-form-element-background-color: var(--q2-bg);
  --pico-form-element-border-color: rgba(130, 178, 192, 0.24);
  --pico-form-element-color: var(--q2-text);
  --pico-form-element-focus-color: var(--q2-focus-ring);
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
}

/* ── Dark theme — warm deep tones ── */
:root[data-theme="dark"] {
  --q2-bg: #1E1B18;              /* deep warm charcoal */
  --q2-bg-elev: #2A2622;         /* lifted warm surface */
  --q2-bg-muted: #36312C;        /* recessed */
  --q2-bg-inverse: #F2EAE0;

  --q2-text: #D4CFC6;            /* warm light gray */
  --q2-text-strong: #F2EAE0;     /* cream */
  --q2-text-muted: #82B2C0;      /* teal accent — consistent across themes */
  --q2-text-inverse: #1E1B18;

  --q2-border-ring: rgba(130, 178, 192, 0.18);
  --q2-border-strong: rgba(130, 178, 192, 0.28);
  --q2-divider: rgba(130, 178, 192, 0.14);

  --q2-shadow-card:
    rgba(0, 0, 0, 0.5) 0 1px 3px,
    rgba(130, 178, 192, 0.12) 0 0 0 1px,
    rgba(0, 0, 0, 0.4) 0 4px 12px 0;
  --q2-shadow-raised:
    rgba(0, 0, 0, 0.55) 0 1px 4px,
    rgba(130, 178, 192, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.5) 0 12px 28px -8px;
  --q2-shadow-dropdown:
    rgba(0, 0, 0, 0.6) 0 1px 5px -4px,
    rgba(130, 178, 192, 0.14) 0 0 0 1px,
    rgba(0, 0, 0, 0.55) 0 16px 32px -12px;

  --q2-nav-bg: rgba(30, 27, 24, 0.82);
  --q2-nav-border: rgba(130, 178, 192, 0.1);

  --q2-accent: #82B2C0;
  --q2-accent-contrast: #FFFFFF;
  --q2-link: #82B2C0;
  --q2-focus-ring: color-mix(in oklab, #82B2C0 45%, transparent);

  /* Pico overrides */
  --pico-background-color: var(--q2-bg);
  --pico-color: var(--q2-text);
  --pico-h1-color: var(--q2-text-strong);
  --pico-h2-color: var(--q2-text-strong);
  --pico-h3-color: var(--q2-text-strong);
  --pico-h4-color: var(--q2-text-strong);
  --pico-h5-color: var(--q2-text-strong);
  --pico-h6-color: var(--q2-text-strong);
  --pico-muted-color: var(--q2-text-muted);
  --pico-muted-border-color: var(--q2-divider);
  --pico-primary: var(--q2-text-strong);
  --pico-primary-hover: #FFFFFF;
  --pico-primary-inverse: var(--q2-text-inverse);
  --pico-contrast: var(--q2-text-strong);
  --pico-contrast-inverse: var(--q2-text-inverse);
  --pico-card-background-color: var(--q2-bg-elev);
  --pico-card-sectioning-background-color: var(--q2-bg-muted);
  --pico-form-element-background-color: var(--q2-bg-elev);
  --pico-form-element-border-color: rgba(130, 178, 192, 0.2);
  --pico-form-element-color: var(--q2-text);
  --pico-primary-background: var(--q2-accent);
  --pico-primary-border: var(--q2-accent);
}