/*
 Theme Name:   ABTdomain
 Theme URI:    https://abtdomain.com
 Description:  Domain Name Intelligence. Clean, tech-forward light UI with a sky-blue accent (#0284C7), rounded cards, live ticker, and observatory readouts. Native system font stack; no remote fonts. Independent standalone theme; v3 (domain_story_v3_wp) is the previous version and is left untouched.
 Author:       ABTdomain
 Author URI:   https://abtdomain.com
 Version:      4.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  abtdomain
 Requires at least: 6.0
 Tested up to: 6.5
 Requires PHP: 7.4
*/

/* ==========================================================================
   Self-hosted fonts
   See assets/fonts/README.md for the download checklist. Using OFL/Apache
   licensed faces (Inter / Spectral / IBM Plex Mono) — self-host is
   explicitly permitted by their licenses and avoids GDPR concerns about
   Google Fonts CDN under Schrems II.
   ========================================================================== */

/* Inter is a variable font: one woff2 covers the full weight range.
   Spectral and IBM Plex Mono have no variable releases, so they ship
   as latin-subset static weights (~15-23 KB each).
   font-display: swap keeps text on the system fallback while loading. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Inter-VariableFont.woff2') format('woff2-variations'),
       url('assets/fonts/Inter-VariableFont.woff2') format('woff2');
}

@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Spectral-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/Spectral-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/Spectral-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/Spectral-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/Spectral-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/IBMPlexMono-Bold.woff2') format('woff2');
}

/* ==========================================================================
   Design tokens — v4 (clean, tech-forward, light)
   Sky-blue accent (#0284C7) on a white/slate base. Token *names* are kept
   identical to v3 (--signal, --data, --live, --paper, --ink, etc.) so every
   component rule keeps working untouched — only the values changed.
   --signal keeps its "negative / drop / alert" semantic; --ok is "positive".
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     v4 palette — unified with domainkits (site-basic.css design system).
     Fully independent of v2/v3; the old paper/oxblood palette is dropped.
     domainkits canonical names are provided (--primary, --dark, --gray,
     --light-gray, --success, --warning, --error) AND the legacy theme
     token names (--paper, --ink, --signal, ...) are mapped onto the same
     values so every existing component rule keeps working untouched.
     ------------------------------------------------------------------ */

  /* domainkits canonical */
  --primary:       #0284c7;
  --primary-dark:  #075985;
  --primary-light: #38bdf8;
  --dark:          #1f2937;
  --gray:          #6b7280;
  --light-gray:    #f3f4f6;
  --success:       #10b981;
  --warning:       #f59e0b;
  --error:         #ef4444;

  /* Neutral base (legacy names → domainkits neutrals) */
  --paper:        #ffffff;
  --paper-2:      #fafafa;
  --paper-3:      #f3f4f6;
  --ink:          #1f2937;
  --ink-2:        #374151;
  --ink-3:        #6b7280;
  --muted:        #9ca3af;
  --rule:         #e5e7eb;
  --rule-strong:  #1f2937;
  --white:        #ffffff;

  /* Brand accent (sky-blue #0284C7). In this theme --signal has always been
     the *emphasis* colour (brand mark, active nav, hovers, buttons, links),
     so it maps to the primary accent — NOT to red. The one genuine negative
     use (a falling data delta) uses --down instead. */
  --accent:        #0284c7;
  --accent-light:  #38bdf8;
  --accent-strong: #075985;
  --accent-2:      #e0f2fe;
  --accent-bg:     rgba(2, 132, 199, 0.05);
  --gradient-main: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  --signal:        #0284c7;
  --signal-2:      #e0f2fe;
  --data:          #0284c7;
  --data-2:        #e0f2fe;

  /* Status accents — domainkits (--success/--warning/--error) */
  --live:         #f59e0b;
  --live-2:       #fef3c7;
  --ok:           #10b981;
  --warn:         #f59e0b;
  --danger:       #ef4444;
  --down:         #ef4444;

  /* Status colors retained for compatibility with v2/v3 component snippets */
  --status-info-bg:      #e0f2fe;
  --status-info-fg:      #0369a1;
  --status-warning-bg:   #fef3c7;
  --status-warning-fg:   #b45309;
  --status-danger-bg:    #fee2e2;
  --status-danger-fg:    #dc2626;
  --status-indigo-bg:    #e0e7ff;
  --status-indigo-fg:    #4338ca;
  --status-purple-bg:    #ede9fe;
  --status-purple-fg:    #6d28d9;
  --status-success-fg:   #059669;
  --status-gold-bg:      #fef3c7;
  --status-gold-fg:      #b45309;

  /* Chart palette — Chart.js + sparkline shared. Sky-blue leads. */
  --chart-1: #0284c7;
  --chart-2: #0f172a;
  --chart-3: #059669;
  --chart-4: #d97706;
  --chart-5: #7c3aed;
  --chart-6: #94a3b8;
  --chart-line-primary:   #0284c7;
  --chart-line-secondary: #64748b;
  --chart-grid:           rgba(15, 23, 42, 0.06);
  --chart-tooltip-bg:     rgba(15, 23, 42, 0.92);

  /* Typography — system sans stack, unified with domainkits.
     --serif and --mono are kept as token names for compatibility, but both
     now resolve to the same system sans so the whole theme reads as one
     modern, tech-forward SaaS UI. IBM Plex Mono is retained only for true
     code/number contexts via --code. */
  --sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --code:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Rhythm */
  --max:    1320px;
  --max-r:  1180px;
  --pad-x:  clamp(20px, 4vw, 40px);

  /* Type scale */
  --fs-9:  9px;
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-34: 34px;

  /* Spacing scale (8px base) */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-7:  56px;
  --space-8:  64px;
  --space-9:  72px;
  --space-10: 80px;

  /* Radius — rounded, unified with domainkits (--radius 12 / --radius-lg 20) */
  --radius-0:    0;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius:      12px;
  --radius-lg:   20px;

  /* Shadows — domainkits elevation system */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.08);

  /* Accent-tinted elevation — colored shadows read more modern than flat gray.
     Used at rest (card) and on hover (lift) for interactive surfaces. */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(2, 132, 199, 0.06);
  --shadow-lift: 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(2, 132, 199, 0.12);

  /* Semantic button gradients (domainkits --global-btn-*) */
  --btn-register: linear-gradient(135deg, #10b981, #059669);
  --btn-price:    linear-gradient(135deg, #f59e0b, #d97706);
  --btn-check:    linear-gradient(135deg, #3b82f6, #2563eb);
  --btn-expired:  linear-gradient(135deg, #ef4444, #dc2626);
  --btn-offer:    linear-gradient(135deg, #8b5cf6, #7c3aed);

  /* Motion */
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--signal); }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Tabular numbers everywhere we render counts */
.tnum, .num, .mono, table td, table th { font-variant-numeric: tabular-nums; }

/* WP screen reader text (kept compatible with v2) */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}
.screen-reader-text:focus {
  background-color: var(--paper-2);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  clip: auto;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-size: var(--fs-13);
  font-weight: 600;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Reveal on scroll — used by JS micro-observer */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }