/*
 * ShoppyCat default theme
 * Derived from the app's built-in "ShoppyCat" preset:
 * - Theme mode: light
 * - Layout: showcase
 * - Card style: soft
 * - Density: comfortable
 * - Corner radius: 24px
 */

:root {
  color-scheme: light;

  /* Core brand colors */
  --sc-primary: #303745;
  --sc-on-primary: #ffffff;
  --sc-secondary: #f2c7a5;
  --sc-on-secondary: #1a1a18;
  --sc-tertiary: #f4a65b;
  --sc-on-tertiary: #1a1a18;

  /* Default ShoppyCat preset surfaces */
  --sc-background: #fff8f0;
  --sc-on-background: #1a1a18;
  --sc-surface: #fffcf8;
  --sc-on-surface: #1a1a18;
  --sc-surface-variant: #f7e8da;
  --sc-on-surface-variant: #4c4239;
  --sc-outline: #e7d6c5;

  /* Semantic colors */
  --sc-success: #71ae69;
  --sc-on-success: #1a1a18;
  --sc-warning: #f2b25b;
  --sc-on-warning: #1a1a18;
  --sc-error: #e2876e;
  --sc-on-error: #1a1a18;

  /* Derived container colors approximating Theme.kt blends */
  --sc-primary-container: #cccfd5;
  --sc-on-primary-container: #1a1a18;
  --sc-secondary-container: #fceff4;
  --sc-on-secondary-container: #1a1a18;
  --sc-tertiary-container: #fde8d5;
  --sc-on-tertiary-container: #1a1a18;
  --sc-success-container: #e2f0df;
  --sc-warning-container: #fce8cf;
  --sc-error-container: #f8e2dc;

  /* Typography */
  --sc-font-sans: "Avenir Next", "Nunito Sans", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sc-font-mono: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  /* Rhythm */
  --sc-screen-padding: 16px;
  --sc-section-gap: 14px;
  --sc-content-padding: 16px;
  --sc-radius-xs: 13px;
  --sc-radius-sm: 23px;
  --sc-radius-md: 28px;
  --sc-radius-lg: 34px;
  --sc-radius-xl: 52px;

  /* Default showcase card treatment */
  --sc-card-radius: 24px;
  --sc-card-radius-hero: 32px;
  --sc-card-surface-alpha: 0.94;
  --sc-card-border-alpha: 0.16;
  --sc-card-shadow: 0 10px 30px rgba(48, 55, 69, 0.08), 0 2px 8px rgba(48, 55, 69, 0.05);
  --sc-card-shadow-soft: 0 3px 10px rgba(48, 55, 69, 0.05);

  /* Texture strength from default SOFT card style */
  --sc-panel-texture-alpha: 0.08;
  --sc-panel-texture-accent-alpha: 0.035;

  /* Hero gradient strength from default SHOWCASE layout */
  --sc-hero-strength: 1;

  /* Layout widths */
  --sc-shell-max-width: 1120px;
  --sc-reading-max-width: 760px;
}

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

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--sc-font-sans);
  color: var(--sc-on-background);
  background:
    radial-gradient(circle at 14% 10%, rgba(255, 255, 255, 0.92), transparent 26%),
    radial-gradient(circle at 88% 84%, rgba(244, 166, 91, 0.13), transparent 28%),
    linear-gradient(180deg, #fffaf3 0%, var(--sc-background) 55%, #fbf0e4 100%);
}

a {
  color: var(--sc-primary);
  text-decoration-color: rgba(48, 55, 69, 0.24);
  text-underline-offset: 0.18em;
}

button,
input,
select,
textarea {
  font: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.sc-app {
  min-height: 100vh;
  padding: 24px var(--sc-screen-padding) 48px;
}

.sc-shell {
  width: min(100%, var(--sc-shell-max-width));
  margin: 0 auto;
}

.sc-stack {
  display: grid;
  gap: var(--sc-section-gap);
}

.sc-reading {
  width: min(100%, var(--sc-reading-max-width));
}

.sc-surface {
  background: rgba(255, 252, 248, var(--sc-card-surface-alpha));
  color: var(--sc-on-surface);
  border: 1px solid rgba(231, 214, 197, var(--sc-card-border-alpha));
  box-shadow: var(--sc-card-shadow-soft);
}

.sc-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--sc-card-radius);
  background: rgba(255, 252, 248, var(--sc-card-surface-alpha));
  color: var(--sc-on-surface);
  border: 1px solid rgba(231, 214, 197, var(--sc-card-border-alpha));
  box-shadow: var(--sc-card-shadow);
}

.sc-card > .sc-card-body {
  position: relative;
  z-index: 1;
  padding: 18px;
}

