/* ============================================================
   Theme: Stone Light
   Neutraler warm-grauer Hintergrund (Stone-Range), warm
   near-black text, gleicher Cobalt-Accent. Technischer und
   weniger editorial als Paper. Linear-Light/Vercel-Docs Vibe.
   ============================================================ */

:root[data-theme="stone-light"]{
  /* Neutral scale — stone warm grey */
  --pk-gray-0:#ffffff;
  --pk-gray-50:#fafaf9;
  --pk-gray-100:#f4f4f2;   /* STONE BASE */
  --pk-gray-200:#e7e5e4;
  --pk-gray-300:#d6d3d1;
  --pk-gray-400:#a8a29e;
  --pk-gray-500:#78716c;
  --pk-gray-600:#57534e;
  --pk-gray-700:#44403c;
  --pk-gray-800:#292524;
  --pk-gray-850:#1f1c1b;
  --pk-gray-900:#1c1917;   /* INK — warm near-black, stone-900 */
  --pk-gray-950:#0c0a09;

  /* Surfaces */
  --pk-bg:           var(--pk-gray-100);     /* #f4f4f2 stone */
  --pk-bg-surface:   #fafaf9;                /* slightly raised */
  --pk-bg-elevated:  #ffffff;                /* pure white for hero surfaces */
  --pk-bg-input:     #fafaf9;
  --pk-bg-hover:     rgba(28,25,23,.04);
  --pk-bg-active:    rgba(28,25,23,.07);

  /* Borders — warm getintet */
  --pk-border-subtle: rgba(28,25,23,.06);
  --pk-border:        rgba(28,25,23,.10);
  --pk-border-strong: rgba(28,25,23,.18);
  --pk-border-focus:  rgba(58,141,255,.55);

  /* Text — warm near-black */
  --pk-text:           var(--pk-gray-900);   /* #1c1917 */
  --pk-text-secondary: var(--pk-gray-700);   /* #44403c */
  --pk-text-muted:     var(--pk-gray-500);   /* #78716c */
  --pk-text-disabled:  var(--pk-gray-400);

  /* Accent — IDENTISCHER Cobalt wie Dark v2 (visual continuity) */
  --pk-accent:        #3a8dff;
  --pk-accent-hover:  #2877e0;
  --pk-accent-active: #1f68c8;
  --pk-accent-bg:     rgba(58,141,255,.08);
  --pk-accent-bg-strong: rgba(58,141,255,.14);
  --pk-accent-border: rgba(58,141,255,.30);
  --pk-accent-text:   #1f68c8;

  /* Status */
  --pk-success:#1f8a3a; --pk-success-bg:rgba(31,138,58,.10); --pk-success-border:rgba(31,138,58,.30); --pk-success-text:#15623a;
  --pk-warning:#b07408; --pk-warning-bg:rgba(176,116,8,.10); --pk-warning-border:rgba(176,116,8,.30); --pk-warning-text:#7a4e00;
  --pk-error:#c01b1b;   --pk-error-bg:rgba(192,27,27,.08);   --pk-error-border:rgba(192,27,27,.28);   --pk-error-text:#931414;
  --pk-info:#1f68c8;    --pk-info-bg:rgba(31,104,200,.08);   --pk-info-border:rgba(31,104,200,.28);   --pk-info-text:#174e98;

  /* Reserved warm-highlight */
  --pk-amber-accent:        #b86a2c;
  --pk-amber-accent-bg:     rgba(184,106,44,.08);
  --pk-amber-accent-border: rgba(184,106,44,.26);
  --pk-amber-accent-text:   #8a4a1a;

  /* Tool accents — dunkler kalibriert */
  --pk-tool-movebase:#3a8dff;
  --pk-tool-watchcost:#b07408;
  --pk-tool-mapmark:#1f8a3a;
  --pk-tool-setinfo:#6a3eb3;
  --pk-tool-overtime:#1f68c8;
  --pk-tool-callgap:#a8326c;
  --pk-tool-callsheetcheck:#2a8bc4;

  /* Selection */
  --pk-selection: rgba(58,141,255,.22);
}

/* Body — clean flat bg */
:root[data-theme="stone-light"] body{
  color: var(--pk-text);
  background: var(--pk-bg);
}
:root[data-theme="stone-light"] ::selection{ background:var(--pk-selection); color:var(--pk-text); }

