/**
 * Hyde Design Tokens
 * ──────────────────────────────────────────────────────────────────────────
 * Single source of truth for typography, color, spacing, radius, and weight
 * across every Hyde-branded surface (seller portal, public pages, WP admin,
 * Hyde Contact plugin, transactional emails). Loaded by every Hyde plugin
 * in both frontend and admin contexts.
 *
 * Naming convention: --hyde-{category}-{role}-{variant}
 *   --hyde-ink            (primary text / dark surface)
 *   --hyde-ink-soft       (secondary text)
 *   --hyde-ink-fade       (tertiary text, captions)
 *   --hyde-paper          (white background)
 *   --hyde-surface        (soft tinted surface)
 *   --hyde-line           (default border)
 *   --hyde-line-soft      (subtle border)
 *   --hyde-gold           (moment-marker accent — CTAs, active states, badges)
 *   --hyde-success/warning/danger + -bg + -border (semantic palette)
 *   --hyde-text-h1..tiny  (typography scale)
 *   --hyde-weight-*       (font weights)
 *   --hyde-space-1..8     (spacing scale, 4px base)
 *   --hyde-radius-*       (border radius scale)
 *
 * For PHP-side access (email templates, etc.), see class-veritas-design.php
 * which mirrors these values as constants.
 *
 * @version 1.0  (shipped in Hyde Trading v2.24.0c / 2.24.0.3)
 * @see docs/HYDE-DESIGN-SYSTEM.md
 */

:root {

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

  --hyde-font:           'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --hyde-font-mono:      'SF Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;

  /* Type scale — 6 sizes plus responsive hero */
  --hyde-text-hero:      clamp(36px, 5vw, 56px);   /* clamp-responsive hero only */
  --hyde-text-h1:        32px;
  --hyde-text-h2:        22px;
  --hyde-text-h3:        17px;
  --hyde-text-body:      15px;                      /* default body */
  --hyde-text-small:     13px;
  --hyde-text-tiny:      11px;                      /* captions, eyebrows, badges */

  /* Line heights */
  --hyde-leading-tight:  1.2;
  --hyde-leading-snug:   1.35;
  --hyde-leading-normal: 1.5;
  --hyde-leading-loose:  1.65;

  /* Letter spacing */
  --hyde-tracking-tight: -0.01em;
  --hyde-tracking-normal: 0;
  --hyde-tracking-eyebrow: 0.08em;                  /* uppercase labels */

  /* Weights — three-step system */
  --hyde-weight-regular:  400;
  --hyde-weight-medium:   500;                      /* default titles */
  --hyde-weight-semibold: 600;                      /* headlines */

  /* ─────────── Color: neutrals ─────────── */

  --hyde-ink:            #1d1d1f;   /* primary foreground, dark chrome surface */
  --hyde-ink-2:          #3a3a3c;   /* secondary dark surface */
  --hyde-ink-soft:       #6e6e73;   /* secondary text */
  --hyde-ink-fade:       #86868b;   /* tertiary text, captions, hint */
  --hyde-paper:          #ffffff;   /* white background */
  --hyde-surface:        #f5f5f7;   /* soft tinted off-white */
  --hyde-surface-2:      #e8e8ed;   /* slightly stronger surface */
  --hyde-line:           #d2d2d7;   /* default border */
  --hyde-line-soft:      #e5e5ea;   /* subtle border (cards, dividers) */
  --hyde-line-faint:     #f2f2f4;   /* near-invisible separators */

  /* ─────────── Color: accents ─────────── */

  /* Gold — moment-marker only. CTAs, active states, status badges, key affordances.
     Never decorative. Never as background fill except in narrow callouts. */
  --hyde-gold:           #b5872a;
  --hyde-gold-soft:      #c9b478;   /* hover/active highlight */
  --hyde-gold-faint:     #fdf8ed;   /* warm tinted bg (rare) */

  /* Link */
  --hyde-link:           #0066cc;

  /* ─────────── Color: semantic (status) ─────────── */

  /* Success — split into two values per audit decision:
       --hyde-success-pill    = #34c759  (iOS-style, for pills/badges/ambient indicators)
       --hyde-success         = #1a7f3c  (darker, accessible for body text and links) */
  --hyde-success-pill:   #34c759;
  --hyde-success:        #1a7f3c;
  --hyde-success-bg:     #f0faf5;
  --hyde-success-border: #a3d9b8;

  /* Warning */
  --hyde-warning:        #92600a;
  --hyde-warning-bg:     #fdf8ed;
  --hyde-warning-border: #e4c57d;

  /* Danger */
  --hyde-danger:         #c0392b;
  --hyde-danger-bg:      #fff5f4;
  --hyde-danger-border:  #f5bfbb;

  /* Info (rare; use link blue as text, soft blue as bg) */
  --hyde-info:           #0066cc;
  --hyde-info-bg:        #eaf4fb;
  --hyde-info-border:    #b3d4ed;

  /* ─────────── Spacing — 4px base rhythm ─────────── */

  --hyde-space-1:        4px;
  --hyde-space-2:        8px;
  --hyde-space-3:        12px;
  --hyde-space-4:        16px;
  --hyde-space-5:        24px;
  --hyde-space-6:        32px;
  --hyde-space-7:        48px;
  --hyde-space-8:        64px;

  /* ─────────── Border radius ─────────── */

  --hyde-radius-tight:   4px;       /* tight badges, inputs in very small areas */
  --hyde-radius-input:   8px;       /* form inputs, small action buttons */
  --hyde-radius-card:    12px;      /* default card */
  --hyde-radius-card-lg: 14px;      /* hero / feature card */
  --hyde-radius-pill:    99px;      /* pills, status badges */

  /* ─────────── Shadows ─────────── */

  --hyde-shadow-card:    0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --hyde-shadow-lift:    0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --hyde-shadow-focus:   0 0 0 3px rgba(181, 135, 42, 0.15);  /* gold focus ring */

  /* ─────────── Transitions ─────────── */

  --hyde-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --hyde-duration-fast:  120ms;
  --hyde-duration-base:  180ms;
  --hyde-duration-slow:  280ms;

}


