/*!****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./styles/kitsune.css ***!
  \****************************************************************************************************************************************************************************************************************************************************************/
/*
 * kitsune.css — Anthropy Works Kitsune design system
 * All --k-* CSS custom properties from style-tokens.json.
 * Prime rule: zero raw hex/rgba in component rules below the token blocks.
 * Raw hex/rgba is ONLY permitted inside :root / [data-theme] definitions.
 */

/* ============================================================
   STATIC TOKENS — same across all themes
   ============================================================ */
:root {
  /* Blur / saturate */
  --k-blur: 30px;
  --k-blur-strong: 50px;
  --k-saturate: 180%;

  /* Radii */
  --k-r-pill: 999px;
  --k-r-card: 28px;
  --k-r-panel: 22px;
  --k-r-control: 16px;
  --k-r-control-sm: 12px;
  --k-r-control-xs: 8px;

  /* Spacing — 4pt rhythm */
  --k-s-1: 4px;
  --k-s-2: 8px;
  --k-s-3: 12px;
  --k-s-4: 16px;
  --k-s-5: 24px;
  --k-s-6: 32px;
  --k-s-7: 48px;
  --k-s-8: 64px;

  /* Touch targets */
  --k-target: 44px;
  --k-target-mini: 28px;

  /* Typography */
  --k-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    Inter, system-ui, "Segoe UI", sans-serif;
  --k-font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    Inter, system-ui, sans-serif;
  --k-font-feat: "ss01", "ss02", "cv01", "cv11", "tnum";

  /* Motion easings */
  --k-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --k-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --k-ease-slide: cubic-bezier(0.22, 1, 0.36, 1);
  --k-ease-pane: cubic-bezier(0.83, 0, 0.17, 1);

  /* Motion durations */
  --k-dur-quick: 180ms;
  --k-dur-soft: 320ms;
  --k-dur-deep: 520ms;
  --k-dur-pane: 760ms;
  --k-dur-fade: 600ms;
  --k-dur-slow: 800ms;

  /* Semantic state colors — invariant across themes */
  --k-affirm: #34c759;
  --k-affirm-glass: rgba(52, 199, 89, 0.18);
  --k-affirm-ring: rgba(52, 199, 89, 0.35);

  --k-warn: #ff9f0a;
  --k-warn-glass: rgba(255, 159, 10, 0.20);
  --k-warn-ring: rgba(255, 159, 10, 0.35);

  --k-critical: #ff453a;
  --k-critical-glass: rgba(255, 69, 58, 0.22);
  --k-critical-ring: rgba(255, 69, 58, 0.40);

  --k-info: #0a84ff;
  --k-info-glass: rgba(10, 132, 255, 0.20);
  --k-info-ring: rgba(10, 132, 255, 0.40);
}

