/*
Theme Name: Cannawelt Product
Theme URI: https://cannawelt.de
Author: Cannawelt
Description: Individuelles Theme für das Cannawelt-Sortenlexikon. Datenbankgetrieben, ohne Page Builder.
Version: 1.0.0-rc.2
Requires at least: 7.1
Requires PHP: 8.4
License: GPL v2 or later
Text Domain: cannawelt
*/

/* ==========================================================================
   1. Design-Token
   Einzige Quelle für Farben, Typografie, Abstände. Keine Hex-Werte
   irgendwo sonst im Theme.
   ========================================================================== */

:root {
  /* Flächen */
  --cw-paper:        #f7f6f1;
  --cw-surface:      #fffefa;
  --cw-surface-alt:  #f2f0e7;
  --cw-sand:         #f4efe1;

  /* Text */
  --cw-ink:          #1f2a20;
  --cw-text:         #3a4238;
  --cw-text-2:       #42493d;
  --cw-muted:        #5d6357;  /* einzige Muted-Stufe, AA auf allen Flächen */

  /* Akzent */
  --cw-accent:       #3f6b3a;
  --cw-accent-soft:  #96b48c;
  --cw-on-dark:      #a8b19f;
  --cw-ink-hover:    #162017;
  --cw-accent-hover: #355c31;

  /* Status */
  --cw-error:        #a8462e;
  --cw-warn:         #78591f;

  /* Linien */
  --cw-line:         #ded9c9;
  --cw-line-soft:    #eae6d9;
  --cw-line-strong:  #c9c2ae;
  --cw-line-dark:    #34412f;  /* auf --cw-ink */
  --cw-sand-line:    #e2dcc9;
  --cw-pattern-a:    #e6e1d1;
  --cw-pattern-b:    #efeade;
  --cw-footer-muted: #8a9382;
  --cw-footer-border:#4a5741;
  --cw-footer-text:  #b6bfa9;
  --cw-footer-stem:  #6f8a67;
  --cw-print-paper:  #ffffff;
  --cw-print-text:   #555555;

  /* Schrift */
  --cw-font-serif:   'Newsreader', Georgia, serif;
  --cw-font-sans:    'Archivo', system-ui, -apple-system, sans-serif;

  /* Abstandsskala */
  --cw-s1:  4px;
  --cw-s2:  8px;
  --cw-s3:  12px;
  --cw-s4:  16px;
  --cw-s5:  20px;
  --cw-s6:  26px;
  --cw-s7:  34px;
  --cw-s8:  44px;
  --cw-s9:  52px;
  --cw-s10: 62px;

  /* Layout */
  --cw-gutter:       40px;
  --cw-max:          1440px;
  --cw-measure:      64ch;

  /* Radien */
  --cw-r-flat:       0;
  --cw-r-button:     6px;
  --cw-r-field:      8px;
  --cw-r-pill:       999px;
}

@media (max-width: 1119px) { :root { --cw-gutter: 32px; } }
@media (max-width: 599px)  { :root { --cw-gutter: 20px; } }

/* ==========================================================================
   2. Reset und Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cw-paper);
  color: var(--cw-text);
  font-family: var(--cw-font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--cw-accent); text-decoration: none; }
a:hover { color: var(--cw-ink); text-decoration: underline; }

/* Fokus niemals entfernen */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cw-ink);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--cw-font-serif);
  font-weight: 400;
  color: var(--cw-ink);
  margin: 0;
  text-wrap: pretty;
}

h1 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: clamp(25px, 2.6vw, 36px); line-height: 1.1; }
h3 { font-size: clamp(19px, 1.7vw, 25px); line-height: 1.2; font-weight: 500; }

p { margin: 0 0 var(--cw-s4); }

/* Zahlen immer tabellarisch */
.cw-num, table td, table th, time { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   3. Layout-Hilfen
   ========================================================================== */

.cw-wrap { max-width: var(--cw-max); margin-inline: auto; padding-inline: var(--cw-gutter); }

.cw-skip {
  position: absolute; left: -9999px;
  background: var(--cw-ink); color: var(--cw-paper);
  padding: 12px 18px; z-index: 100;
}
.cw-skip:focus { left: var(--cw-gutter); top: 8px; }

.cw-prose { max-width: var(--cw-measure); }
.cw-prose p,
.cw-prose li { font-family: var(--cw-font-serif); font-size: 19px; line-height: 1.75; color: var(--cw-text); }
.cw-prose h2 { margin: var(--cw-s7) 0 var(--cw-s3); }
.cw-prose h3 { margin: var(--cw-s6) 0 var(--cw-s3); }

@media (max-width: 599px) {
  .cw-prose p, .cw-prose li { font-size: 17.5px; }
}

.cw-label {
  font-family: var(--cw-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cw-muted);
}
.cw-label--accent { color: var(--cw-accent); }