/* ================================================================
   claude-light.css  —  v1.0
   A drop-in theme file. Link it in any HTML page to apply the
   Claude Light aesthetic instantly.

   HOW TO USE
   ----------
   <link rel="stylesheet" href="claude-light.css" />

   Then use the CSS custom properties (--cl-*) in your own
   page-specific styles to stay on-palette, or just rely on the
   base element and component styles defined here.
   ================================================================ */


/* ── 1. Design Tokens ─────────────────────────────────────────
   All values are exposed as --cl-* custom properties so your
   page-level CSS can reference them without hardcoding colours.
   ──────────────────────────────────────────────────────────── */
:root {

  /* Backgrounds */
  --cl-bg:           #f9f9f7;   /* warm off-white page background   */
  --cl-surface:      #ffffff;   /* card / panel surface             */
  --cl-surface-alt:  #f4f4f1;   /* recessed / zebra surface         */
  --cl-surface-grad: linear-gradient(180deg, #ffffff 0%, #fafaf8 100%);

  /* Borders */
  --cl-border:       #e4e3de;   /* default hairline                 */
  --cl-border-strong:#c9c8c2;   /* emphasis border                  */

  /* Text */
  --cl-text:         #1a1917;   /* primary ink                      */
  --cl-text-2:       #6a6960;   /* secondary / muted                */
  --cl-text-3:       #9e9d96;   /* placeholder / hint               */

  /* Accent — warm amber (Claude's signature colour) */
  --cl-accent:       #d97706;
  --cl-accent-hover: #b45309;
  --cl-accent-light: #fef3c7;   /* tinted accent background         */
  --cl-accent-mid:   #fde68a;   /* accent border                    */

  /* Semantic */
  --cl-ok:           #059669;   /* success / positive               */
  --cl-ok-bg:        #f0fdf4;
  --cl-warn:         #d97706;
  --cl-warn-bg:      #fffbeb;
  --cl-err:          #dc2626;   /* error / danger                   */
  --cl-err-bg:       #fef2f2;
  --cl-err-border:   #fecaca;

  /* Shadows */
  --cl-shadow-xs:    0 1px 2px  rgba(0,0,0,.05);
  --cl-shadow-sm:    0 1px 4px  rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --cl-shadow-md:    0 4px 14px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --cl-shadow-lg:    0 12px 36px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.05);

  /* Border radii */
  --cl-r-xs:  4px;
  --cl-r-sm:  6px;
  --cl-r-md: 10px;
  --cl-r-lg: 14px;
  --cl-r-xl: 18px;
  --cl-r-full: 9999px;

  /* Typography */
  --cl-font:  ui-sans-serif, system-ui, -apple-system, "Segoe UI",
              Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --cl-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco,
              Consolas, "Liberation Mono", "Courier New", monospace;
}


/* ── 2. Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--cl-font);
  background-color: var(--cl-bg);
  color: var(--cl-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ── 3. Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cl-font);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--cl-text);
}

h1 { font-size: clamp(1.6rem, 4vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.65rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
h5 { font-size: 0.9rem;  font-weight: 650; }
h6 { font-size: 0.8rem;  font-weight: 650; }

p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cl-text-2);
}

p strong, p b { color: var(--cl-text); }

a {
  color: var(--cl-accent-hover);
  text-decoration: underline;
  text-decoration-color: var(--cl-accent-mid);
  transition: color .15s;
}
a:hover { color: var(--cl-accent); }

ul, ol {
  padding-left: 1.25rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cl-text);
}
li { margin: 0.3rem 0; }

code, kbd, samp {
  font-family: var(--cl-mono);
  font-size: 0.85em;
  background: var(--cl-surface-alt);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-xs);
  padding: 0.15em 0.45em;
  color: var(--cl-text);
}

pre {
  font-family: var(--cl-mono);
  font-size: 0.85rem;
  background: var(--cl-surface-alt);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  line-height: 1.6;
}

pre code { background: none; border: none; padding: 0; font-size: inherit; }

blockquote {
  border-left: 3px solid var(--cl-accent-mid);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  color: var(--cl-text-2);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--cl-border);
  margin: 1.5rem 0;
}

/* Uppercase label style — use on <h3 class="cl-label"> etc. */
.cl-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-text-2);
  margin-bottom: 0.6rem;
}

/* Muted helper / hint text */
.cl-hint {
  font-size: 0.8rem;
  color: var(--cl-text-3);
  line-height: 1.4;
}


/* ── 4. Layout helpers ────────────────────────────────────────── */