/* ──────────────────────────────────────────────────────────────────────────
 * Admin scope helper
 * ──────────────────────────────────────────────────────────────────────────
 * Apply class `hyde-admin` to a wrapper on Hyde admin pages to opt into the
 * Hyde aesthetic (Inter font, baseline reset). This avoids leaking into
 * other plugins' admin screens.
 *
 * Example:
 *   <div class="wrap hyde-admin">
 *     ...page content...
 *   </div>
 */

.hyde-admin,
.hyde-admin * {
  font-family: var(--hyde-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hyde-admin {
  color: var(--hyde-ink);
}

.hyde-admin h1,
.hyde-admin h2,
.hyde-admin h3,
.hyde-admin h4 {
  font-family: var(--hyde-font);
  color: var(--hyde-ink);
  letter-spacing: var(--hyde-tracking-tight);
}

.hyde-admin h1 { font-size: var(--hyde-text-h1); font-weight: var(--hyde-weight-semibold); }
.hyde-admin h2 { font-size: var(--hyde-text-h2); font-weight: var(--hyde-weight-semibold); }
.hyde-admin h3 { font-size: var(--hyde-text-h3); font-weight: var(--hyde-weight-semibold); }
.hyde-admin h4 { font-size: var(--hyde-text-body); font-weight: var(--hyde-weight-medium); }

.hyde-admin a {
  color: var(--hyde-link);
  text-decoration: none;
}
.hyde-admin a:hover { text-decoration: underline; }

.hyde-admin code {
  font-family: var(--hyde-font-mono);
  font-size: 0.92em;
  background: var(--hyde-line-faint);
  padding: 1px 6px;
  border-radius: var(--hyde-radius-tight);
  color: var(--hyde-ink);
}


/* ──────────────────────────────────────────────────────────────────────────
 * Reusable component classes — opt-in
 * ──────────────────────────────────────────────────────────────────────────
 * Use these on any Hyde surface (frontend or admin) for consistent components.
 * They reference tokens only — change a token and every component updates.
 */

/* Cards */
.hyde-card {
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line-soft);
  border-radius: var(--hyde-radius-card);
  padding: var(--hyde-space-5);
}

.hyde-card--feature {
  border-radius: var(--hyde-radius-card-lg);
  background: linear-gradient(180deg, var(--hyde-surface), var(--hyde-paper));
}

.hyde-card__eyebrow {
  font-size: var(--hyde-text-small);
  text-transform: uppercase;
  letter-spacing: var(--hyde-tracking-eyebrow);
  color: var(--hyde-ink-fade);
  margin-bottom: var(--hyde-space-2);
}

/* Status pills (filled, semantic) */
.hyde-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hyde-space-1);
  padding: 3px 10px;
  border-radius: var(--hyde-radius-pill);
  font-size: var(--hyde-text-tiny);
  font-weight: var(--hyde-weight-semibold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.4;
}

