/* chrome-skin.css — Sigma Storybook chrome (DSKintsugi sigma brand).
 *
 * Single source of truth: kintsugi-ds/platforms/web/sigma-default.css
 * (symlinked here as `sigma-tokens.css`). This file ONLY adds back-compat
 * aliases for chrome selectors that pre-date the brand file — new code
 * should reference --sg-background / --sg-text-primary / --sg-accent
 * directly from sigma-default.css.
 *
 * Cream PRIMARY surface; crimson `--sg-accent` (#C41E3A from tide-wave-v3
 * CTA) is the ONE accent — CTAs, key data points, active nav, section
 * underlines. Operator directive 2026-05-13 (final).
 */

@import url("sigma-tokens.css");

/* Storybook chrome is ALWAYS light (cream PRIMARY) regardless of OS dark mode.
 * Override the dark-mode block from sigma-default.css for chrome surfaces.
 * (The Katagami product layer inside .sb-live-preview stays dark by design.) */
@media (prefers-color-scheme: dark) {
  :root {
    --sg-background:        #FAFAFA;
    --sg-surface:           #FFFFFF;
    --sg-surface-alt:       #F4F4F5;
    --sg-text-primary:      #171717;
    --sg-text-secondary:    #404040;
    --sg-text-muted:        #525252;
    --sg-accent:            #C41E3A;
    --sg-accent-pressed:    #8B1A1A;
    --sg-accent-on:         #FFFFFF;
    --sg-border:            #E5E5E5;
    --sg-border-strong:     #D1D5DB;
    --sg-action-primary:    #C41E3A;
    --sg-note-bg:           #FFF5F5;
  }
}

:root {
  color-scheme: light;  /* hint to browser: storybook chrome is light */

  /* Back-compat aliases — chrome-skin selectors below use these names.
     New code: reference --sg-background / --sg-text-primary / --sg-accent
     directly from sigma-default.css. */
  --sg-surface:        var(--sg-background);     /* cream #FAFAFA */
  --sg-surface-warm:   var(--sg-surface-alt);    /* cream-warm #F5F0E8 */
  --sg-surface-deep:   var(--sg-border);         /* stone #E5E5E5 */
  --sg-card:           var(--sg-surface);        /* white #FFFFFF */

  --sg-text:           var(--sg-text-primary);   /* charcoal #171717 */
  --sg-text-soft:      var(--sg-text-secondary); /* #404040 */
  --sg-text-mute:      var(--sg-text-muted);     /* #525252 */
  --sg-text-on-accent: var(--sg-accent-on);      /* white on crimson */

  --sg-accent-soft:    var(--sg-crimson-bright); /* #DC143C */
  --sg-accent-deep:    var(--sg-accent-pressed); /* #8B1A1A */

  --sg-trim:           var(--sg-border);

  /* Status */
  --sg-success: #16A34A;
  --sg-warn:    #D97706;
  --sg-error:   #DC2626;

  /* Spacing 8px grid */
  --sg-grid: 8px;

  /* Radius */
  --sg-r-sm: 4px;
  --sg-r:    6px;
  --sg-r-lg: 12px;

  /* Shadows */
  --sg-shadow-sm: 0 1px 2px rgba(44, 44, 44, 0.06);
  --sg-shadow:    0 2px 6px rgba(44, 44, 44, 0.08);
  --sg-shadow-lg: 0 8px 24px rgba(44, 44, 44, 0.10);
}

