/*
 * email-webhook pico theme (variable-only override)
 * Load after pico.blue.min.css.
 *
 * Single font stack (Inter / JetBrains Mono) per option 1:
 * headings and body share --pico-font-family.
 */

:root {
  /* Typography */
  --pico-font-family-sans-serif: "Inter", "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-font-family-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-font-size: 100%;
  --pico-line-height: 1.6;
  --pico-font-weight: 400;
  --pico-border-radius: 8px;
  --pico-border-width: 1px;
  --pico-outline-width: 2px;
}

/* ─── Light theme ─────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --pico-background-color: #fafafa;
  --pico-color: #09090b;
  --pico-muted-color: #52525b;
  --pico-muted-border-color: #e4e4e7;
  --pico-border-color: #e4e4e7;

  /* Headings inherit body color for a flatter hierarchy */
  --pico-h1-color: #09090b;
  --pico-h2-color: #09090b;
  --pico-h3-color: #18181b;
  --pico-h4-color: #27272a;
  --pico-h5-color: #3f3f46;
  --pico-h6-color: #52525b;

  /* Green accent */
  --pico-primary: #2f8f2f;
  --pico-primary-hover: #256f25;
  --pico-primary-focus: rgba(47, 143, 47, 0.25);
  --pico-primary-background: #2f8f2f;
  --pico-primary-border: #2f8f2f;
  --pico-primary-hover-background: #256f25;
  --pico-primary-hover-border: #256f25;
  --pico-primary-inverse: #ffffff;
  --pico-primary-underline: rgba(47, 143, 47, 0.5);
  --pico-primary-hover-underline: #2f8f2f;

  /* Contrast (used by outline buttons) */
  --pico-contrast: #09090b;
  --pico-contrast-hover: #000000;
  --pico-contrast-focus: rgba(9, 9, 11, 0.15);
  --pico-contrast-background: #09090b;
  --pico-contrast-border: #09090b;
  --pico-contrast-hover-background: #000000;
  --pico-contrast-hover-border: #000000;
  --pico-contrast-inverse: #ffffff;
  --pico-contrast-underline: rgba(9, 9, 11, 0.5);

  /* Cards */
  --pico-card-background-color: #ffffff;
  --pico-card-border-color: #e4e4e7;
  --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
  --pico-card-sectioning-background-color: #f4f4f6;

  /* Form elements */
  --pico-form-element-background-color: #ffffff;
  --pico-form-element-border-color: #d4d4d8;
  --pico-form-element-color: #09090b;
  --pico-form-element-placeholder-color: #a1a1aa;
  --pico-form-element-active-background-color: #ffffff;
  --pico-form-element-active-border-color: #2f8f2f;
  --pico-form-element-focus-color: rgba(47, 143, 47, 0.25);
  --pico-form-element-disabled-opacity: 0.5;
  --pico-form-element-selected-background-color: #e4e4e7;

  /* Form validation */
  --pico-form-element-valid-border-color: #2f8f2f;
  --pico-form-element-valid-active-border-color: #256f25;
  --pico-form-element-valid-focus-color: rgba(47, 143, 47, 0.25);
  --pico-form-element-invalid-border-color: #c93d3d;
  --pico-form-element-invalid-active-border-color: #a83131;
  --pico-form-element-invalid-focus-color: rgba(201, 61, 61, 0.25);

  /* Code / kbd */
  --pico-code-background-color: #f4f4f6;
  --pico-code-color: #2f8f2f;
  --pico-code-kbd-background-color: #09090b;
  --pico-code-kbd-color: #fafafa;

  /* Mark (highlight) */
  --pico-mark-background-color: rgba(47, 143, 47, 0.18);
  --pico-mark-color: #0f3d0f;

  /* Dropdown */
  --pico-dropdown-background-color: #ffffff;
  --pico-dropdown-border-color: #e4e4e7;
  --pico-dropdown-color: #09090b;
  --pico-dropdown-hover-background-color: #f4f4f6;
  --pico-dropdown-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* Accordion */
  --pico-accordion-border-color: #e4e4e7;
  --pico-accordion-open-summary-color: #09090b;
  --pico-accordion-close-summary-color: #09090b;
  --pico-accordion-active-summary-color: #2f8f2f;

  /* Blockquote */
  --pico-blockquote-border-color: #2f8f2f;
  --pico-blockquote-footer-color: #52525b;

  /* Modal / progress / box-shadow */
  --pico-modal-overlay-background-color: rgba(9, 9, 11, 0.5);
  --pico-progress-background-color: #e4e4e7;
  --pico-progress-color: #2f8f2f;
  --pico-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);

  color-scheme: light;
}

