/* ============================================================
   tokens.css - Single source of truth for bitcoinsignalpro.com
   ------------------------------------------------------------
   Loaded BEFORE any inline <style> in every page.
   Never duplicate :root variables in HTML <style> blocks.
   ============================================================ */

:root{

  /* ============================================================
     COLORS
     ============================================================ */

  /* Backgrounds */
  --bg:#ffffff;
  --bg-alt:#f5f5f5;
  --bg-section:#fafafa;             /* @deprecated - use --bg-alt; alias kept for legacy CSS */

  /* Lines / borders */
  --line:#e0e0e0;
  --line-strong:#bdbdbd;

  /* Text */
  --text:#1a1a1a;
  --text-muted:#6b6b6b;

  /* Brand red */
  --red:#cc0000;                    /* brand red, primary CTA */
  --red-dark:#990000;               /* brand hover */
  --red-tint:#ffebee;               /* light bg for red text on light surface */
  --red-soft:#ffebee;               /* @alias of --red-tint - legacy */

  /* Semantic green (positive performance, success) */
  --green:#009933;
  --green-tint:#e8f5e9;
  --green-soft:#e8f5e9;             /* @alias of --green-tint - legacy */

  /* Semantic danger (errors, destructive actions) */
  --danger:#cc0000;                 /* same hue as --red for now; separate token enables future divergence */
  --danger-tint:#ffebee;

  /* Amber (warnings, caution) */
  --amber:#b8860b;
  --amber-tint:#fff8e1;
  --amber-soft:#fff8e1;             /* @alias of --amber-tint - legacy */
  --amber-line:#f0c040;

  /* Bitcoin orange (decorative, BTC-themed accents) */
  --orange:#f7931a;

  /* Links (kept for any future use) */
  --link:#0066cc;


  /* ============================================================
     SPACING SCALE (4px base, geometric-ish)
     Naming follows --space-N where N is the step.
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;


  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;               /* form inputs, small chips, table cells */
  --radius-md:   8px;               /* cards, buttons, pills */
  --radius-lg:   14px;              /* large pills, hero, badges */
  --radius-xl:   24px;
  --radius-full: 9999px;            /* circular (avatars, dots, status circles) */


  /* ============================================================
     ELEVATION / SHADOWS
     ============================================================ */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.12);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.16);

  /* Brand shadows (red-tinted, for CTAs and active states) */
  --shadow-brand-sm: 0 2px 8px rgba(204,0,0,.25);
  --shadow-brand-md: 0 4px 12px rgba(204,0,0,.30);


  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  /* Font families */
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'Courier New', monospace;

  /* Font size scale (loosely 1.125 "Major Second") */
  --text-xs:   11px;                /* footnotes, badges, micro-labels */
  --text-sm:   12px;                /* secondary text, table cells, captions */
  --text-base: 14px;                /* body, default */
  --text-md:   16px;                /* emphasis, inputs */
  --text-lg:   18px;                /* section subtitles, lead text */
  --text-xl:   22px;                /* page subtitles, KPI values */
  --text-2xl:  28px;
  --text-3xl:  38px;                /* hero page titles */

  /* Font weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-loose:  1.7;


  /* ============================================================
     MOTION (duration + easing)
     ============================================================ */
  --duration-fast:    .12s;
  --duration-base:    .18s;
  --duration-slow:    .3s;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-standard:    ease;


  /* ============================================================
     Z-INDEX SCALE
     ============================================================ */
  --z-base:       1;
  --z-dropdown:  10;
  --z-sticky:    50;                /* in-page sticky elements (mainnav) */
  --z-sticky-top:60;                /* top-most sticky (strategy-tabs) */
  --z-modal:    100;
  --z-toast:    200;

}


/* ============================================================
   GLOBAL ACCESSIBILITY
   focus-visible : visible focus ring for keyboard users only.
   ============================================================ */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Honor users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   SHARED COMPONENT STATES
   Base UX states used across forms/buttons on every page.
   ============================================================ */

/* --- Buttons: disabled state ------------------------------- */
button:disabled,
button[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
}
/* Block hover effects while disabled (any background-change rule
   declared elsewhere is overridden by this more specific selector). */
button:disabled:hover,
button[aria-disabled="true"]:hover{
  filter: none;
  transform: none;
}

/* --- Buttons: loading state -------------------------------- */
/* Apply class .is-loading on a button to:
   - hide its label visually (kept for screen readers)
   - center a spinning ring overlay
   - block pointer events                                       */
.is-loading{
  position: relative;
  color: transparent !important;
  text-shadow: none !important;
  pointer-events: none;
  cursor: wait;
}
.is-loading::after{
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: var(--radius-full);
  animation: tk-spin .7s linear infinite;
}
@keyframes tk-spin{
  to{ transform: rotate(360deg); }
}

/* --- Inputs: error / invalid state ------------------------ */
input.error,
input[aria-invalid="true"]{
  border-color: var(--red) !important;
  background-color: var(--red-tint);
}
input.error:focus,
input.error:focus-visible,
input[aria-invalid="true"]:focus,
input[aria-invalid="true"]:focus-visible{
  outline-color: var(--red);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px var(--red-tint);
}

/* --- Inputs: success state (optional) ----------------------- */
input.success{
  border-color: var(--green) !important;
  background-color: var(--green-tint);
}