/* ============================================================
   Theme: Espresso
   Warm charcoal Surfaces + warm-amber Accent ("Crema").
   Komplett kohaerent warm. Counterpart zu Dark v2 (cool calibrated).
   Reserved cool-accent #7aa8ff als blauer Counterpoint —
   spiegelt Dark v2's Amber-Reserve, nur umgekehrt.
   ============================================================ */

:root[data-theme="espresso"]{
  /* Neutral scale — same warm charcoal range as Espresso */
  --pk-gray-0:#ffffff;
  --pk-gray-50:#f4f0ea;
  --pk-gray-100:#ece8e2;   /* TEXT — warm off-white */
  --pk-gray-200:#c8c0b6;
  --pk-gray-300:#a8a098;
  --pk-gray-400:#78716c;
  --pk-gray-500:#5a5048;
  --pk-gray-600:#3a322c;
  --pk-gray-700:#2a2421;
  --pk-gray-800:#221d1a;
  --pk-gray-850:#15110d;
  --pk-gray-900:#100c08;
  --pk-gray-950:#1a1614;   /* BASE — warm near-black */

  /* Surfaces (identisch Espresso) */
  --pk-bg:           var(--pk-gray-950);
  --pk-bg-surface:   var(--pk-gray-800);
  --pk-bg-elevated:  var(--pk-gray-700);
  --pk-bg-input:     #14100c;
  --pk-bg-hover:     rgba(236,232,226,.04);
  --pk-bg-active:    rgba(236,232,226,.08);

  /* Borders — warm getintet (identisch Espresso) */
  --pk-border-subtle: rgba(236,232,226,.06);
  --pk-border:        rgba(236,232,226,.10);
  --pk-border-strong: rgba(236,232,226,.18);
  --pk-border-focus:  rgba(224,160,80,.55);   /* AMBER focus */

  /* Text (identisch Espresso) */
  --pk-text:           var(--pk-gray-100);
  --pk-text-secondary: var(--pk-gray-200);
  --pk-text-muted:     #8a8278;
  --pk-text-disabled:  var(--pk-gray-500);

  /* Accent — WARM AMBER (das ist das Coffee-Defining-Element) */
  --pk-accent:        #e0a050;
  --pk-accent-hover:  #f0b260;
  --pk-accent-active: #c08840;
  --pk-accent-bg:     rgba(224,160,80,.12);
  --pk-accent-bg-strong: rgba(224,160,80,.20);
  --pk-accent-border: rgba(224,160,80,.34);
  --pk-accent-text:   #f0c078;

  /* Status — leicht waermer kalibriert (wie Espresso) */
  --pk-success:#5ac46a; --pk-success-bg:rgba(90,196,106,.10); --pk-success-border:rgba(90,196,106,.28); --pk-success-text:#9ddca8;
  --pk-warning:#c8842c; --pk-warning-bg:rgba(200,132,44,.12); --pk-warning-border:rgba(200,132,44,.30); --pk-warning-text:#e6a468;
  --pk-error:#f06058;   --pk-error-bg:rgba(240,96,88,.10);    --pk-error-border:rgba(240,96,88,.30);   --pk-error-text:#f49991;
  --pk-info:#7aa8ff;    --pk-info-bg:rgba(122,168,255,.10);   --pk-info-border:rgba(122,168,255,.28);  --pk-info-text:#b8d2ff;

  /* Reserved cool-accent — Counterpoint zum warmen Accent
     (umgekehrt zu Dark v2's Amber-Reserve auf Cobalt-Theme) */
  --pk-cool-accent:        #7aa8ff;
  --pk-cool-accent-bg:     rgba(122,168,255,.10);
  --pk-cool-accent-border: rgba(122,168,255,.28);
  --pk-cool-accent-text:   #b8d2ff;

  /* Tool accents */
  --pk-tool-movebase:#e0a050;
  --pk-tool-watchcost:#c8842c;
  --pk-tool-mapmark:#5ac46a;
  --pk-tool-setinfo:#b88aff;
  --pk-tool-overtime:#7aa8ff;
  --pk-tool-callgap:#ef7ab0;
  --pk-tool-callsheetcheck:#62c0ee;

  /* Selection */
  --pk-selection: rgba(224,160,80,.30);
}

/* Body — clean flat bg (radial gradients entfernt fuer cleanen Launcher-Look) */
:root[data-theme="espresso"] body{
  color: var(--pk-text);
  background: var(--pk-bg);
}
:root[data-theme="espresso"] ::selection{ background:var(--pk-selection); color:var(--pk-text); }

/* Topbar — frosted warm dark (identisch Espresso) */
:root[data-theme="espresso"] .pk-topbar{
  background:rgba(20,16,12,.82);
  backdrop-filter:blur(16px) saturate(170%);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  border-bottom:1px solid var(--pk-border-subtle);
}