/* Full-page centred wrapper */
.cl-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

/* Centred content container */
.cl-container {
  width: min(1100px, 100%);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Generic section spacing */
.cl-section { padding: 3rem 0; }


/* ── 5. Cards ─────────────────────────────────────────────────── */

/* Base card */
.cl-card {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-lg);
  box-shadow: var(--cl-shadow-md);
  padding: 1.5rem;
}

/* Smaller, flatter card */
.cl-card-sm {
  background: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-md);
  box-shadow: var(--cl-shadow-xs);
  padding: 1rem 1.1rem;
}

/* Subtle inset / recessed panel */
.cl-panel {
  background: var(--cl-surface-alt);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-md);
  padding: 1rem 1.1rem;
}

/* Accent-tinted highlight card */
.cl-card-accent {
  background: var(--cl-accent-light);
  border: 1px solid var(--cl-accent-mid);
  border-radius: var(--cl-r-md);
  padding: 1rem 1.1rem;
}

/* Success-tinted card */
.cl-card-ok {
  background: var(--cl-ok-bg);
  border: 1px solid #bbf7d0;
  border-radius: var(--cl-r-md);
  padding: 1rem 1.1rem;
}

/* Card section divider (card title bar) */
.cl-card-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cl-text-2);
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--cl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}


/* ── 6. Buttons ───────────────────────────────────────────────── */
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--cl-r-sm);
  font-family: var(--cl-font);
  font-size: 0.875rem;
  font-weight: 550;
  line-height: 1.4;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
  white-space: nowrap;
}

/* Primary — filled amber */
.cl-btn-primary {
  background: var(--cl-accent);
  color: #fff;
  border-color: var(--cl-accent);
}
.cl-btn-primary:hover {
  background: var(--cl-accent-hover);
  border-color: var(--cl-accent-hover);
  color: #fff;
  text-decoration: none;
}

/* Secondary — outlined */
.cl-btn-secondary {
  background: var(--cl-surface);
  color: var(--cl-text);
  border-color: var(--cl-border-strong);
}
.cl-btn-secondary:hover {
  background: var(--cl-surface-alt);
  border-color: var(--cl-text-3);
  text-decoration: none;
}

/* Ghost — no background */
.cl-btn-ghost {
  background: transparent;
  color: var(--cl-accent-hover);
  border-color: transparent;
}
.cl-btn-ghost:hover {
  background: var(--cl-accent-light);
  text-decoration: none;
}

.cl-btn:focus-visible {
  outline: 2px solid var(--cl-accent);
  outline-offset: 2px;
}


/* ── 7. Badges / Pills / Tags ─────────────────────────────────── */

/* Neutral pill */
.cl-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cl-text);
  background: var(--cl-surface-alt);
  border: 1px solid var(--cl-border);
  border-radius: var(--cl-r-full);
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
  line-height: 1.4;
}

/* Accent pill */
.cl-pill-accent {
  color: var(--cl-accent-hover);
  background: var(--cl-accent-light);
  border-color: var(--cl-accent-mid);
}

/* Success pill */
.cl-pill-ok {
  color: var(--cl-ok);
  background: var(--cl-ok-bg);
  border-color: #bbf7d0;
}

/* Error pill */
.cl-pill-err {
  color: var(--cl-err);
  background: var(--cl-err-bg);
  border-color: var(--cl-err-border);
}

/* Dot indicator (coloured bullet) */
.cl-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-accent);
  box-shadow: 0 0 0 3px var(--cl-accent-light);
  flex-shrink: 0;
}

.cl-dot-ok  { background: var(--cl-ok);  box-shadow: 0 0 0 3px var(--cl-ok-bg); }
.cl-dot-err { background: var(--cl-err); box-shadow: 0 0 0 3px var(--cl-err-bg); }


/* ── 8. Metric / Stat display ─────────────────────────────────── */
.cl-metric { display: flex; flex-direction: column; gap: 0.35rem; }

.cl-metric-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--cl-text);
  font-variant-numeric: tabular-nums;
}

.cl-metric-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cl-text-2);
  line-height: 1.35;
}

.cl-metric-value.cl-ok  { color: var(--cl-ok); }
.cl-metric-value.cl-err { color: var(--cl-err); }
.cl-metric-value.cl-accent { color: var(--cl-accent-hover); }


/* ── 9. Tables ────────────────────────────────────────────────── */
.cl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.cl-table thead th {
  text-align: left;
  padding: 0.55rem 0.85rem;
  background: var(--cl-surface-alt);
  color: var(--cl-text-2);
  font-weight: 650;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1.5px solid var(--cl-border);
  white-space: nowrap;
}