.sc-card-textured::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(255, 252, 247, calc(var(--sc-panel-texture-alpha) * 0.95)) 0%,
      rgba(255, 255, 255, calc(var(--sc-panel-texture-alpha) * 0.45)) 36%,
      rgba(248, 239, 227, calc(var(--sc-panel-texture-alpha) * 0.72)) 100%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, calc(var(--sc-panel-texture-alpha) * 0.42)) 0%,
      transparent 46%,
      rgba(48, 55, 69, calc(var(--sc-panel-texture-accent-alpha) * 0.30)) 100%
    ),
    repeating-linear-gradient(
      78deg,
      rgba(231, 214, 197, calc(var(--sc-panel-texture-alpha) * 0.18)) 0 1px,
      transparent 1px 42px
    ),
    radial-gradient(circle at 15% 12%, rgba(255, 255, 255, calc(var(--sc-panel-texture-alpha) * 0.30)) 0, transparent 34%),
    radial-gradient(circle at 88% 86%, rgba(244, 166, 91, calc(var(--sc-panel-texture-accent-alpha) * 1.4)) 0, transparent 34%);
  opacity: 1;
  pointer-events: none;
}

.sc-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--sc-card-radius-hero);
  background:
    linear-gradient(
      180deg,
      rgba(204, 207, 213, calc(0.72 * var(--sc-hero-strength))) 0%,
      rgba(252, 239, 244, calc(0.40 * var(--sc-hero-strength))) 40%,
      rgba(253, 232, 213, calc(0.48 * var(--sc-hero-strength))) 72%,
      rgba(255, 252, 248, var(--sc-card-surface-alpha)) 100%
    );
  border: 1px solid rgba(231, 214, 197, var(--sc-card-border-alpha));
  box-shadow: var(--sc-card-shadow);
}

.sc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.40) 0%, transparent 40%, rgba(242, 199, 165, 0.18) 100%),
    repeating-linear-gradient(78deg, rgba(231, 214, 197, 0.12) 0 1px, transparent 1px 46px),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.34), transparent 32%),
    radial-gradient(circle at 84% 82%, rgba(242, 199, 165, 0.22), transparent 30%);
  pointer-events: none;
}

.sc-hero > * {
  position: relative;
  z-index: 1;
}

.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sc-secondary-container);
  color: var(--sc-primary);
  border: 1px solid rgba(231, 214, 197, 0.6);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.sc-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--sc-surface-variant);
  color: var(--sc-on-surface-variant);
  font-size: 0.75rem;
  font-weight: 600;
}

.sc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  background: var(--sc-primary);
  color: var(--sc-on-primary);
  box-shadow: 0 10px 24px rgba(48, 55, 69, 0.16);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.sc-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(48, 55, 69, 0.18);
}

.sc-button:active {
  transform: translateY(0);
}

.sc-button-secondary {
  background: var(--sc-tertiary);
  color: var(--sc-on-tertiary);
  box-shadow: 0 10px 24px rgba(244, 166, 91, 0.22);
}

.sc-button-ghost {
  background: rgba(255, 252, 248, 0.82);
  color: var(--sc-primary);
  border: 1px solid rgba(231, 214, 197, 0.9);
  box-shadow: none;
}

.sc-input,
.sc-select,
.sc-textarea {
  width: 100%;
  border: 1px solid rgba(231, 214, 197, 0.95);
  border-radius: 18px;
  background: rgba(255, 252, 248, 0.96);
  color: var(--sc-on-surface);
  padding: 13px 15px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
  border-color: rgba(48, 55, 69, 0.34);
  box-shadow: 0 0 0 4px rgba(48, 55, 69, 0.08);
}

.sc-section-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--sc-primary);
}

.sc-headline {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--sc-primary);
}

.sc-subtitle {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(26, 26, 24, 0.72);
}

.sc-kpi {
  display: grid;
  gap: 2px;
}

.sc-kpi-value {
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--sc-primary);
}

.sc-kpi-label {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(76, 66, 57, 0.72);
}

.sc-grid {
  display: grid;
  gap: var(--sc-section-gap);
}

.sc-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sc-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sc-divider {
  height: 1px;
  border: 0;
  background: rgba(231, 214, 197, 0.8);
  margin: 0;
}

.sc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sc-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(231, 214, 197, 0.72);
}

.sc-list-row:last-child {
  border-bottom: 0;
}

.sc-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(48, 55, 69, 0.35);
  background: transparent;
  flex: 0 0 auto;
}

.sc-check.is-checked {
  border-color: var(--sc-success);
  background: radial-gradient(circle at 50% 50%, var(--sc-success) 0 48%, transparent 52%);
}

.sc-status-success {
  color: #4e7f49;
  background: var(--sc-success-container);
}

.sc-status-warning {
  color: #8d6123;
  background: var(--sc-warning-container);
}

.sc-status-error {
  color: #934f3e;
  background: var(--sc-error-container);
}

@media (max-width: 720px) {
  .sc-app {
    padding-top: 16px;
    padding-bottom: 32px;
  }

  .sc-grid-2,
  .sc-grid-3 {
    grid-template-columns: 1fr;
  }

  .sc-card > .sc-card-body {
    padding: 16px;
  }

  .sc-headline {
    font-size: 2rem;
  }
}