/* ============================================================
   WARM THEME (light — default)
   Deep brown atmosphere · white ink · color-scheme: dark
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: dark;

  /* Atmosphere */
  --k-atmosphere: #6e6864;
  --k-atmosphere-deep: #4f4a47;
  --k-atmosphere-far: #3a3633;
  --k-atmosphere-near: #87807a;

  /* Glass opacity steps (white-over-atmosphere) */
  --k-glass: rgba(255, 255, 255, 0.16);
  --k-glass-quiet: rgba(255, 255, 255, 0.12);
  --k-glass-raised: rgba(255, 255, 255, 0.26);
  --k-glass-active: rgba(255, 255, 255, 0.38);
  --k-glass-strong: rgba(255, 255, 255, 0.50);

  /* Paused / neutral */
  --k-paused: rgba(255, 255, 255, 0.30);

  /* Ink — white vibrancy */
  --k-ink: rgba(255, 255, 255, 0.97);
  --k-ink-secondary: rgba(255, 255, 255, 0.76);
  --k-ink-tertiary: rgba(255, 255, 255, 0.60);
  --k-ink-quiet: rgba(255, 255, 255, 0.32);
  --k-ink-disabled: rgba(255, 255, 255, 0.22);

  /* Borders / dividers */
  --k-border: rgba(255, 255, 255, 0.20);
  --k-border-soft: rgba(255, 255, 255, 0.12);
  --k-border-strong: rgba(255, 255, 255, 0.34);
  --k-divider: rgba(255, 255, 255, 0.18);
  --k-divider-soft: rgba(255, 255, 255, 0.10);

  /* Shadows */
  --k-shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 8px 22px rgba(0, 0, 0, 0.22);
  --k-shadow-raised:
    0 1px 2px rgba(0, 0, 0, 0.20),
    0 14px 36px rgba(0, 0, 0, 0.28),
    0 38px 72px rgba(0, 0, 0, 0.20);
  --k-shadow-floating:
    0 2px 4px rgba(0, 0, 0, 0.22),
    0 20px 56px rgba(0, 0, 0, 0.34),
    0 56px 120px rgba(0, 0, 0, 0.22);

  /* Rims — shared with dark */
  --k-rim:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --k-rim-strong:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* ============================================================
   DARK THEME
   Near-black atmosphere · white ink · color-scheme: dark
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  /* Atmosphere */
  --k-atmosphere: #0c0a09;
  --k-atmosphere-deep: #050403;
  --k-atmosphere-far: #000000;
  --k-atmosphere-near: #1c1916;

  /* Glass */
  --k-glass: rgba(255, 255, 255, 0.08);
  --k-glass-quiet: rgba(255, 255, 255, 0.05);
  --k-glass-raised: rgba(255, 255, 255, 0.12);
  --k-glass-active: rgba(255, 255, 255, 0.20);
  --k-glass-strong: rgba(255, 255, 255, 0.30);

  /* Paused */
  --k-paused: rgba(255, 255, 255, 0.30);

  /* Ink — same white vibrancy */
  --k-ink: rgba(255, 255, 255, 0.97);
  --k-ink-secondary: rgba(255, 255, 255, 0.76);
  --k-ink-tertiary: rgba(255, 255, 255, 0.60);
  --k-ink-quiet: rgba(255, 255, 255, 0.32);
  --k-ink-disabled: rgba(255, 255, 255, 0.22);

  /* Borders */
  --k-border: rgba(255, 255, 255, 0.20);
  --k-border-soft: rgba(255, 255, 255, 0.12);
  --k-border-strong: rgba(255, 255, 255, 0.34);
  --k-divider: rgba(255, 255, 255, 0.18);
  --k-divider-soft: rgba(255, 255, 255, 0.10);

  /* Shadows — deeper */
  --k-shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.40),
    0 8px 24px rgba(0, 0, 0, 0.50);
  --k-shadow-raised:
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 38px 72px rgba(0, 0, 0, 0.40);
  --k-shadow-floating:
    0 2px 4px rgba(0, 0, 0, 0.50),
    0 20px 56px rgba(0, 0, 0, 0.60),
    0 56px 120px rgba(0, 0, 0, 0.42);

  /* Rims — same as warm/dark */
  --k-rim:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --k-rim-strong:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

/* ============================================================
   DAY THEME
   Bright gray atmosphere · near-black ink · color-scheme: light
   ============================================================ */
[data-theme="day"] {
  color-scheme: light;

  /* Atmosphere */
  --k-atmosphere: #ececf0;
  --k-atmosphere-deep: #e1e1e8;
  --k-atmosphere-far: #d7d7df;
  --k-atmosphere-near: #f7f7fa;

  /* Glass — brighter/more opaque */
  --k-glass: rgba(255, 255, 255, 0.58);
  --k-glass-quiet: rgba(255, 255, 255, 0.42);
  --k-glass-raised: rgba(255, 255, 255, 0.74);
  --k-glass-active: rgba(255, 255, 255, 0.86);
  --k-glass-strong: rgba(255, 255, 255, 0.95);

  /* Paused — near-black equivalent */
  --k-paused: rgba(29, 29, 31, 0.25);

  /* Ink — near-black vibrancy */
  --k-ink: rgba(29, 29, 31, 0.96);
  --k-ink-secondary: rgba(29, 29, 31, 0.62);
  --k-ink-tertiary: rgba(29, 29, 31, 0.45);
  --k-ink-quiet: rgba(29, 29, 31, 0.30);
  --k-ink-disabled: rgba(29, 29, 31, 0.20);

  /* Borders — dark-on-light */
  --k-border: rgba(0, 0, 0, 0.12);
  --k-border-soft: rgba(0, 0, 0, 0.07);
  --k-border-strong: rgba(0, 0, 0, 0.20);
  --k-divider: rgba(0, 0, 0, 0.10);
  --k-divider-soft: rgba(0, 0, 0, 0.06);

  /* Shadows — soft/gray */
  --k-shadow-soft:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 22px rgba(0, 0, 0, 0.10);
  --k-shadow-raised:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.12),
    0 38px 72px rgba(0, 0, 0, 0.08);
  --k-shadow-floating:
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 20px 56px rgba(0, 0, 0, 0.14),
    0 56px 120px rgba(0, 0, 0, 0.10);

  /* Rims — dark edge + white top-highlight */
  --k-rim:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --k-rim-strong:
    inset 0 0 0 1px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* ============================================================
   COMPONENT CLASSES
   Zero raw hex/rgba below this line — all values via var(--k-*)
   ============================================================ */

/* ── Glass surfaces ──────────────────────────────────────── */

.k-glass {
  background: var(--k-glass);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  box-shadow: var(--k-rim), var(--k-shadow-soft);
  border: 1px solid var(--k-border-soft);
}

.k-glass-quiet {
  background: var(--k-glass-quiet);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  box-shadow: var(--k-rim);
  border: 1px solid var(--k-border-soft);
}

.k-glass-raised {
  background: var(--k-glass-raised);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  box-shadow: var(--k-rim), var(--k-shadow-raised);
  border: 1px solid var(--k-border);
}

.k-glass-floating {
  background: var(--k-glass-raised);
  backdrop-filter: blur(var(--k-blur-strong)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur-strong)) saturate(var(--k-saturate));
  box-shadow: var(--k-rim-strong), var(--k-shadow-floating);
  border: 1px solid var(--k-border);
}

/* ── Buttons ─────────────────────────────────────────────── */

.k-btn-primary,
.k-btn-ghost,
.k-btn-danger,
.k-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--k-s-2);
  min-height: var(--k-target);
  padding: 0 var(--k-s-5);
  border-radius: var(--k-r-pill);
  font-family: var(--k-font);
  font-size: 14px;
  font-weight: 600;
  font-feature-settings: var(--k-font-feat);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  transition:
    transform var(--k-dur-quick) var(--k-ease),
    opacity var(--k-dur-quick) var(--k-ease);
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  white-space: nowrap;
}

.k-btn-primary:active,
.k-btn-ghost:active,
.k-btn-danger:active {
  transform: scale(0.98);
}

.k-btn-primary:disabled,
.k-btn-ghost:disabled,
.k-btn-danger:disabled,
.k-btn-icon:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.k-btn-primary {
  background: var(--k-glass-strong);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  color: var(--k-ink);
  box-shadow: var(--k-rim-strong), var(--k-shadow-soft);
}

.k-btn-primary:hover:not(:disabled) {
  background: var(--k-glass-active);
}

.k-btn-ghost {
  background: var(--k-glass-quiet);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  color: var(--k-ink);
  box-shadow: var(--k-rim);
  border: 1px solid var(--k-border);
}

.k-btn-ghost:hover:not(:disabled) {
  background: var(--k-glass-raised);
}

.k-btn-danger {
  background: var(--k-critical-glass);
  color: var(--k-critical);
  box-shadow: var(--k-rim);
  border: 1px solid var(--k-critical-ring);
}

.k-btn-danger:hover:not(:disabled) {
  background: var(--k-critical-glass);
  opacity: 0.9;
}

.k-btn-icon {
  width: var(--k-target);
  padding: 0;
  background: var(--k-glass-quiet);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  color: var(--k-ink-secondary);
  box-shadow: var(--k-rim);
  border: 1px solid var(--k-border-soft);
  border-radius: var(--k-r-pill);
}

.k-btn-icon:hover:not(:disabled) {
  background: var(--k-glass-raised);
  color: var(--k-ink);
}

.k-btn-icon.is-mini {
  width: var(--k-target-mini);
  min-height: var(--k-target-mini);
}

/* ── Form controls ───────────────────────────────────────── */

.k-input,
.k-select,
.k-textarea {
  display: block;
  width: 100%;
  min-height: var(--k-target);
  padding: 0 var(--k-s-4);
  background: var(--k-glass-quiet);
  backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur)) saturate(var(--k-saturate));
  border: 1px solid var(--k-border-soft);
  border-radius: var(--k-r-control);
  color: var(--k-ink);
  font-family: var(--k-font);
  font-size: 14px;
  font-weight: 500;
  font-feature-settings: var(--k-font-feat);
  letter-spacing: -0.005em;
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition:
    box-shadow var(--k-dur-quick) var(--k-ease),
    border-color var(--k-dur-quick) var(--k-ease);
  box-shadow: var(--k-rim);
}

.k-input::placeholder,
.k-textarea::placeholder {
  color: var(--k-ink-quiet);
}

.k-input:focus,
.k-select:focus,
.k-textarea:focus {
  border-color: var(--k-info-ring);
  box-shadow: var(--k-rim), 0 0 0 2px var(--k-info-ring);
}

.k-textarea {
  min-height: 96px;
  padding: var(--k-s-3) var(--k-s-4);
  resize: vertical;
}

.k-select {
  padding-right: var(--k-s-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--k-s-4) center;
  cursor: pointer;
}

/* Select option styling (limited theming) */
.k-select option {
  background: var(--k-atmosphere);
  color: var(--k-ink);
}

/* ── Status dot ──────────────────────────────────────────── */

.k-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--k-r-pill);
  background: var(--k-ink-quiet);
  box-shadow: 0 0 0 3px var(--k-paused);
  flex-shrink: 0;
}

.k-status-dot.is-reachable {
  background: var(--k-affirm);
  box-shadow: 0 0 0 3px var(--k-affirm-ring);
}

.k-status-dot.is-unreachable {
  background: var(--k-critical);
  box-shadow: 0 0 0 3px var(--k-critical-ring);
}

.k-status-dot.is-checking {
  background: var(--k-warn);
  box-shadow: 0 0 0 3px var(--k-warn-ring);
  animation: k-pulse-warn var(--k-dur-slow) ease-in-out infinite;
}

.k-status-dot.is-paused {
  background: var(--k-ink-quiet);
  box-shadow: 0 0 0 3px var(--k-paused);
}

/* ── Pill badges ─────────────────────────────────────────── */

.k-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-1);
  padding: 2px var(--k-s-2);
  border-radius: var(--k-r-pill);
  font-family: var(--k-font);
  font-size: 11.5px;
  font-weight: 600;
  font-feature-settings: var(--k-font-feat);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--k-glass-quiet);
  color: var(--k-ink-secondary);
  border: 1px solid var(--k-border-soft);
}

.k-pill-affirm {
  background: var(--k-affirm-glass);
  color: var(--k-affirm);
  border-color: var(--k-affirm-ring);
}

.k-pill-warn {
  background: var(--k-warn-glass);
  color: var(--k-warn);
  border-color: var(--k-warn-ring);
}

.k-pill-critical {
  background: var(--k-critical-glass);
  color: var(--k-critical);
  border-color: var(--k-critical-ring);
}

.k-pill-info {
  background: var(--k-info-glass);
  color: var(--k-info);
  border-color: var(--k-info-ring);
}

/* ── Typography helpers ──────────────────────────────────── */

.k-eyebrow {
  font-family: var(--k-font);
  font-size: 11px;
  font-weight: 600;
  font-feature-settings: var(--k-font-feat);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--k-ink-tertiary);
}

.k-meta {
  font-family: var(--k-font);
  font-size: 12.5px;
  font-weight: 500;
  font-feature-settings: var(--k-font-feat);
  color: var(--k-ink-secondary);
}

/* ── Popover ─────────────────────────────────────────────── */

.k-popover {
  background: var(--k-glass-floating);
  backdrop-filter: blur(var(--k-blur-strong)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur-strong)) saturate(var(--k-saturate));
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-card);
  box-shadow: var(--k-rim-strong), var(--k-shadow-floating);
  padding: var(--k-s-2);
  min-width: 180px;
}

.k-popover-action {
  display: flex;
  align-items: center;
  gap: var(--k-s-2);
  width: 100%;
  min-height: var(--k-target);
  padding: 0 var(--k-s-3);
  border-radius: var(--k-r-control-sm);
  background: transparent;
  border: none;
  color: var(--k-ink);
  font-family: var(--k-font);
  font-size: 14px;
  font-weight: 500;
  font-feature-settings: var(--k-font-feat);
  cursor: pointer;
  text-align: left;
  transition: background var(--k-dur-quick) var(--k-ease);
}

.k-popover-action:hover {
  background: var(--k-glass-quiet);
}

.k-popover-action.is-danger {
  color: var(--k-critical);
}

/* ── Skeleton loading ────────────────────────────────────── */

.k-skeleton {
  background: var(--k-glass-quiet);
  border-radius: var(--k-r-control-xs);
  animation: k-skeleton-pulse 1.8s ease-in-out infinite;
}

/* ── Divider ─────────────────────────────────────────────── */

.k-divider {
  width: 100%;
  height: 1px;
  background: var(--k-divider);
  border: none;
}

/* ── Modal backdrop ──────────────────────────────────────── */

.k-backdrop {
  position: fixed;
  inset: 0;
  background: var(--k-glass-quiet);
  backdrop-filter: blur(8px) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(8px) saturate(var(--k-saturate));
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: k-fade-in var(--k-dur-quick) var(--k-ease);
}

.k-modal {
  background: var(--k-glass-floating);
  backdrop-filter: blur(var(--k-blur-strong)) saturate(var(--k-saturate));
  -webkit-backdrop-filter: blur(var(--k-blur-strong)) saturate(var(--k-saturate));
  border: 1px solid var(--k-border);
  border-radius: var(--k-r-card);
  box-shadow: var(--k-rim-strong), var(--k-shadow-floating);
  width: 460px;
  max-width: calc(100vw - var(--k-s-6));
  max-height: 85vh;
  overflow-y: auto;
  animation: k-fade-slide-up var(--k-dur-soft) var(--k-ease);
  z-index: 901;
}

.k-modal-wide {
  width: 560px;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes k-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes k-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes k-fade-slide-down {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes k-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes k-skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}

@keyframes k-pulse-warn {
  0%, 100% { box-shadow: 0 0 0 3px var(--k-warn-ring); }
  50%       { box-shadow: 0 0 0 5px var(--k-warn-glass); }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
/* Base reset — all values via var(--k-*) tokens */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--k-font);
  font-feature-settings: var(--k-font-feat);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Atmosphere radial gradient — near at center, far at edges */
  background:
    radial-gradient(
      ellipse 120% 100% at 50% 0%,
      var(--k-atmosphere-near) 0%,
      var(--k-atmosphere) 40%,
      var(--k-atmosphere-far) 100%
    );
  background-attachment: fixed;
  min-height: 100dvh;
}

body {
  color: var(--k-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  min-height: 100dvh;
}

h1 {
  font-family: var(--k-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--k-ink);
}

h2 {
  font-family: var(--k-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--k-ink);
}

h3 {
  font-family: var(--k-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--k-ink);
}

p {
  color: var(--k-ink-secondary);
  line-height: 1.6;
}

a {
  color: var(--k-info);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Scrollbar styling for dark environments */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--k-border);
  border-radius: var(--k-r-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--k-border-strong);
}

/* Focus visible — respect keyboard nav */
:focus-visible {
  outline: 2px solid var(--k-info-ring);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: var(--k-info-glass);
  color: var(--k-ink);
}