/**
 * Theme Studio v2 — modal, presets, colour engine, galleries, density & shape.
 * Uses design tokens (--color-brand, --radius-*) so it follows the live accent.
 * @author Amit Haridas, ConcreteInfo
 */

/* ── Radius personality (Theme Engine v2) ──────────────────────────────
   Remaps the --radius-* token scale globally. Components that consume these
   tokens (cards, buttons, inputs, badges…) inherit the chosen personality.
   'soft' (no attribute) keeps the design-token defaults. */
html[data-radius="sharp"] {
  --radius-sm: 0;   --radius-md: 2px;  --radius-lg: 4px;  --radius-xl: 6px;  --radius-2xl: 8px;
}
html[data-radius="round"] {
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px; --radius-2xl: 32px;
}
/* High contrast (reserved — bumps text + border strength). */
html[data-contrast="high"] {
  --color-text-primary: #0d0b09;
  --color-text-secondary: #2a2521;
  --color-border: #2a2521;
}
html[data-contrast="high"].dark {
  --color-text-primary: #ffffff;
  --color-text-secondary: #e7e3df;
  --color-border: #4a4540;
}

/* ── Modal shell ────────────────────────────────────────────────────── */
.ts-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:flex-start;justify-content:center;padding:24px 16px;background:rgba(13,11,9,.6);backdrop-filter:blur(4px);overflow:auto}
.ts-modal.show{display:flex;animation:ts-fade .2s ease}
@keyframes ts-fade{from{opacity:0}to{opacity:1}}
@keyframes ts-rise{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.ts-panel{width:100%;max-width:640px;background:#fff;color:#2a2521;border-radius:var(--radius-xl);box-shadow:0 28px 70px -22px rgba(0,0,0,.5);border:1px solid #e7e5e3;animation:ts-rise .26s cubic-bezier(.2,.7,.3,1)}
html.dark .ts-panel{background:#1a1714;color:#f5f3f0;border-color:#2a2521}

.ts-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid #f0eeed;position:sticky;top:0;background:inherit;z-index:3;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
html.dark .ts-head{border-bottom-color:#2a2521}
.ts-head__title{display:flex;align-items:center;gap:13px;min-width:0}
.ts-head__icon{width:40px;height:40px;border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-brand,var(--color-brand)) 14%,transparent);color:var(--color-brand,var(--color-brand));display:grid;place-items:center;font-size:17px;flex-shrink:0}
.ts-head h2{font-family:'Barlow Condensed',system-ui,sans-serif;font-size:21px;font-weight:800;line-height:1;margin:0;letter-spacing:.2px}
.ts-head p{font-size:11.5px;color:#9a9696;margin:3px 0 0;font-weight:500;line-height:1}
html.dark .ts-head p{color:#857f78}
.ts-x{background:none;border:none;font-size:24px;line-height:1;color:#9a9696;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:.15s;flex-shrink:0}
.ts-x:hover{background:#f3f4f6;color:#2a2521}
html.dark .ts-x:hover{background:#2a2521;color:#fff}

.ts-body{padding:20px}
.ts-section{margin-bottom:22px}
.ts-section:last-child{margin-bottom:0}
.ts-label{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#6b7280;margin-bottom:11px}
html.dark .ts-label{color:#9b948d}
.ts-sublabel{display:block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:#9a9696;margin-bottom:8px}
html.dark .ts-sublabel{color:#857f78}

/* ── Segmented control ──────────────────────────────────────────────── */
.ts-seg{display:inline-flex;background:#f3f0ee;border-radius:var(--radius-md);padding:3px;gap:2px;flex-wrap:wrap}
html.dark .ts-seg{background:#16130f}
.ts-seg button{border:none;background:transparent;color:#6b7280;font-size:12.5px;font-weight:700;padding:8px 15px;border-radius:var(--radius-sm);cursor:pointer;transition:.15s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
html.dark .ts-seg button{color:#9b948d}
.ts-seg button:hover{color:#2a2521}
html.dark .ts-seg button:hover{color:#f5f3f0}
.ts-seg button.active{background:#fff;color:#2a2521;box-shadow:0 1px 3px rgba(0,0,0,.12)}
html.dark .ts-seg button.active{background:#2a2521;color:#fff}

/* ── Preset grid with live mockups ──────────────────────────────────── */
.ts-presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px}
.ts-preset{display:flex;flex-direction:column;gap:9px;text-align:left;background:#faf9f8;border:1.5px solid #e7e5e3;border-radius:var(--radius-md);padding:9px;cursor:pointer;transition:.16s;font-family:inherit}
html.dark .ts-preset{background:#16130f;border-color:#2a2521}
.ts-preset:hover{border-color:var(--color-brand,var(--color-brand));transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(0,0,0,.18)}
.ts-preset.active{border-color:var(--color-brand,var(--color-brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand,var(--color-brand)) 20%,transparent)}
/* mini mockup */
.ts-preset__mock{position:relative;display:block;height:62px;border-radius:var(--radius-sm);background:#fff;overflow:hidden;border:1px solid #eee;box-shadow:inset 0 -10px 14px -10px rgba(0,0,0,.08)}
.ts-preset__mock.is-dark{background:#14110e;border-color:#2a2521}
.ts-preset__bar{position:absolute;left:0;top:0;height:14px;width:100%}
.ts-preset__lines{position:absolute;left:8px;right:8px;bottom:9px;display:flex;flex-direction:column;gap:4px}
.ts-preset__ln{height:5px;border-radius:99px;background:#e7e5e3;width:100%}
.ts-preset__mock.is-dark .ts-preset__ln{background:#2a2521}
.ts-preset__ln--accent{width:34%;height:6px}
.ts-preset__ln--sm{width:60%}
.ts-preset__meta{display:flex;flex-direction:column;gap:1px;padding:0 2px}
.ts-preset__name{font-size:12.5px;font-weight:800;line-height:1.15;color:#2a2521}
html.dark .ts-preset__name{color:#f5f3f0}
.ts-preset__sub{font-size:10px;font-weight:600;color:#9a9696;text-transform:capitalize}
html.dark .ts-preset__sub{color:#857f78}

/* ── Colour engine ──────────────────────────────────────────────────── */
.ts-color{background:#faf9f8;border:1px solid #f0eeed;border-radius:var(--radius-md);padding:14px}
html.dark .ts-color{background:#16130f;border-color:#2a2521}
.ts-color__top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.ts-swatch-wrap{position:relative;width:48px;height:48px;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;display:inline-block;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.1);flex-shrink:0}
.ts-swatch-box{position:absolute;inset:0;background:var(--color-brand);transition:background .1s}
.ts-swatch-wrap input[type="color"]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);border:none;padding:0;cursor:pointer;opacity:0}
.ts-color__meta{display:flex;flex-direction:column;gap:5px;min-width:0}
.ts-hex{font-family:'SF Mono',ui-monospace,monospace;font-size:14px;font-weight:700;color:#2a2521;background:#fff;border:1.5px solid #e7e5e3;border-radius:var(--radius-sm);padding:6px 10px;width:110px;outline:none;transition:.15s}
html.dark .ts-hex{background:#1a1714;border-color:#2a2521;color:#f5f3f0}
.ts-hex:focus{border-color:var(--color-brand,var(--color-brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand,var(--color-brand)) 16%,transparent)}
.ts-hsl{font-family:'SF Mono',ui-monospace,monospace;font-size:11px;font-weight:600;color:#9a9696}
html.dark .ts-hsl{color:#857f78}

/* sliders */
.ts-sliders{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.ts-slider{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:12px}
.ts-slider label{font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:.4px}
html.dark .ts-slider label{color:#9b948d}
.ts-range{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;outline:none;cursor:pointer;border:1px solid rgba(0,0,0,.08);background:var(--ts-track,#ddd)}
html.dark .ts-range{border-color:rgba(255,255,255,.08)}
.ts-range--hue{background:var(--ts-hue-track,#f00)}
.ts-range--sat{background:var(--ts-sat-track,var(--color-brand))}
.ts-range--lit{background:var(--ts-lit-track,#ccc)}
.ts-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--color-brand,var(--color-brand));box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer;transition:transform .1s}
.ts-range::-webkit-slider-thumb:active{transform:scale(1.15)}
.ts-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--color-brand,var(--color-brand));box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer}

/* palette + recent */
.ts-swatches{display:flex;flex-wrap:wrap;gap:7px;padding-top:4px;border-top:1px dashed #ececec;padding-top:14px}
html.dark .ts-swatches{border-top-color:#2a2521}
.ts-dotswatch{width:24px;height:24px;border-radius:var(--radius-sm);border:1.5px solid rgba(0,0,0,.12);cursor:pointer;padding:0;transition:transform .12s;position:relative}
html.dark .ts-dotswatch{border-color:rgba(255,255,255,.16)}
.ts-dotswatch:hover{transform:scale(1.16);z-index:1}
.ts-dotswatch.active::after{content:"";position:absolute;inset:-3px;border:2px solid #fff;border-radius:inherit;box-shadow:0 0 0 2px var(--color-brand,var(--color-brand))}
.ts-recent{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.ts-recent__label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#b0b0b0}
.ts-recent__row{display:flex;gap:6px;flex-wrap:wrap}
.ts-recent__empty{font-size:11px;color:#bcbcbc;font-style:italic}
html.dark .ts-recent__empty{color:#6b6660}

/* ── Card-header gallery ────────────────────────────────────────────── */
.ts-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.ts-cardswatch{padding:0;border:1.5px solid #e7e5e3;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;background:transparent;transition:.15s;font-family:inherit}
html.dark .ts-cardswatch{border-color:#2a2521}
.ts-cardswatch:hover{border-color:var(--color-brand,var(--color-brand));transform:translateY(-1px)}
.ts-cardswatch.active{border-color:var(--color-brand,var(--color-brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand,var(--color-brand)) 18%,transparent)}
.ts-cardswatch__hd{display:flex;align-items:center;gap:6px;padding:12px 12px;font-size:12px;font-weight:800;border-bottom:1px solid transparent;position:relative;min-height:40px}
.ts-cardswatch__accent{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--color-brand,var(--color-brand))}
.ts-cardswatch__name{font-size:11px;font-weight:700;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Typography gallery ─────────────────────────────────────────────── */
.ts-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.ts-font{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 8px;background:#faf9f8;border:1.5px solid #e7e5e3;border-radius:var(--radius-md);cursor:pointer;transition:.15s;font-family:inherit}
html.dark .ts-font{background:#16130f;border-color:#2a2521}
.ts-font:hover{border-color:var(--color-brand,var(--color-brand));transform:translateY(-1px)}
.ts-font.active{border-color:var(--color-brand,var(--color-brand));box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand,var(--color-brand)) 18%,transparent)}
.ts-font__prev{font-size:22px;font-weight:800;line-height:1;color:#2a2521}
html.dark .ts-font__prev{color:#f5f3f0}
.ts-font__name{font-size:10.5px;font-weight:700;color:#6b7280;text-align:center;line-height:1.1}
html.dark .ts-font__name{color:#9b948d}

/* ── Twin segmented row (density + shape + contrast) ────────────────── */
.ts-twin{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.ts-twin{grid-template-columns:1fr 1fr}}
@media(min-width:760px){.ts-twin{grid-template-columns:repeat(3,1fr)}}

/* ── Footer ─────────────────────────────────────────────────────────── */
.ts-foot{display:flex;justify-content:flex-end;gap:10px;padding:15px 20px;border-top:1px solid #f0eeed;position:sticky;bottom:0;background:inherit;border-radius:0 0 var(--radius-xl) var(--radius-xl)}
html.dark .ts-foot{border-top-color:#2a2521}
.ts-btn{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:var(--radius-md);padding:10px 20px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
.ts-btn.primary{background:var(--color-brand,var(--color-brand));color:#fff}
.ts-btn.primary:hover{filter:brightness(.93)}
.ts-btn.ghost{background:#f3f0ee;color:#3a3531}
.ts-btn.ghost:hover{background:#e7e5e3}
html.dark .ts-btn.ghost{background:#2a2521;color:#f5f3f0}
html.dark .ts-btn.ghost:hover{background:#3a3533}

/* ── Compact density token overrides ────────────────────────────────── */
html[data-density="compact"] .card{padding:14px}
html[data-density="compact"] .table th,
html[data-density="compact"] .table td{padding:7px 10px}
html[data-density="compact"] .ag-theme-alpine .ag-row{min-height:34px}
html[data-density="compact"] .btn{padding:7px 13px;font-size:13px}

/* Tighter studio panel on small screens */
@media(max-width:560px){
  .ts-body{padding:16px}
  .ts-slider{grid-template-columns:1fr;gap:6px}
  .ts-color__top{flex-wrap:wrap}
}