.hyde-pill--on,
.hyde-pill--success { background: var(--hyde-success-pill); color: var(--hyde-paper); }
.hyde-pill--off,
.hyde-pill--neutral { background: var(--hyde-line); color: var(--hyde-ink-soft); }
.hyde-pill--gold    { background: var(--hyde-gold); color: var(--hyde-paper); }
.hyde-pill--warning { background: var(--hyde-warning-border); color: var(--hyde-warning); }
.hyde-pill--danger  { background: var(--hyde-danger-border); color: var(--hyde-danger); }

/* Buttons — primary uses gold (moment-marker), default is dark ink */
.hyde-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hyde-space-2);
  padding: 10px 18px;
  border-radius: var(--hyde-radius-input);
  border: 1px solid transparent;
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-small);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--hyde-duration-fast) var(--hyde-ease);
  text-decoration: none;
  line-height: 1;
}

.hyde-btn--primary {
  background: var(--hyde-gold);
  color: var(--hyde-paper);
}
.hyde-btn--primary:hover { background: #a07724; }

.hyde-btn--ink {
  background: var(--hyde-ink);
  color: var(--hyde-paper);
}
.hyde-btn--ink:hover { background: var(--hyde-ink-2); }

.hyde-btn--ghost {
  background: transparent;
  color: var(--hyde-ink);
  border-color: var(--hyde-line);
}
.hyde-btn--ghost:hover { background: var(--hyde-surface); }

.hyde-btn:focus-visible {
  outline: none;
  box-shadow: var(--hyde-shadow-focus);
}

/* Form inputs */
.hyde-input,
.hyde-admin input[type=text],
.hyde-admin input[type=email],
.hyde-admin input[type=number],
.hyde-admin input[type=time],
.hyde-admin input[type=date],
.hyde-admin textarea {
  font-family: var(--hyde-font);
  font-size: var(--hyde-text-body);
  color: var(--hyde-ink);
  background: var(--hyde-paper);
  border: 1px solid var(--hyde-line);
  border-radius: var(--hyde-radius-input);
  padding: 8px 12px;
  line-height: var(--hyde-leading-snug);
  transition: border-color var(--hyde-duration-fast) var(--hyde-ease),
              box-shadow var(--hyde-duration-fast) var(--hyde-ease);
}

.hyde-input:focus,
.hyde-admin input[type=text]:focus,
.hyde-admin input[type=email]:focus,
.hyde-admin input[type=number]:focus,
.hyde-admin input[type=time]:focus,
.hyde-admin input[type=date]:focus,
.hyde-admin textarea:focus {
  outline: none;
  border-color: var(--hyde-gold);
  box-shadow: var(--hyde-shadow-focus);
}

/* Field label */
.hyde-label {
  display: block;
  font-size: var(--hyde-text-tiny);
  color: var(--hyde-ink-soft);
  margin-bottom: var(--hyde-space-1);
  font-weight: var(--hyde-weight-medium);
  letter-spacing: 0.02em;
}

/* Eyebrow (uppercase mini-label) */
.hyde-eyebrow {
  font-size: var(--hyde-text-small);
  text-transform: uppercase;
  letter-spacing: var(--hyde-tracking-eyebrow);
  color: var(--hyde-ink-fade);
  font-weight: var(--hyde-weight-medium);
}

/* Empty state */
.hyde-empty {
  text-align: center;
  padding: var(--hyde-space-6) var(--hyde-space-4);
  color: var(--hyde-ink-fade);
}
.hyde-empty__icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--hyde-space-3);
  color: var(--hyde-line);
}
.hyde-empty__title {
  font-size: var(--hyde-text-body);
  font-weight: var(--hyde-weight-medium);
  color: var(--hyde-ink);
  margin-bottom: var(--hyde-space-1);
}
.hyde-empty__hint {
  font-size: var(--hyde-text-small);
  line-height: var(--hyde-leading-normal);
  max-width: 420px;
  margin: 0 auto;
}

