/*!
 * Copyright (c) 2026 Hyde Trading Co. All rights reserved.
 * Proprietary and confidential. Unauthorized copying, modification,
 * distribution, or use is strictly prohibited.
 */
/**
 * 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;

  /* ONE type scale for every Hyde surface: storefront, portal, HSP, admin.
     v2.25.71 reconciled the two families that had drifted apart. The
     --hyde-fs-* set added in .67 duplicated sizes this scale already had
     under different names, and disagreed with it on secondary text,
     12 vs 13. These names are canonical and are mirrored in PHP by
     Veritas_Design::TEXT_* for email, which cannot read CSS variables.
     Weight and color carry hierarchy from here. Do not add a size. */
  --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;                      /* anything meant to be read */
  --hyde-text-small:     13px;                      /* secondary, meta, captions */
  --hyde-text-tiny:      11px;                      /* tracked caps eyebrows, badges */

  /* The .67 storefront names survive as ALIASES so every component shipped
     in .67 through .70 keeps working untouched. They resolve to the scale
     above and own no size of their own. Prefer --hyde-text-* in new code.
     NOTE: --hyde-fs-meta now resolves to 13px, up from its own 12px. That
     is the one deliberate visual change, and it retires 12px from the
     storefront scale so small text is 13 everywhere. */
  --hyde-fs-eyebrow:     var(--hyde-text-tiny);
  --hyde-fs-body:        var(--hyde-text-body);
  --hyde-fs-meta:        var(--hyde-text-small);

  /* 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;   /* 3.62:1 on paper. NOT for text anyone is
                                       meant to read. Disabled states, icons and
                                       decorative rules only. For captions and
                                       hints use --hyde-ink-soft at 5.07:1. */
  --hyde-paper:          #ffffff;   /* white background */
  --hyde-canvas:         #fafafa;   /* page canvas — matches the site background so Hyde surfaces blend */
  --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) */

  /* Gold split into two values per accessibility audit, exactly as success is.
       --hyde-gold        #b5872a  accent. borders, icons, active underlines,
                                   gold-on-dark text. 5.18:1 on --hyde-ink.
       --hyde-gold-deep   #967022  filled surfaces carrying white text.
                                   4.53:1 with --hyde-paper. Clears WCAG AA.
       --hyde-gold-dark   #84621d  hover for those filled surfaces. 5.61:1.
     #b5872a under white text is 3.25:1 and fails AA below 18.66px bold, which
     is every button in the product. Use -deep wherever gold is a background
     under white text. Use plain gold everywhere else, so the value people
     actually read as "the brand gold" is unchanged.
     -dark must stay DARKER than -deep. The previously hardcoded #a07724 was
     lighter, which is the wrong direction for a hover and only 4.07:1. */
  --hyde-gold-deep:      #967022;
  --hyde-gold-dark:      #84621d;

  /* 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:         #b23b3b;
  --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:   0;         /* tight badges, inputs in very small areas */
  --hyde-radius-input:   0;         /* form inputs, small action buttons */
  --hyde-radius-card:    0;         /* default card */
  --hyde-radius-card-lg: 0;         /* hero / feature card */
  --hyde-radius-pill:    0;         /* 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-soft);
  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-deep); 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-deep);
  color: var(--hyde-paper);
}
.hyde-btn--primary:hover { background: var(--hyde-gold-dark); }

.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-soft);
  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-soft);
}
.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;
}