/* Topbar — frosted stone */
:root[data-theme="stone-light"] .pk-topbar{
  background:rgba(244,244,242,.82);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--pk-border);
}

/* Brand-Mark — Cobalt gradient */
:root[data-theme="stone-light"] .pk-nav__brand-mark{
  background:linear-gradient(135deg,#3a8dff 0%,#6db4ff 100%);
  color:#ffffff;
  box-shadow:0 0 0 1px rgba(58,141,255,.20), 0 2px 8px rgba(58,141,255,.18);
}

/* Sidebar */
:root[data-theme="stone-light"] .pk-sidebar{
  background:#fafaf9;
  border-right:1px solid var(--pk-border);
}
:root[data-theme="stone-light"] .pk-pane-list,
:root[data-theme="stone-light"] .pk-pane-side{
  background:#fafaf9;
}

/* Cards / Stage / HUD — Tiefe via leichten Lift gegen stone bg */
:root[data-theme="stone-light"] .pk-card,
:root[data-theme="stone-light"] .pk-stage,
:root[data-theme="stone-light"] .pk-hud__breakdown,
:root[data-theme="stone-light"] .pk-hud__kpi{
  background:#ffffff;
  border-color:var(--pk-border);
  box-shadow:0 1px 2px rgba(28,25,23,.03);
}

/* HUD Total — subtle Cobalt-Tint */
:root[data-theme="stone-light"] .pk-hud__total{
  background:
    linear-gradient(180deg,rgba(58,141,255,.04) 0%,#ffffff 70%);
  border-color:var(--pk-border-strong);
  box-shadow:0 1px 3px rgba(28,25,23,.04);
}

/* 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="stone-light"] .pk-input,
:root[data-theme="stone-light"] .pk-select,
:root[data-theme="stone-light"] .pk-textarea{
  background-color:#ffffff;
  border-color:var(--pk-border);
  color:var(--pk-text);
  box-shadow:inset 0 1px 1px rgba(28,25,23,.03);
}
:root[data-theme="stone-light"] .pk-input:focus,
:root[data-theme="stone-light"] .pk-select:focus,
:root[data-theme="stone-light"] .pk-textarea:focus{
  border-color:var(--pk-border-focus);
  box-shadow:0 0 0 3px rgba(58,141,255,.18);
}

/* Select arrow / picker / chevron */
:root[data-theme="stone-light"] .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='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="stone-light"] .pk-input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="stone-light"] .pk-input[type="time"]::-webkit-calendar-picker-indicator,
:root[data-theme="stone-light"] .pk-input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: none;
  opacity:.55;
}
:root[data-theme="stone-light"] .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='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Default button — MUSS VOR .pk-btn--primary stehen */
:root[data-theme="stone-light"] .pk-btn{
  background:#ffffff;
  border-color:var(--pk-border);
  color:var(--pk-text);
}
:root[data-theme="stone-light"] .pk-btn:hover{
  background:var(--pk-bg);
  border-color:var(--pk-border-strong);
}

/* Primary button — Cobalt gradient */
:root[data-theme="stone-light"] .pk-btn--primary{
  background:linear-gradient(180deg,#3a8dff 0%,#2877e0 100%);
  border-color:#2877e0;
  color:#ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 1px 2px rgba(58,141,255,.20);
}
:root[data-theme="stone-light"] .pk-btn--primary:hover{
  background:linear-gradient(180deg,#5aa0ff 0%,#3a8dff 100%);
  border-color:#3a8dff;
  color:#ffffff;
}

/* Modal */
:root[data-theme="stone-light"] .pk-modal{
  background:rgba(28,25,23,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
:root[data-theme="stone-light"] .pk-modal__card{
  background:#ffffff;
  border-color:var(--pk-border-strong);
  box-shadow:0 24px 60px rgba(28,25,23,.18);
}

/* Toast */
:root[data-theme="stone-light"] .pk-toast{
  background:#ffffff;
  border-color:var(--pk-border-strong);
  color:var(--pk-text);
  box-shadow:0 8px 24px rgba(28,25,23,.12);
}

/* Grain — noch dezenter als Paper (Stone braucht keinen warmen Boost) */
:root[data-theme="stone-light"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:.018;
  mix-blend-mode:multiply;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  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="stone-light"] body::before{ opacity:.012; }
}