/*
 * CODEKENZ light appearance
 * Dark mode remains the original design. The light palette is applied only
 * when the visitor's operating system/browser requests a light appearance.
 */

:root {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f7f3ee;
    --bg-secondary: #efe8df;
    --panel: rgba(255, 252, 248, 0.92);
    --panel-strong: #fffaf5;
    --surface: rgba(62, 43, 32, 0.035);
    --surface-strong: rgba(62, 43, 32, 0.065);
    --line: rgba(49, 35, 27, 0.105);
    --line-strong: rgba(226, 79, 27, 0.30);
    --text: #171310;
    --muted: #70665e;
    --soft: #3e342e;
    --orange: #cf4515;
    --orange-strong: #d14816;
    --orange-soft: #9f3e1b;
    --shadow: 0 24px 70px rgba(83, 51, 33, 0.105);

    --app-card: rgba(255, 252, 248, 0.82);
    --app-card-strong: rgba(255, 250, 244, 0.96);
    --app-line: rgba(49, 35, 27, 0.105);
    --app-line-orange: rgba(226, 79, 27, 0.27);
    --app-text-soft: #4a4039;
    --app-text-faint: #80756d;
  }

  html {
    background: #f7f3ee;
  }

  body {
    color: var(--text);
    background:
      radial-gradient(circle at 84% 2%, rgba(233, 87, 32, 0.12), transparent 25%),
      radial-gradient(circle at 10% 20%, rgba(181, 145, 119, 0.11), transparent 22%),
      linear-gradient(180deg, #fcfaf7 0%, #f7f3ee 42%, #f2ece5 100%);
  }

  body::before {
    background-image:
      linear-gradient(rgba(55, 39, 30, 0.032) 1px, transparent 1px),
      linear-gradient(90deg, rgba(55, 39, 30, 0.032) 1px, transparent 1px);
    opacity: 0.48;
  }

  body::after {
    background: linear-gradient(180deg, rgba(247, 243, 238, 0) 0%, rgba(231, 220, 210, 0.14) 100%);
  }

  ::selection {
    background: rgba(233, 87, 32, 0.20);
    color: #171310;
  }

  /* Core buttons and subtle controls */
  .btn-secondary {
    color: var(--text);
    border-color: rgba(49, 35, 27, 0.14);
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  .btn-secondary:hover {
    background: rgba(233, 87, 32, 0.075);
    border-color: rgba(233, 87, 32, 0.25);
  }

  .availability-badge,
  .hero-status,
  .micro-chip,
  .project-category,
  .service-number,
  .step-index {
    border-color: rgba(226, 79, 27, 0.22);
    background: rgba(233, 87, 32, 0.075);
  }

  /* Home hero */
  .hero-grid-lines {
    background:
      linear-gradient(transparent 0 97%, rgba(61, 43, 33, 0.055) 97% 100%),
      linear-gradient(90deg, transparent 0 97%, rgba(61, 43, 33, 0.055) 97% 100%);
    opacity: 0.22;
  }

  .hero-orb-one {
    background: radial-gradient(circle, rgba(233, 87, 32, 0.16), transparent 68%);
  }

  .hero-orb-two {
    background: radial-gradient(circle, rgba(166, 130, 105, 0.14), transparent 70%);
  }

  .hero-english {
    border-color: rgba(49, 35, 27, 0.12);
    background: rgba(255, 255, 255, 0.54);
  }

  .hero-points div,
  .signal-card,
  .identity-metric,
  .promise-card,
  .service-card,
  .project-card,
  .process-step,
  .contact-shell,
  .identity-panel,
  .promise-card-main {
    border-color: var(--line);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 250, 245, 0.68));
    box-shadow: var(--shadow);
  }

  .hero-points div::before,
  .signal-card::before,
  .identity-metric::before,
  .promise-card::before,
  .service-card::before,
  .project-card::before,
  .process-step::before,
  .contact-shell::before,
  .identity-panel::before,
  .promise-card-main::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.70), transparent 44%);
  }

  .brand-stage {
    border-color: rgba(226, 79, 27, 0.23);
    background:
      radial-gradient(circle at 18% 9%, rgba(233, 87, 32, 0.10), transparent 30%),
      linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(249, 243, 236, 0.96));
    box-shadow: var(--shadow);
  }

  .brand-core {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(49, 35, 27, 0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  }

  .micro-chip-dark {
    border-color: rgba(49, 35, 27, 0.12);
    background: rgba(255, 255, 255, 0.56);
  }

  .signal-card-highlight {
    border-color: rgba(226, 79, 27, 0.22);
    background: linear-gradient(180deg, rgba(233, 87, 32, 0.085), rgba(255, 255, 255, 0.64));
  }

  .floating-contact-card,
  .floating-skill-card {
    border-color: rgba(49, 35, 27, 0.11);
    background: rgba(255, 252, 248, 0.87);
    box-shadow: 0 20px 56px rgba(83, 51, 33, 0.13);
  }

  .proof-strip {
    border-top-color: rgba(49, 35, 27, 0.08);
    border-bottom-color: rgba(49, 35, 27, 0.08);
    background: rgba(255, 255, 255, 0.34);
  }

  .section-dark {
    background: linear-gradient(180deg, rgba(76, 52, 38, 0.028), rgba(255, 255, 255, 0.16));
  }

  .section-accent {
    background:
      radial-gradient(circle at 10% 10%, rgba(233, 87, 32, 0.10), transparent 25%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.26), transparent 46%);
  }

  .section-process {
    background:
      radial-gradient(circle at 86% 8%, rgba(167, 129, 103, 0.10), transparent 22%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 48%);
  }

  .contact-shell {
    border-color: rgba(226, 79, 27, 0.24);
    background:
      radial-gradient(circle at 12% 10%, rgba(233, 87, 32, 0.10), transparent 33%),
      linear-gradient(180deg, rgba(255, 252, 248, 0.96), rgba(247, 239, 232, 0.94));
  }

  .contact-direct {
    border-color: rgba(49, 35, 27, 0.11);
    background: rgba(255, 255, 255, 0.55);
  }

  .site-footer {
    border-top-color: rgba(49, 35, 27, 0.08);
  }

  /* Legacy/project surfaces retained for backward compatible routes */
  .school-showcase-section {
    background:
      radial-gradient(circle at 12% 4%, rgba(233, 87, 32, 0.10), transparent 30%),
      radial-gradient(circle at 88% 20%, rgba(117, 87, 68, 0.07), transparent 24%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);
  }

  .school-case-copy,
  .school-project-card,
  .school-detail-preview,
  .school-detail-shot {
    border-color: rgba(49, 35, 27, 0.10);
    background: rgba(255, 252, 248, 0.76);
    box-shadow: var(--shadow);
  }

  /* Standalone support and privacy documents */
  body.ck-app-document {
    background:
      radial-gradient(circle at 84% 4%, rgba(233, 87, 32, 0.11), transparent 25%),
      radial-gradient(circle at 8% 24%, rgba(162, 126, 101, 0.10), transparent 20%),
      linear-gradient(180deg, #fcfaf7 0%, #f7f3ee 48%, #f1ebe4 100%);
  }

  .ckp-topbar {
    border-color: var(--app-line);
    background: rgba(255, 252, 248, 0.80);
    box-shadow: 0 16px 45px rgba(83, 51, 33, 0.09);
  }

  .ckp-brand img {
    background: linear-gradient(180deg, rgba(233, 87, 32, 0.10), rgba(255,255,255,.54));
  }

  .ckp-navlinks a,
  .ckp-pill-link {
    border-color: var(--app-line);
    background: rgba(255, 255, 255, 0.54);
    color: var(--app-text-soft);
  }

  .ckp-navlinks a:hover,
  .ckp-pill-link:hover,
  .ckp-navlinks a:focus-visible,
  .ckp-pill-link:focus-visible {
    color: var(--text);
    border-color: var(--app-line-orange);
    background: rgba(233, 87, 32, 0.07);
  }

  .ckp-hero {
    border-color: var(--app-line);
    background:
      linear-gradient(135deg, rgba(233, 87, 32, 0.075), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,250,245,.64));
    box-shadow: 0 30px 82px rgba(83, 51, 33, 0.10);
  }

  .ckp-app-stamp {
    border-color: rgba(226,79,27,.20);
    background:
      radial-gradient(circle at 72% 20%, rgba(233,87,32,.13), transparent 34%),
      rgba(255,255,255,.50);
  }

  .ckp-card,
  .ckp-language-block,
  .ckp-policy-section {
    border-color: var(--app-line);
    background: rgba(255, 252, 248, 0.74);
    box-shadow: 0 16px 48px rgba(83, 51, 33, 0.055);
  }

  .ckp-contact-panel,
  .ckp-privacy-callout {
    background:
      linear-gradient(125deg, rgba(233,87,32,.085), rgba(255,255,255,.48) 58%),
      rgba(255,252,248,.72);
  }

  .ckp-btn.secondary {
    border-color: var(--app-line);
    background: rgba(255, 255, 255, 0.60);
  }

  .ckp-check-mark,
  .ckp-fact-no,
  .ckp-section-index,
  .ckp-faq summary::after {
    color: var(--orange-soft);
  }

  .ckp-faq details {
    border-color: var(--app-line);
    background: rgba(255, 252, 248, 0.70);
  }

  .ckp-note {
    background: rgba(233, 87, 32, 0.07);
    color: var(--app-text-soft);
  }

  .ckp-note strong {
    color: var(--text);
  }

  .ckp-toc {
    border-color: var(--app-line);
    background: rgba(255, 252, 248, 0.84);
    box-shadow: 0 14px 40px rgba(83, 51, 33, 0.055);
  }

  .ckp-toc a:hover,
  .ckp-toc a:focus-visible {
    color: var(--text);
    background: rgba(233,87,32,.07);
  }

  .ckp-footer {
    border-top-color: var(--app-line);
  }
}