/* ==========================================================
   CHILL TOOLS — DESIGN SYSTEM V1
   ACTION_10_00_BASE_DESIGN_SYSTEM_V1

   Brand:
   Dark Slate / Moss Green / Earth Orange
   Engineering first, calm second, visual delight last.
   ========================================================== */

:root{
  /* Brand */
  --ct-bg:#1A1E24;
  --ct-bg-deep:#14191E;
  --ct-surface:#252B31;
  --ct-surface-2:#2E3439;
  --ct-surface-glass:rgba(46,52,57,.56);
  --ct-line:rgba(224,232,227,.14);

  --ct-text:#F2EFE8;
  --ct-text-soft:#D5D9D5;
  --ct-muted:#AEB6B1;
  --ct-muted-2:#7F8984;

  --ct-moss:#5C7A52;
  --ct-moss-2:#76906C;
  --ct-orange:#D97A3B;
  --ct-orange-2:#F09658;

  --ct-danger:#D96B61;
  --ct-warning:#D7A64A;
  --ct-info:#7D9DAA;

  /* Type */
  --ct-font:"Segoe UI",Inter,Roboto,Arial,sans-serif;
  --ct-font-mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;

  --ct-fs-xs:.75rem;
  --ct-fs-sm:.875rem;
  --ct-fs-md:1rem;
  --ct-fs-lg:1.125rem;
  --ct-fs-xl:1.35rem;
  --ct-fs-2xl:clamp(1.9rem,3vw,2.8rem);
  --ct-fs-display:clamp(3.7rem,6.4vw,7.2rem);

  /* Spacing */
  --ct-s1:.25rem;
  --ct-s2:.5rem;
  --ct-s3:.75rem;
  --ct-s4:1rem;
  --ct-s5:1.5rem;
  --ct-s6:2rem;
  --ct-s7:3rem;
  --ct-s8:4rem;
  --ct-s9:6rem;

  /* Shape */
  --ct-r-sm:8px;
  --ct-r-md:12px;
  --ct-r-lg:18px;
  --ct-r-xl:26px;
  --ct-r-pill:999px;

  /* Shadow */
  --ct-shadow-sm:0 8px 22px rgba(0,0,0,.18);
  --ct-shadow-md:0 20px 50px rgba(0,0,0,.28);
  --ct-shadow-lg:0 32px 90px rgba(0,0,0,.38);

  /* Layout */
  --ct-shell:clamp(18px,4.4vw,86px);
  --ct-content:1680px;
  --ct-readable:760px;
  --ct-nav-h:72px;

  /* Motion */
  --ct-fast:160ms;
  --ct-normal:240ms;
}

/* Shared accessibility */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--ct-moss-2);
  outline-offset:3px;
}

::selection{
  background:rgba(217,122,59,.30);
  color:var(--ct-text);
}

/* Shared buttons */
.ct-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid transparent;
  border-radius:var(--ct-r-md);
  font:700 var(--ct-fs-sm)/1 var(--ct-font);
  text-decoration:none;
  cursor:pointer;
  transition:
    background var(--ct-fast) ease,
    border-color var(--ct-fast) ease,
    transform var(--ct-fast) ease;
}
.ct-btn:hover{transform:translateY(-1px)}
.ct-btn-primary{
  background:var(--ct-orange);
  color:#20150f;
}
.ct-btn-primary:hover{background:var(--ct-orange-2)}
.ct-btn-secondary{
  background:rgba(255,255,255,.03);
  border-color:var(--ct-line);
  color:var(--ct-text);
}
.ct-btn-secondary:hover{background:rgba(255,255,255,.06)}
.ct-btn-success{
  background:rgba(92,122,82,.20);
  border-color:rgba(118,144,108,.38);
  color:#D6E4D0;
}
.ct-btn-danger{
  background:rgba(217,107,97,.12);
  border-color:rgba(217,107,97,.35);
  color:#F0A39C;
}

/* Shared badges */
.ct-badge{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border:1px solid var(--ct-line);
  border-radius:var(--ct-r-pill);
  font-size:var(--ct-fs-xs);
  font-weight:800;
  letter-spacing:.03em;
}
.ct-badge-success{
  background:rgba(92,122,82,.14);
  border-color:rgba(118,144,108,.33);
  color:#BBD0B2;
}
.ct-badge-orange{
  background:rgba(217,122,59,.12);
  border-color:rgba(217,122,59,.30);
  color:#F1B78F;
}

/* Shared surfaces */
.ct-surface{
  border:1px solid var(--ct-line);
  border-radius:var(--ct-r-lg);
  background:var(--ct-surface-glass);
  backdrop-filter:blur(14px);
}
.ct-divider{border:0;border-top:1px solid var(--ct-line)}

/* Shared field system */
.ct-field{
  width:100%;
  min-height:44px;
  border:1px solid var(--ct-line);
  border-radius:var(--ct-r-md);
  background:#171D22;
  color:var(--ct-text);
  font:inherit;
  padding:10px 12px;
  transition:border-color var(--ct-fast),box-shadow var(--ct-fast);
}
.ct-field:focus{
  outline:none;
  border-color:var(--ct-moss);
  box-shadow:0 0 0 3px rgba(92,122,82,.16);
}

/* Shared status */
.ct-status{
  border:1px solid var(--ct-line);
  border-radius:var(--ct-r-md);
  padding:12px 14px;
  color:var(--ct-muted);
}
.ct-status-success{border-color:rgba(118,144,108,.42);color:#BBD0B2}
.ct-status-error{border-color:rgba(217,107,97,.42);color:#F0A39C}
.ct-status-warning{border-color:rgba(215,166,74,.42);color:#E7C987}

/* Layout utility */
.ct-shell{
  width:min(var(--ct-content),calc(100% - (2 * var(--ct-shell))));
  margin-inline:auto;
}
.ct-readable{max-width:var(--ct-readable)}
.ct-hidden{display:none!important}

/* Motion policy */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }
}