/* 
    sparklers_terms.css
    (c) HANABI Ltd.
    This content is strictly prohibited from being used in any form, whether for personal or commercial purposes.
    contact us contact@hanabi.ltd
*/

.sparklers-site {
  --sparklers-font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --sparklers-max-width: 72rem;
  --sparklers-space-2: 0.5rem;
  --sparklers-space-3: 0.75rem;
  --sparklers-space-4: 1rem;
  --sparklers-space-6: 1.5rem;
  --sparklers-space-8: 2rem;
  --sparklers-radius-1: 8px;

  --sparklers-fg: #0f172a;            /* slate-900-ish */
  --sparklers-bg: #ffffff;
  --sparklers-muted-fg: #334155;      /* slate-700-ish */
  --sparklers-link: #0a66c2;
  --sparklers-terms-border: #e5e7eb;
  color-scheme: light dark;
}

/* Dark mode via media query for wide compatibility */
@media (prefers-color-scheme: dark) {
  .sparklers-site {
    --sparklers-fg: #e5e7eb;
    --sparklers-bg: #0b1020;
    --sparklers-muted-fg: #9ca3af;
    --sparklers-link: #79b7ff;
    --sparklers-terms-border: #1f2937;
  }
}

/* Base styles */
html, body {
  height: 100%;
}

body.sparklers-site {
  margin: 0;
  background: var(--sparklers-bg);
  color: var(--sparklers-fg);
  font-family: var(--sparklers-font-family);
  font-variation-settings: "opsz" 14;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

/* Header */
.sparklers-header {
  border-bottom: 1px solid var(--sparklers-terms-border);
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
}

@media (prefers-color-scheme: dark) {
  .sparklers-header {
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  }
}

.sparklers-header-inner {
  max-width: var(--sparklers-max-width);
  margin: 0 auto;
  padding: var(--sparklers-space-8) var(--sparklers-space-4);
}

.sparklers-title {
  margin: 0 0 var(--sparklers-space-3);
  font-weight: 700; /* Bold via font-weight */
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.sparklers-subtitle {
  margin: 0 0 var(--sparklers-space-2);
  color: var(--sparklers-muted-fg);
  font-weight: 500;
}

.sparklers-site-url {
  margin: 0;
  color: var(--sparklers-muted-fg);
  font-size: 0.95rem;
}

/* Links */
.sparklers-link {
  color: var(--sparklers-link);
  text-underline-offset: 2px;
}

.sparklers-link:hover,
.sparklers-link:focus-visible {
  text-decoration: underline;
}

/* Main container */
.sparklers-main {
  max-width: var(--sparklers-max-width);
  margin: 0 auto;
  padding: var(--sparklers-space-8) var(--sparklers-space-4);
}

/* Sections */
.sparklers-section {
  padding: var(--sparklers-space-6) 0;
  border-bottom: 1px solid var(--sparklers-terms-border);
}

.sparklers-section:last-child {
  border-bottom: none;
}

.sparklers-heading {
  margin: 0 0 var(--sparklers-space-3);
  font-weight: 700; /* Bold via font-weight */
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
}

.sparklers-paragraph {
  margin: 0 0 var(--sparklers-space-4);
  font-weight: 400;
}

/* Lists */
.sparklers-list {
  margin: 0 0 var(--sparklers-space-4);
  padding-left: 1.25rem;
}

.sparklers-list-item {
  margin-bottom: var(--sparklers-space-2);
}

/* Definition lists */
.sparklers-definition-list {
  margin: 0;
  padding: 0;
}

.sparklers-definition-item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--sparklers-space-3);
  align-items: start;
  padding: var(--sparklers-space-2) 0;
  border-top: 1px dashed var(--sparklers-terms-border);
}

.sparklers-definition-item:first-child {
  border-top: none;
}

.sparklers-term {
  font-weight: 600;
  color: var(--sparklers-muted-fg);
}

.sparklers-desc {
  font-weight: 400;
}

/* Date */
.sparklers-date {
  margin-top: var(--sparklers-space-6);
  font-weight: 500;
  color: var(--sparklers-muted-fg);
}

/* Footer */
.sparklers-footer {
  border-top: 1px solid var(--sparklers-terms-border);
}

.sparklers-footer-inner {
  max-width: var(--sparklers-max-width);
  margin: 0 auto;
  padding: var(--sparklers-space-6) var(--sparklers-space-4);
}

.sparklers-footnote {
  color: var(--sparklers-muted-fg);
}

/* Responsive tweaks */
@media screen and (max-width: 640px) {
  .sparklers-definition-item {
    grid-template-columns: 1fr;
  }
}