/**
 * CORELODE AI — Theme Tokens
 * Visual system inspired by corp.penmark.jp:
 * warm paper background, near-black type, fresh green accent.
 * Recolour via --cl-primary / --cl-bg.
 */

:root {
  --cl-primary: #1ac067;
  --cl-primary-rgb: 26, 192, 103;
  --cl-accent: #1ac067;
  --cl-accent-rgb: 26, 192, 103;

  --cl-success: #1ac067;
  --cl-info: #3b82f6;
  --cl-warning: #d97706;
  --cl-danger: #dc2626;

  --cl-bg: #f3f0e8;
  --cl-bg-elevated: #fffdf8;
  --cl-bg-card: #ffffff;
  --cl-dark: #111111;
  --cl-muted: #6b675e;
  --cl-light: #ebe7dc;
  --cl-white: #ffffff;
  --cl-border: rgba(17, 17, 17, 0.12);

  --cl-primary-soft: rgba(var(--cl-primary-rgb), 0.12);
  --cl-primary-soft-strong: rgba(var(--cl-primary-rgb), 0.2);
  --cl-primary-shadow: rgba(var(--cl-primary-rgb), 0.28);
  --cl-primary-glow: rgba(var(--cl-primary-rgb), 0.4);

  --cl-font-sans: "Noto Sans", "Lato", "Hiragino Sans", sans-serif;
  --cl-font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --cl-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --cl-fs-html: 16px;
  --cl-fs-body: 1rem;
  --cl-fs-small: 0.9rem;
  --cl-fs-label: 0.8rem;
  --cl-fs-nav: 0.9rem;
  --cl-fs-lead: 1.1rem;
  --cl-fs-brand: 1.2rem;
  --cl-fs-h1: clamp(2rem, 5vw, 4rem);
  --cl-fs-h2: clamp(1.9rem, 3.2vw, 2.9rem);
  --cl-fs-h3: 1.55rem;

  --cl-radius-sm: 2px;
  --cl-radius-md: 4px;
  --cl-radius-lg: 8px;
  --cl-shadow: none;
}

.text-primary,
.btn-outline-primary,
.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-nav .nav-item .nav-link:focus,
.navbar .navbar-nav .nav-item .nav-link.active,
.nav-sticky .navbar-nav .nav-item .nav-link:hover,
.nav-sticky .navbar-nav .nav-item .nav-link.active,
.primary-link:hover,
.feature-icon,
.faq .icon,
.brand-mark {
  color: var(--cl-primary) !important;
}

.bg-primary,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-outline-primary:hover,
.form-check-input:checked,
#back-to-top:hover {
  background-color: var(--cl-primary) !important;
}

.btn-primary:hover,
.btn-outline-primary:hover {
  box-shadow: none !important;
}

.form-control:focus,
.btn-primary,
.btn-outline-primary {
  border-color: var(--cl-primary) !important;
}

.faq .icon {
  background-color: var(--cl-primary-soft) !important;
}

html {
  font-size: var(--cl-fs-html);
}

@media (min-width: 768px) {
  :root {
    --cl-fs-html: 16px;
  }
}

@media (min-width: 1024px) {
  :root {
    --cl-fs-html: 17px;
  }
}

@media (min-width: 1280px) {
  :root {
    --cl-fs-html: 18px;
  }
}

@media (min-width: 1440px) {
  :root {
    --cl-fs-html: 19px;
    --cl-fs-h1: clamp(2.6rem, 4.6vw, 4.6rem);
    --cl-fs-h2: clamp(2rem, 2.8vw, 3.1rem);
    --cl-fs-h3: 1.65rem;
  }
}

@media (min-width: 1680px) {
  :root {
    --cl-fs-html: 20px;
  }
}

@media (min-width: 1920px) {
  :root {
    --cl-fs-html: 21px;
    --cl-fs-h1: clamp(3rem, 4.2vw, 5.4rem);
    --cl-fs-h2: clamp(2.2rem, 2.5vw, 3.4rem);
    --cl-fs-h3: 1.8rem;
    --cl-fs-lead: 1.15rem;
  }
}

@media (min-width: 2560px) {
  :root {
    --cl-fs-html: 23px;
    --cl-fs-h1: clamp(3.2rem, 3.6vw, 5.8rem);
    --cl-fs-h2: clamp(2.4rem, 2.2vw, 3.6rem);
  }
}