/* Notice (inline banner — status-tinted) */
.hyde-notice {
  padding: 10px 14px;
  border-radius: var(--hyde-radius-input);
  font-size: var(--hyde-text-small);
  line-height: var(--hyde-leading-normal);
  border-width: 1px;
  border-style: solid;
}
.hyde-notice--warning { background: var(--hyde-warning-bg); border-color: var(--hyde-warning-border); color: var(--hyde-warning); }
.hyde-notice--success { background: var(--hyde-success-bg); border-color: var(--hyde-success-border); color: var(--hyde-success); }
.hyde-notice--danger  { background: var(--hyde-danger-bg);  border-color: var(--hyde-danger-border);  color: var(--hyde-danger); }
.hyde-notice--info    { background: var(--hyde-info-bg);    border-color: var(--hyde-info-border);    color: var(--hyde-info); }


/* ──────────────────────────────────────────────────────────────────────────
 * Inter font load (web-safe)
 * ──────────────────────────────────────────────────────────────────────────
 * Plugin loaders enqueue from Google Fonts; this file references the family
 * via the --hyde-font token. If a host blocks Google Fonts, the fallback
 * stack is Apple/Microsoft system fonts so the cascade still feels native.
 */

/* ──────────────────────────────────────────────────────────────────────────
 * Orphan / widow control  (v2.24.6.44)
 * ──────────────────────────────────────────────────────────────────────────
 * Stops headings from dropping a single trailing word onto its own line
 * (the "...your account is / approved" case). text-wrap:balance evens the
 * line lengths of a heading so the last line is never a lone orphan;
 * text-wrap:pretty does the equivalent for body copy — it specifically
 * prevents a one-word final line without balance's whole-block re-rationing
 * (browsers cap balance at a handful of lines, so it is wrong for long
 * paragraphs; pretty is the right tool there).
 *
 * Scoped to the plugin's own front-end roots so the surrounding WoodMart
 * theme chrome is left alone. .va-modal-title is listed explicitly because
 * the modal overlay is appended to <body>, outside #va-root, so the
 * root-scoped heading selectors would not reach it.
 *
 * Both properties degrade gracefully: a browser without support just wraps
 * normally, exactly as before.
 */
#va-root :is(h1, h2, h3, h4, h5, h6),
#veritas-root :is(h1, h2, h3, h4, h5, h6),
#hyde-contact-root :is(h1, h2, h3, h4, h5, h6),
#hyde-intake-root :is(h1, h2, h3, h4, h5, h6),
.va-modal-title {
  text-wrap: balance !important;
}

#va-root p,
#veritas-root p,
#hyde-contact-root p,
#hyde-intake-root p,
.va-modal-body p {
  text-wrap: pretty !important;
}