.cl-table tbody td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-text);
  font-variant-numeric: tabular-nums;
}

.cl-table tbody tr:last-child td { border-bottom: none; }
.cl-table tbody tr:hover td { background: var(--cl-surface-alt); }


/* ── 10. Form elements ────────────────────────────────────────── */
.cl-label-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--cl-text);
  margin-bottom: 0.35rem;
}

.cl-input,
.cl-select,
.cl-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--cl-font);
  font-size: 0.9rem;
  color: var(--cl-text);
  background: var(--cl-surface);
  border: 1.5px solid var(--cl-border-strong);
  border-radius: var(--cl-r-sm);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  line-height: 1.5;
}

.cl-input:focus,
.cl-select:focus,
.cl-textarea:focus {
  border-color: var(--cl-accent);
  box-shadow: 0 0 0 3px rgba(217,119,6,.13);
}

.cl-input.cl-err,
.cl-select.cl-err,
.cl-textarea.cl-err {
  border-color: var(--cl-err);
  box-shadow: 0 0 0 3px rgba(220,38,38,.10);
}

.cl-textarea { resize: vertical; min-height: 100px; }

/* Range slider */
input[type="range"].cl-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: var(--cl-border-strong);
  outline: none;
  cursor: pointer;
}

input[type="range"].cl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cl-accent);
  border: 2.5px solid var(--cl-surface);
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .1s;
}

input[type="range"].cl-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"].cl-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cl-accent);
  border: 2.5px solid var(--cl-surface);
}


/* ── 11. Alerts / Banners ─────────────────────────────────────── */
.cl-alert {
  border-radius: var(--cl-r-sm);
  padding: 0.7rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid var(--cl-border);
  background: var(--cl-surface-alt);
  color: var(--cl-text);
}

.cl-alert-ok  { background: var(--cl-ok-bg);   border-color: #bbf7d0; color: var(--cl-ok); }
.cl-alert-err { background: var(--cl-err-bg);  border-color: var(--cl-err-border); color: var(--cl-err); }
.cl-alert-warn{ background: var(--cl-warn-bg); border-color: var(--cl-accent-mid); color: var(--cl-accent-hover); }


/* ── 12. Key-value pairs ──────────────────────────────────────── */
.cl-kv { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.875rem; }
.cl-kv-key   { color: var(--cl-text-2); min-width: 5rem; flex-shrink: 0; }
.cl-kv-value { color: var(--cl-text); font-weight: 600; }


/* ── 13. Dividers ─────────────────────────────────────────────── */
.cl-divider {
  border: none;
  border-top: 1px solid var(--cl-border);
  margin: 1.25rem 0;
}


/* ── 14. Print styles ─────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }

  .cl-card,
  .cl-card-sm,
  .cl-panel {
    box-shadow: none !important;
    border-color: var(--cl-border) !important;
  }

  .cl-no-print { display: none !important; }

  a { color: inherit; text-decoration: none; }

  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
}


/* ── 15. Utility classes ──────────────────────────────────────── */

/* Text colours */
.cl-text-muted  { color: var(--cl-text-2) !important; }
.cl-text-hint   { color: var(--cl-text-3) !important; }
.cl-text-accent { color: var(--cl-accent-hover) !important; }
.cl-text-ok     { color: var(--cl-ok) !important; }
.cl-text-err    { color: var(--cl-err) !important; }

/* Font weights */
.cl-fw-normal { font-weight: 400; }
.cl-fw-medium { font-weight: 550; }
.cl-fw-bold   { font-weight: 700; }
.cl-fw-black  { font-weight: 900; }

/* Spacing */
.cl-mt-sm { margin-top: 0.5rem; }
.cl-mt-md { margin-top: 1rem; }
.cl-mt-lg { margin-top: 1.5rem; }
.cl-mb-sm { margin-bottom: 0.5rem; }
.cl-mb-md { margin-bottom: 1rem; }
.cl-mb-lg { margin-bottom: 1.5rem; }

/* Flex helpers */
.cl-flex         { display: flex; }
.cl-flex-center  { display: flex; align-items: center; }
.cl-flex-between { display: flex; align-items: center; justify-content: space-between; }
.cl-gap-sm       { gap: 0.5rem; }
.cl-gap-md       { gap: 1rem; }
.cl-gap-lg       { gap: 1.5rem; }

/* Pill group wrapper */
.cl-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }