/* ===========================================================================
 * CLAY DESIGN SYSTEM — single source of truth.
 *
 * The theme had grown TWO design systems: the public pages speak .btn/.card/
 * .fld with their own --bg/--surface/--tx/--r tokens, the app shell speaks
 * .nv-btn/.nv-card/.nv-input with --nv-*. Four files declared 108 tokens and
 * 287 !important between them, so a public button was 50px/15px/no-border
 * while an app button was 46px/12px/2px-ink.
 *
 * This file declares every token ONCE and defines each component ONCE, then
 * binds BOTH vocabularies to the same rule. Adding a third vocabulary later
 * means adding a selector here, not another stylesheet.
 *
 * Load order: nova → lumen → neu → clay(app) → pubpages → clayhome/claypub →
 *             clay-system (LAST, so it settles every conflict).
 * ======================================================================== */

/* ============================== 1. TOKENS =============================== */
:root {
  /* palette — accent comes from settings.panel_accent via pp_accent_css() */
  --c-accent:      var(--nv-accent, #b30000);
  --c-accent-2:    var(--nv-accent-2, var(--c-accent));
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 10%, transparent);
  --c-accent-ring: color-mix(in srgb, var(--c-accent) 18%, transparent);

  --c-ink:       #2B3445;
  --c-line:      rgba(43,52,69,.12);
  --c-line-2:    rgba(43,52,69,.07);
  --c-tint:      rgba(43,52,69,.028);

  --c-bg:        #F7EFE3;   /* deeper ground so white cards read as distinct */
  --c-surface:   #FFFFFF;
  --c-surface-2: #FFF9F0;

  --c-text:      #1B2333;
  --c-text-soft: #45506A;
  --c-muted:     #5A6580;

  --c-ok:   #16A34A;  --c-ok-bg:   rgba(22,163,74,.13);
  --c-warn: #F59E0B;  --c-warn-bg: rgba(245,158,11,.15);
  --c-bad:  #EF4444;  --c-bad-bg:  rgba(239,68,68,.12);
  --c-info: #3B82F6;  --c-info-bg: rgba(59,130,246,.12);

  /* radii — one ladder */
  --c-r-sm:   12px;
  --c-r:      16px;
  --c-r-lg:   22px;   /* chunky — clay sits at 16-24px */
  --c-r-pill: 999px;

  /* spacing — 4px base, used everywhere */
  --c-s1: 4px;  --c-s2: 8px;  --c-s3: 12px; --c-s4: 16px;
  --c-s5: 20px; --c-s6: 24px; --c-s7: 32px; --c-s8: 48px;

  /* elevation */
  /* INFLATE: claymorphism = inner bottom shade + soft outer. The inner shade is what
     separates clay from neumorphism; without it a soft shadow on white IS neu. */
  --c-sh-soft: inset 0 -3px 0 rgba(43,52,69,.07),
               0 2px 4px rgba(43,52,69,.05), 0 10px 24px rgba(43,52,69,.07);
  --c-sh-lift: inset 0 -3px 0 rgba(43,52,69,.06),
               0 6px 14px rgba(43,52,69,.10), 0 22px 46px rgba(43,52,69,.10);
  /* BTNCLEAN: buttons no longer use a black offset slab. The shadow is tinted from
     the accent so it reads as depth, not a second element behind the button. */
  --c-sh-btn:    inset 0 -3px 0 rgba(0,0,0,.20),
                 0 2px 4px color-mix(in srgb, var(--c-accent) 30%, transparent),
                 0 6px 16px color-mix(in srgb, var(--c-accent) 28%, transparent);
  --c-sh-btn-lg: inset 0 -3px 0 rgba(0,0,0,.20),
                 0 4px 8px color-mix(in srgb, var(--c-accent) 34%, transparent),
                 0 12px 28px color-mix(in srgb, var(--c-accent) 34%, transparent);
  --c-sh-hard: 3px 3px 0 var(--c-ink);
  --c-sh-hard-lg: 4px 4px 0 var(--c-ink);

  /* control sizing — one height for buttons AND inputs so rows align */
  --c-h:      46px;
  --c-h-sm:   38px;
  --c-pad-x:  20px;

  /* type */
  --c-font:      'Nunito','Nunito Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --c-font-head: 'Fredoka','Nunito',system-ui,sans-serif;
  --c-fs-h1: clamp(28px,4vw,40px);
  --c-fs-h2: clamp(22px,2.8vw,28px);
  --c-fs-h3: 18px;
  --c-fs-body: 15px;
  --c-fs-sm: 13px;
  --c-fs-xs: 11.5px;

  /* motion — one curve, three durations */
  --c-ease: cubic-bezier(.22,1,.36,1);
  --c-t-fast: .14s;
  --c-t:      .18s;
  --c-t-slow: .32s;
}

html.nv-dark, .nv-dark {
  --c-ink:       #0B0F1A;
  --c-line:      rgba(255,255,255,.13);
  --c-line-2:    rgba(255,255,255,.08);
  --c-tint:      rgba(255,255,255,.04);
  --c-bg:        #171B27;
  --c-surface:   #222739;
  --c-surface-2: #2B3145;
  --c-text:      #F1F3F9;
  --c-text-soft: #C3C9D8;
  --c-muted:     #9AA6BE;
  --c-sh-soft: inset 0 1px 0 rgba(255,255,255,.07),
               inset 0 -3px 0 rgba(0,0,0,.30),
               0 2px 4px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.30);
  --c-sh-lift: inset 0 1px 0 rgba(255,255,255,.08),
               inset 0 -3px 0 rgba(0,0,0,.30),
               0 6px 14px rgba(0,0,0,.46), 0 22px 46px rgba(0,0,0,.36);
}

/* --- bind the two legacy token sets to the system, so page rules that still
       read --nv-* or --surface/--tx inherit the SAME values instead of their
       own copies. This is what stops the vocabularies drifting apart. ------ */
:root, .nv, body, .pubx {
  --nv-bg: var(--c-bg);              --bg: var(--c-bg);
  --nv-surface: var(--c-surface);    --surface: var(--c-surface);
  --nv-surface-2: var(--c-surface-2); --raised: var(--c-surface);
  --nv-text: var(--c-text);          --tx: var(--c-text);
  --nv-text-soft: var(--c-text-soft);--soft: var(--c-text-soft);
  --nv-muted: var(--c-muted);        --mut: var(--c-muted);
  --nv-border: var(--c-line);        --bd: var(--c-line);
  --nv-border-2: var(--c-line-2);
  --acc: var(--c-accent);
  --r: var(--c-r-lg);                --r-sm: var(--c-r);
  --ease: var(--c-ease);
  --sd: var(--c-ink);                --sl: transparent;
  --rise: var(--c-sh-soft);          --rise-sm: var(--c-sh-soft);
  --inset: none;                     --inset-sm: none;
  --nv-sh: var(--c-sh-soft);         --nv-sh-lg: var(--c-sh-lift);
  --neu-rise: var(--c-sh-soft);      --neu-rise-sm: var(--c-sh-soft);
  --neu-inset: none;                 --neu-inset-sm: none;
  --glass-blur: none;                --glass-hi: transparent;
  --grad: linear-gradient(180deg, var(--c-accent-2), var(--c-accent));
  --neu-grad: var(--grad);           --lm-grad: var(--grad);
}

/* ============================ 2. TYPOGRAPHY ============================= */
body, .nv, .pubx { font-family: var(--c-font); color: var(--c-text); }
body h1, body h2, body h3, body h4,
.nv h1, .nv h2, .nv h3, .nv h4,
.pubx .pubx-title, .pubx .pubx-h2,
body .sec-h h2, body .auth h3, .nv .nv-card-h h3 {
  font-family: var(--c-font-head);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.16;
}
body h1, .nv h1, .pubx .pubx-title { font-size: var(--c-fs-h1); }
body .sec-h h2, .pubx .pubx-h2     { font-size: var(--c-fs-h2); }
.nv .nv-card-h h3, body .auth h3   { font-size: var(--c-fs-h3); }
body p, .nv p { font-size: var(--c-fs-body); line-height: 1.65; }

/* one label style everywhere */
body label.f, .nv .nv-label, .pubx .pubx-eyebrow, body .sec-h .eye,
.nv .nv-table th, .nv .nv-stat .l {
  font-size: var(--c-fs-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-muted);
}
body .sec-h .eye, .pubx .pubx-eyebrow { color: var(--c-accent); }

/* ============================= 3. BUTTONS =============================== */
/* ONE component. Primary = ink outline + hard shadow; secondary = hairline.
   Both vocabularies, identical geometry, identical states. */
body .btn, body a.btn, body button.btn,
.nv .nv-btn, .nv a.nv-btn, .nv button.nv-btn,
.pubx .pubx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--c-s2);
  height: var(--c-h) !important;
  padding: 0 var(--c-pad-x) !important;
  border-radius: var(--c-r) !important;
  font-family: var(--c-font);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  background: var(--c-accent);
  color: #fff;
  /* BTNCLEAN3: was a 45%-black mix, which still read as a dark outline.
     A light tint of the fill keeps the edge crisp without any black. */
  border: 1px solid color-mix(in srgb, var(--c-accent) 78%, #fff) !important;
  box-shadow: var(--c-sh-btn) !important;
  transition: transform var(--c-t) var(--c-ease),
              box-shadow var(--c-t) var(--c-ease),
              filter var(--c-t), background var(--c-t);
}
body .btn:hover, body a.btn:hover, .nv .nv-btn:hover, .nv a.nv-btn:hover, .pubx .pubx-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-sh-btn-lg) !important;
  filter: saturate(1.04) brightness(1.03);
  color: #fff;
}
body .btn:active, body a.btn:active, .nv .nv-btn:active, .nv a.nv-btn:active, .pubx .pubx-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.22),
              0 1px 2px color-mix(in srgb, var(--c-accent) 24%, transparent) !important;
}
body .btn:focus-visible, .nv .nv-btn:focus-visible, .pubx .pubx-btn:focus-visible {
  outline: none;
  box-shadow: var(--c-sh-btn), 0 0 0 4px var(--c-accent-ring) !important;
}
body .btn:disabled, .nv .nv-btn:disabled, body .btn.disabled, .nv .nv-btn.disabled {
  opacity: .5; cursor: not-allowed; transform: none !important;
  box-shadow: none !important; filter: none;
}

/* secondary / ghost / icon — one step down, never a second primary */
body .btn:not(.pri), body a.btn:not(.pri),
.nv .nv-btn.ghost, .nv a.nv-btn.ghost, .nv .nv-btn.soft, .nv .nv-icon-btn, .nv .nv-keybtn,
.pubx .pubx-btn.ghost {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-line) !important;
  box-shadow: none !important;
}
body .btn:not(.pri):hover, body a.btn:not(.pri):hover,
.nv .nv-btn.ghost:hover, .nv .nv-icon-btn:hover, .nv .nv-keybtn:hover,
.pubx .pubx-btn.ghost:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--c-accent) 34%, var(--c-line)) !important;
  box-shadow: var(--c-sh-soft) !important;
  color: var(--c-text);
}
.nv .nv-btn.danger, .nv a.nv-btn.danger { background: var(--c-bad); color: #fff; }
.nv .nv-btn.sm, body .btn.sm { height: var(--c-h-sm) !important; padding: 0 var(--c-s3) !important; font-size: 13px; }

/* ============================== 4. CARDS ================================ */
body .card, body .who, body .plan, body .faq-i, body .auth .card,
.nv .nv-card, .nv .nv-auth-card, .nv .lm-sum-card, .nv .lm-profile,
.pubx .pubx-card,
body .svrow .sv, body .blog a.bc, body .test .tc, body .off .of, body .bento .bx:not(.big) {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-r-lg) !important;
  box-shadow: var(--c-sh-soft) !important;
  backdrop-filter: none !important;
}
/* the auth card is the one conversion surface — deeper elevation, same edge */
body .auth .card {
  box-shadow: 0 2px 6px rgba(43,52,69,.06), 0 20px 50px rgba(43,52,69,.10) !important;
}
html.nv-dark body .auth .card {
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 20px 50px rgba(0,0,0,.44) !important;
}
.nv .nv-card .nv-card { box-shadow: none !important; border-color: var(--c-line-2) !important; }
.nv .nv-card-h, .pubx .pubx-card > h2:first-child { border-bottom: 1px solid var(--c-line-2); }

/* ============================== 5. INPUTS =============================== */
body input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body select, body textarea,
.nv .nv-input, .nv .nv-select, .nv .nv-textarea,
.nv input:not([type=checkbox]):not([type=radio]), .nv select, .nv textarea {
  height: var(--c-h) !important;
  border: 1.5px solid var(--c-line) !important;
  border-radius: var(--c-r) !important;
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  font-family: var(--c-font);
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: none !important;
  transition: border-color var(--c-t), box-shadow var(--c-t);
}
body textarea, .nv textarea, .nv .nv-textarea { height: auto !important; min-height: 110px; padding: var(--c-s3); }
body input:focus, body select:focus, body textarea:focus,
.nv input:focus, .nv select:focus, .nv textarea:focus {
  outline: none;
  border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 3px var(--c-accent-ring) !important;
}
body input::placeholder, .nv input::placeholder, .nv textarea::placeholder {
  color: var(--c-muted); opacity: .85; font-weight: 600;
}
body .fld i, .nv .nv-field i { color: var(--c-muted); transition: color var(--c-t); }
body .fld:focus-within i, .nv .nv-field:focus-within i { color: var(--c-accent); }
body input:disabled, .nv input:disabled { opacity: .55; cursor: not-allowed; }

/* ======================= 6. BADGES / PILLS / CHIPS ====================== */
body .pill, .nv .nv-pill, .nv .nv-chip, .nv .nv-badge, .pubx .pubx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--c-r-pill) !important;
  border: 1px solid transparent;
  padding: 4px 11px;
  font-size: var(--c-fs-xs);
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: none !important;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.nv .nv-badge.b-ok   { background: var(--c-ok-bg);   color: #12703C; border-color: rgba(22,163,74,.26); }
.nv .nv-badge.b-warn { background: var(--c-warn-bg); color: #8A5A00; border-color: rgba(245,158,11,.28); }
.nv .nv-badge.b-bad  { background: var(--c-bad-bg);  color: #B01C1C; border-color: rgba(239,68,68,.26); }
.nv .nv-badge.b-info, .nv .nv-badge.b-run { background: var(--c-info-bg); color: #1D4ED8; border-color: rgba(59,130,246,.26); }

/* ==================== 7. TABLES / ALERTS / TABS ========================= */
.nv .nv-table { border: 1px solid var(--c-line) !important; border-radius: var(--c-r-lg) !important; box-shadow: var(--c-sh-soft) !important; overflow: hidden; }
.nv .nv-table th { background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.nv .nv-table td { border-bottom: 1px solid var(--c-line-2); font-variant-numeric: tabular-nums; }
.nv .nv-table tr:last-child td { border-bottom: 0; }
.nv .nv-table tbody tr { transition: background var(--c-t-fast); }
.nv .nv-table tbody tr:hover { background: var(--c-tint); }

.nv .nv-alert, body .alert {
  border: 0 !important;
  border-left: 3px solid var(--c-accent) !important;
  border-radius: var(--c-r) !important;
  background: var(--c-accent-soft) !important;
  box-shadow: none !important;
  padding: var(--c-s3) var(--c-s4);
}
.nv .nv-tab, body .seg { border-radius: var(--c-r) !important; box-shadow: none !important; background: var(--c-tint) !important; border: 1px solid var(--c-line-2) !important; }
body .auth .seg a.on, .nv .nv-tab.on, .nv .nv-tab.active { background: var(--grad) !important; color: #fff !important; }
.nv .nv-tab.on i, .nv .nv-tab.active i { color: #fff !important; }

/* dropdowns & modals share the card spec */
.nv .nv-dd-menu, .nv .nv-sub-m, .nv .nv-modal, body .nvdd-m {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
  border-radius: var(--c-r-lg) !important;
  box-shadow: var(--c-sh-lift) !important;
}

/* ============================ 8. MOTION ================================= */
body a, body .plat a, .nv .nv-nav a, .pubx .pubx-related a {
  transition: color var(--c-t), background var(--c-t), border-color var(--c-t),
              transform var(--c-t) var(--c-ease), box-shadow var(--c-t) var(--c-ease);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  body .btn:hover, .nv .nv-btn:hover, .pubx .pubx-btn:hover,
  body .plat a:hover, .pubx .pubx-related a:hover { transform: none !important; }
}

/* ============================ 9. RESPONSIVE ============================= */
@media (max-width: 640px) {
  :root { --c-h: 44px; --c-pad-x: 16px; --c-r-lg: 15px; --c-r: 12px;
          --c-sh-hard: 2px 2px 0 var(--c-ink); --c-sh-hard-lg: 3px 3px 0 var(--c-ink); }
}