/* Brand-Mark — AMBER gradient (statt Cobalt) */
:root[data-theme="espresso"] .pk-nav__brand-mark{
  background:linear-gradient(135deg,#a86a20 0%,#e0a050 100%);
  color:#1a1208;
  box-shadow:0 0 0 1px rgba(224,160,80,.32), 0 4px 16px rgba(224,160,80,.24);
}

/* Sidebar / pane lists */
:root[data-theme="espresso"] .pk-sidebar,
:root[data-theme="espresso"] .pk-pane-list,
:root[data-theme="espresso"] .pk-pane-side{
  background:#1d1816;
}

/* Cards / Stage — cream-lift (identisch Espresso) */
:root[data-theme="espresso"] .pk-card{
  background:
    linear-gradient(180deg,rgba(236,232,226,.025),transparent 42%),
    var(--pk-bg-surface);
}
:root[data-theme="espresso"] .pk-stage{
  background:
    linear-gradient(180deg,rgba(236,232,226,.030),transparent 42%),
    var(--pk-bg-surface);
}
:root[data-theme="espresso"] .pk-hud__breakdown,
:root[data-theme="espresso"] .pk-hud__kpi{
  background:var(--pk-bg-surface);
}

/* HUD Total — clean (kein Akzent-Gradient drueber, wie Sepia v2-Lesson) */
:root[data-theme="espresso"] .pk-hud__total{
  background:var(--pk-bg-elevated);
  border-color:var(--pk-border-strong);
  box-shadow:
    inset 0 1px 0 rgba(236,232,226,.05),
    0 1px 2px rgba(0,0,0,.32);
}

/* Inputs */
/* WICHTIG: background-COLOR longhand statt background shorthand — sonst
   resettet der Shorthand background-image/repeat/position auf defaults
   und ueberschreibt den chevron-svg + no-repeat aus prodkit-design.css.
   Visueller Bug: chevron wird ueber die ganze Select-Breite repeated. */
:root[data-theme="espresso"] .pk-input,
:root[data-theme="espresso"] .pk-select,
:root[data-theme="espresso"] .pk-textarea{
  background-color:var(--pk-bg-input);
  border-color:var(--pk-border);
  color:var(--pk-text);
}
:root[data-theme="espresso"] .pk-input:focus,
:root[data-theme="espresso"] .pk-select:focus,
:root[data-theme="espresso"] .pk-textarea:focus{
  border-color:var(--pk-border-focus);
  box-shadow:0 0 0 3px rgba(224,160,80,.22);
}

/* Select arrow / pickers / chevron */
:root[data-theme="espresso"] .pk-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5l3 3 3-3' stroke='%23a8a098' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="espresso"] .pk-input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="espresso"] .pk-input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="espresso"] .pk-input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(.62);
  opacity:.75;
}
:root[data-theme="espresso"] .pk-disclosure > summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.5l3.5 3.5 3.5-3.5' stroke='%23a8a098' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Default-Btn MUSS vor Primary stehen */
:root[data-theme="espresso"] .pk-btn{
  background:var(--pk-bg-elevated);
  border-color:var(--pk-border);
  color:var(--pk-text);
}
:root[data-theme="espresso"] .pk-btn:hover{
  background:#332b27;
  border-color:var(--pk-border-strong);
}

/* Primary-Btn (Hero) — AMBER gradient mit warm-dark Schrift */
:root[data-theme="espresso"] .pk-btn--primary{
  background:linear-gradient(180deg,#e0a050 0%,#b8782c 100%);
  border-color:#8a5a18;
  color:#1a1208;
  box-shadow:
    inset 0 1px 0 rgba(255,224,176,.34),
    0 1px 2px rgba(0,0,0,.34);
}
:root[data-theme="espresso"] .pk-btn--primary:hover{
  background:linear-gradient(180deg,#f0b260 0%,#d09040 100%);
  border-color:#a86a20;
  color:#1a1208;
}

/* Modal */
:root[data-theme="espresso"] .pk-modal{
  background:rgba(10,7,4,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
:root[data-theme="espresso"] .pk-modal__card{
  background:
    linear-gradient(180deg,rgba(236,232,226,.030),transparent 30%),
    var(--pk-bg-elevated);
  border-color:var(--pk-border-strong);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}

/* Toast */
:root[data-theme="espresso"] .pk-toast{
  background:var(--pk-bg-elevated);
  border-color:var(--pk-border-strong);
  color:var(--pk-text);
  box-shadow:0 8px 24px rgba(0,0,0,.42);
}

/* Badge-Accent */
:root[data-theme="espresso"] .pk-badge--accent{
  background:var(--pk-accent-bg);
  border-color:var(--pk-accent-border);
  color:var(--pk-accent-text);
}

/* Grain — etwas staerker (warmes Klima carries grain, wie Espresso) */
:root[data-theme="espresso"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.032;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media (prefers-reduced-motion: reduce){
  :root[data-theme="espresso"] body::before{ opacity:.022; }
}