body.storybook,
body {
  margin: 0;
  background: var(--sg-surface);
  color: var(--sg-text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-feature-settings: 'kern' 1, 'liga' 1, 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

a { color: var(--sg-accent); text-decoration: none; }
a:hover { color: var(--sg-accent-soft); }

.storybook-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

/* SIDEBAR (cream surface, burgundy accent only on active link) */
.storybook-sidebar {
  background: var(--sg-surface-warm);
  color: var(--sg-text);
  padding: calc(var(--sg-grid) * 4) calc(var(--sg-grid) * 3);
  border-right: 1px solid var(--sg-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.storybook-sidebar h1 {
  font: 600 17px/1.3 inherit;
  margin: 0 0 4px 0;
  color: var(--sg-text);
  letter-spacing: -0.01em;
}

.storybook-sidebar .subtitle {
  color: var(--sg-text-mute);
  font: 11px/1.4 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: calc(var(--sg-grid) * 4);
}

.storybook-sidebar h2 {
  font: 600 10px/1.4 inherit;
  color: var(--sg-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: calc(var(--sg-grid) * 3) 0 var(--sg-grid) 0;
  padding-top: calc(var(--sg-grid) * 2);
  border-top: 1px solid var(--sg-border);
}
.storybook-sidebar h2:first-of-type { border-top: 0; padding-top: 0; }

.storybook-sidebar ul { list-style: none; margin: 0; padding: 0; }
.storybook-sidebar li { margin: 1px 0; }

.storybook-sidebar a {
  display: block;
  color: var(--sg-text);
  padding: 6px 10px;
  border-radius: var(--sg-r);
  font: 14px/1.4 inherit;
  transition: background 120ms ease, color 120ms ease;
  text-decoration: none;
}

.storybook-sidebar a:hover {
  background: var(--sg-card);
  color: var(--sg-accent);
}

.storybook-sidebar a.active {
  background: var(--sg-accent);
  color: var(--sg-text-on-accent);
  font-weight: 600;
  box-shadow: var(--sg-shadow-sm);
}

/* MAIN */
.storybook-main {
  padding: calc(var(--sg-grid) * 6) calc(var(--sg-grid) * 8);
  max-width: 1100px;
}

.storybook-main > .breadcrumb {
  font: 12px/1.4 inherit;
  color: var(--sg-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sg-grid);
}

.storybook-main > h1 {
  font: 600 36px/1.15 inherit;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sg-grid) 0;
  color: var(--sg-text);
  position: relative;
  padding-bottom: calc(var(--sg-grid) * 1.5);
}
.storybook-main > h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--sg-accent);
  border-radius: 2px;
}

.storybook-main > .description {
  font: 17px/1.55 inherit;
  color: var(--sg-text-soft);
  margin: calc(var(--sg-grid) * 2) 0 calc(var(--sg-grid) * 5) 0;
  max-width: 64ch;
}

.storybook-main > .description strong { color: var(--sg-text); font-weight: 600; }

/* PANELS (white cards on cream) */
.storybook-panel {
  background: var(--sg-card);
  border-radius: var(--sg-r-lg);
  border: 1px solid var(--sg-border);
  padding: calc(var(--sg-grid) * 3);
  margin-bottom: calc(var(--sg-grid) * 3);
  box-shadow: var(--sg-shadow-sm);
}

.storybook-panel > h3 {
  font: 600 11px/1.4 inherit;
  color: var(--sg-text-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 calc(var(--sg-grid) * 2) 0;
  padding-bottom: calc(var(--sg-grid) * 1);
  border-bottom: 1px solid var(--sg-border);
}

/* KNOBS */
.knobs {
  display: flex;
  gap: calc(var(--sg-grid) * 3);
  flex-wrap: wrap;
  align-items: center;
}

.knob-group {
  display: flex;
  gap: 2px;
  background: var(--sg-surface-deep);
  padding: 3px;
  border-radius: var(--sg-r);
}

.knob-group .knob-label {
  font: 600 10px/1.4 inherit;
  color: var(--sg-text-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  align-self: center;
}

.knob {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  color: var(--sg-text-soft);
  border-radius: var(--sg-r-sm);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.knob:hover { color: var(--sg-text); background: rgba(255, 255, 255, 0.6); }

.knob[aria-pressed="true"] {
  background: var(--sg-accent);
  color: var(--sg-text-on-accent);
  font-weight: 600;
  box-shadow: var(--sg-shadow-sm);
}

/* LIVE PREVIEW */
.live-preview,
.sb-live-preview {
  background: var(--sg-surface-warm);
  border: 1px dashed var(--sg-border-strong);
  border-radius: var(--sg-r);
  padding: calc(var(--sg-grid) * 3);
  margin-top: calc(var(--sg-grid) * 2);
  overflow: auto;
}

.live-preview[data-density="compact"] .ks-data-table-row,
.live-preview[data-density="compact"] .ks-data-table-header,
.sb-live-preview[data-density="compact"] .ks-data-table-row,
.sb-live-preview[data-density="compact"] .ks-data-table-header {
  font-size: 13px;
}
.live-preview[data-density="compact"] .ks-data-table-cell,
.live-preview[data-density="compact"] .ks-data-table-header-cell,
.sb-live-preview[data-density="compact"] .ks-data-table-cell,
.sb-live-preview[data-density="compact"] .ks-data-table-header-cell {
  padding: 4px 8px;
}

.live-preview[data-density="dense"] .ks-data-table-row,
.live-preview[data-density="dense"] .ks-data-table-header,
.sb-live-preview[data-density="dense"] .ks-data-table-row,
.sb-live-preview[data-density="dense"] .ks-data-table-header {
  font-size: 12px;
}
.live-preview[data-density="dense"] .ks-data-table-cell,
.live-preview[data-density="dense"] .ks-data-table-header-cell,
.sb-live-preview[data-density="dense"] .ks-data-table-cell,
.sb-live-preview[data-density="dense"] .ks-data-table-header-cell {
  padding: 2px 6px;
}

/* CODE BLOCK (slate-dark, NOT burgundy) */
.storybook-code,
pre.code,
pre {
  background: #1F2937;
  color: #E5E7EB;
  padding: calc(var(--sg-grid) * 2.5) calc(var(--sg-grid) * 3);
  border-radius: var(--sg-r);
  margin: 0;
  font: 13px/1.55 "SF Mono", Menlo, Monaco, Consolas, monospace;
  overflow-x: auto;
}

.storybook-code .kw,   .kw   { color: #C084FC; }
.storybook-code .str,  .str  { color: #D4AF6A; }
.storybook-code .num,  .num  { color: #A3E635; }
.storybook-code .com,  .com  { color: #6B7280; font-style: italic; }
.storybook-code .fn,   .fn   { color: #67C5FF; }
.storybook-code .type, .type { color: #F7768E; }

/* PROPS TABLE */
table.props,
table.sb-props {
  border-collapse: collapse;
  width: 100%;
  font: 14px/1.4 inherit;
}

table.props th,
table.sb-props th {
  text-align: left;
  font-weight: 600;
  color: var(--sg-text);
  padding: var(--sg-grid) calc(var(--sg-grid) * 1.5);
  border-bottom: 2px solid var(--sg-border-strong);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

table.props td,
table.sb-props td {
  padding: var(--sg-grid) calc(var(--sg-grid) * 1.5);
  border-bottom: 1px solid var(--sg-border);
}

table.props td:first-child,
table.sb-props td:first-child {
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--sg-accent);
  font-weight: 500;
}

/* USED IN */
.used-in {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sg-grid);
  flex-wrap: wrap;
}

.used-in li a {
  display: inline-block;
  padding: 6px 14px;
  background: var(--sg-surface-warm);
  color: var(--sg-text);
  border: 1px solid var(--sg-border);
  text-decoration: none;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  transition: all 120ms ease;
}

.used-in li a:hover {
  background: var(--sg-accent);
  color: var(--sg-text-on-accent);
  border-color: var(--sg-accent);
}

/* CROSS-PLATFORM */
.cross-platform {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: calc(var(--sg-grid) * 3);
  margin-top: calc(var(--sg-grid) * 4);
  align-items: start;
}

.cross-platform .frame {
  background: var(--sg-surface-warm);
  border-radius: var(--sg-r-lg);
  border: 1px solid var(--sg-border);
  padding: calc(var(--sg-grid) * 1.5);
  position: relative;
}

.cross-platform .frame iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: var(--sg-r);
  background: var(--sg-card);
}

.cross-platform .frame .label {
  position: absolute;
  top: -10px;
  left: var(--sg-grid);
  background: var(--sg-card);
  color: var(--sg-accent);
  padding: 2px 10px;
  border: 1px solid var(--sg-border);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cross-platform .frame.ipad,
.cross-platform .frame.iphone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.sg-metric-key { color: var(--sg-accent); font-weight: 700; }
.sg-trend-up   { color: var(--sg-success); font-weight: 600; }
.sg-trend-down { color: var(--sg-error);   font-weight: 600; }

.sg-cta {
  display: inline-block;
  background: var(--sg-accent);
  color: var(--sg-text-on-accent);
  padding: 10px 20px;
  border-radius: var(--sg-r);
  font: 600 14px/1 inherit;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  text-decoration: none;
}

.sg-cta:hover {
  background: var(--sg-accent-deep);
  transform: translateY(-1px);
  box-shadow: var(--sg-shadow);
}

.sg-cta-secondary {
  background: transparent;
  color: var(--sg-text);
  border: 1px solid var(--sg-border-strong);
}

.sg-cta-secondary:hover {
  background: var(--sg-surface-warm);
  color: var(--sg-accent);
  border-color: var(--sg-accent);
}

@media (max-width: 900px) {
  .storybook-layout { grid-template-columns: 1fr; }
  .storybook-sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--sg-border); }
  .cross-platform { grid-template-columns: 1fr; }
  .storybook-main { padding: calc(var(--sg-grid) * 4); }
}