/* ─── Dark theme (matches homepage) ──────────────────────── */
[data-theme="dark"] {
  --pico-background-color: #0a0a0b;
  --pico-color: #e8e8ea;
  --pico-muted-color: #8a8a92;
  --pico-muted-border-color: #1f1f23;
  --pico-border-color: #1f1f23;

  --pico-h1-color: #e8e8ea;
  --pico-h2-color: #e8e8ea;
  --pico-h3-color: #d4d4d8;
  --pico-h4-color: #a1a1aa;
  --pico-h5-color: #8a8a92;
  --pico-h6-color: #71717a;

  --pico-primary: #7dd87d;
  --pico-primary-hover: #9ee89e;
  --pico-primary-focus: rgba(125, 216, 125, 0.25);
  --pico-primary-background: #7dd87d;
  --pico-primary-border: #7dd87d;
  --pico-primary-hover-background: #9ee89e;
  --pico-primary-hover-border: #9ee89e;
  --pico-primary-inverse: #0a0a0b;
  --pico-primary-underline: rgba(125, 216, 125, 0.5);
  --pico-primary-hover-underline: #9ee89e;

  --pico-contrast: #e8e8ea;
  --pico-contrast-hover: #ffffff;
  --pico-contrast-focus: rgba(232, 232, 234, 0.15);
  --pico-contrast-background: #e8e8ea;
  --pico-contrast-border: #e8e8ea;
  --pico-contrast-hover-background: #ffffff;
  --pico-contrast-hover-border: #ffffff;
  --pico-contrast-inverse: #0a0a0b;
  --pico-contrast-underline: rgba(232, 232, 234, 0.5);

  --pico-card-background-color: #131316;
  --pico-card-border-color: #1f1f23;
  --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --pico-card-sectioning-background-color: #111113;

  --pico-form-element-background-color: #131316;
  --pico-form-element-border-color: #1f1f23;
  --pico-form-element-color: #e8e8ea;
  --pico-form-element-placeholder-color: #55555c;
  --pico-form-element-active-background-color: #131316;
  --pico-form-element-active-border-color: #7dd87d;
  --pico-form-element-focus-color: rgba(125, 216, 125, 0.25);
  --pico-form-element-disabled-opacity: 0.5;
  --pico-form-element-selected-background-color: #1f1f23;

  --pico-form-element-valid-border-color: #7dd87d;
  --pico-form-element-valid-active-border-color: #9ee89e;
  --pico-form-element-valid-focus-color: rgba(125, 216, 125, 0.25);
  --pico-form-element-invalid-border-color: #e56b6b;
  --pico-form-element-invalid-active-border-color: #f08080;
  --pico-form-element-invalid-focus-color: rgba(229, 107, 107, 0.25);

  --pico-code-background-color: #0f0f11;
  --pico-code-color: #7dd87d;
  --pico-code-kbd-background-color: #1f1f23;
  --pico-code-kbd-color: #e8e8ea;

  --pico-mark-background-color: rgba(125, 216, 125, 0.15);
  --pico-mark-color: #7dd87d;

  --pico-dropdown-background-color: #131316;
  --pico-dropdown-border-color: #1f1f23;
  --pico-dropdown-color: #e8e8ea;
  --pico-dropdown-hover-background-color: #1f1f23;
  --pico-dropdown-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

  --pico-accordion-border-color: #1f1f23;
  --pico-accordion-open-summary-color: #e8e8ea;
  --pico-accordion-close-summary-color: #e8e8ea;
  --pico-accordion-active-summary-color: #7dd87d;

  --pico-blockquote-border-color: #7dd87d;
  --pico-blockquote-footer-color: #8a8a92;

  --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.7);
  --pico-progress-background-color: #1f1f23;
  --pico-progress-color: #7dd87d;
  --pico-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);

  color-scheme: dark;
}

/* Respect OS preference when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pico-background-color: #0a0a0b;
    --pico-color: #e8e8ea;
    --pico-muted-color: #8a8a92;
    --pico-muted-border-color: #1f1f23;
    --pico-border-color: #1f1f23;

    --pico-h1-color: #e8e8ea;
    --pico-h2-color: #e8e8ea;
    --pico-h3-color: #d4d4d8;
    --pico-h4-color: #a1a1aa;
    --pico-h5-color: #8a8a92;
    --pico-h6-color: #71717a;

    --pico-primary: #7dd87d;
    --pico-primary-hover: #9ee89e;
    --pico-primary-focus: rgba(125, 216, 125, 0.25);
    --pico-primary-background: #7dd87d;
    --pico-primary-border: #7dd87d;
    --pico-primary-hover-background: #9ee89e;
    --pico-primary-hover-border: #9ee89e;
    --pico-primary-inverse: #0a0a0b;
    --pico-primary-underline: rgba(125, 216, 125, 0.5);
    --pico-primary-hover-underline: #9ee89e;

    --pico-contrast: #e8e8ea;
    --pico-contrast-hover: #ffffff;
    --pico-contrast-focus: rgba(232, 232, 234, 0.15);
    --pico-contrast-background: #e8e8ea;
    --pico-contrast-border: #e8e8ea;
    --pico-contrast-hover-background: #ffffff;
    --pico-contrast-hover-border: #ffffff;
    --pico-contrast-inverse: #0a0a0b;
    --pico-contrast-underline: rgba(232, 232, 234, 0.5);

    --pico-card-background-color: #131316;
    --pico-card-border-color: #1f1f23;
    --pico-card-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --pico-card-sectioning-background-color: #111113;

    --pico-form-element-background-color: #131316;
    --pico-form-element-border-color: #1f1f23;
    --pico-form-element-color: #e8e8ea;
    --pico-form-element-placeholder-color: #55555c;
    --pico-form-element-active-background-color: #131316;
    --pico-form-element-active-border-color: #7dd87d;
    --pico-form-element-focus-color: rgba(125, 216, 125, 0.25);
    --pico-form-element-selected-background-color: #1f1f23;

    --pico-form-element-valid-border-color: #7dd87d;
    --pico-form-element-valid-active-border-color: #9ee89e;
    --pico-form-element-valid-focus-color: rgba(125, 216, 125, 0.25);
    --pico-form-element-invalid-border-color: #e56b6b;
    --pico-form-element-invalid-active-border-color: #f08080;
    --pico-form-element-invalid-focus-color: rgba(229, 107, 107, 0.25);

    --pico-code-background-color: #0f0f11;
    --pico-code-color: #7dd87d;
    --pico-code-kbd-background-color: #1f1f23;
    --pico-code-kbd-color: #e8e8ea;

    --pico-mark-background-color: rgba(125, 216, 125, 0.15);
    --pico-mark-color: #7dd87d;

    --pico-dropdown-background-color: #131316;
    --pico-dropdown-border-color: #1f1f23;
    --pico-dropdown-color: #e8e8ea;
    --pico-dropdown-hover-background-color: #1f1f23;
    --pico-dropdown-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    --pico-accordion-border-color: #1f1f23;
    --pico-accordion-open-summary-color: #e8e8ea;
    --pico-accordion-close-summary-color: #e8e8ea;
    --pico-accordion-active-summary-color: #7dd87d;

    --pico-blockquote-border-color: #7dd87d;
    --pico-blockquote-footer-color: #8a8a92;

    --pico-modal-overlay-background-color: rgba(0, 0, 0, 0.7);
    --pico-progress-background-color: #1f1f23;
    --pico-progress-color: #7dd87d;
    --pico-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);

    color-scheme: dark;
  }
}