/* ============================================================================
   POUYA EDITS — DESIGN TOKENS  (extracted from the live 13-page build)
   These are the ACTUAL values in use, not a redesign. Every page references
   these custom properties; nothing in the page exports hardcodes a hex/radius/
   shadow that has a token here.

   Source of truth in the project:
     _ds/pouya-edits-design-system-.../tokens/colors.css
     _ds/pouya-edits-design-system-.../tokens/typography.css
     _ds/pouya-edits-design-system-.../tokens/spacing.css
     _ds/pouya-edits-design-system-.../components/core/Button.jsx  (button states)
   ============================================================================ */

/* Fonts (flagged substitution — see README). Display = General Sans, Body = Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap');

:root {

  /* ---- BLUE RAMP -------------------------------------------------------- */
  --blue-50:  #EAF4FF;
  --blue-100: #D6EAFF;
  --blue-200: #B3D9FF;
  --blue-300: #8AC2FF;
  --blue-400: #5DA3F5;
  --blue-500: #3B82F6;   /* primary */
  --blue-600: #2563EB;   /* primary hover / logo blue */
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;

  /* ---- INK / NEUTRALS --------------------------------------------------- */
  --ink-900: #0F172A;
  --ink-800: #16213A;
  --ink-700: #334155;
  --ink-500: #64748B;
  --ink-300: #94A3B8;
  --ink-200: #CBD5E1;
  --ink-100: #E2E8F0;
  --ink-50:  #F1F5F9;
  --white:   #FFFFFF;

  /* ---- SEMANTIC --------------------------------------------------------- */
  --accent:            var(--blue-500);
  --accent-hover:      var(--blue-600);
  --accent-active:     var(--blue-700);
  --accent-soft:       var(--blue-50);
  --accent-soft-border:var(--blue-100);

  --surface-page:  #F7FBFF;          /* faint blue-white page background */
  --surface-card:  var(--white);
  --surface-alt:   var(--blue-50);
  --surface-dark:  var(--ink-900);   /* footer / dark panels */

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-300);
  --text-inverse:   var(--white);
  --text-accent:    var(--blue-600);

  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-accent: var(--blue-200);

  --success: #16A34A;
  --warning: #D97706;
  --danger:  #DC2626;

  /* ---- TYPE FAMILIES ---------------------------------------------------- */
  --font-display: 'General Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- TYPE SCALE (sizes) ---------------------------------------------- */
  --size-display-xl: 4.5rem;    /* 72px — hero H1 (clamps down to 44px on mobile) */
  --size-display-lg: 3.25rem;   /* 52px — section H2 */
  --size-display-md: 2.25rem;   /* 36px — page H1 on interior pages */
  --size-display-sm: 1.5rem;    /* 24px — sub-heads / legal H2 */
  --size-eyebrow:    0.8125rem; /* 13px — uppercase section label */
  --size-body-lg:    1.1875rem; /* 19px */
  --size-body-md:    1.0625rem; /* 17px */
  --size-body-sm:    0.9375rem; /* 15px */
  --size-caption:    0.8125rem; /* 13px */

  /* ---- WEIGHTS ---------------------------------------------------------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- LINE HEIGHT ------------------------------------------------------ */
  --leading-tight:   1.05;
  --leading-snug:    1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ---- TRACKING --------------------------------------------------------- */
  --tracking-tight:  -0.02em;   /* display headings */
  --tracking-normal: 0em;
  --tracking-wide:   0.06em;    /* eyebrows / badges */

  /* ---- SPACING (4px base) ---------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;
  /* Section vertical padding in practice: 48–96px. Card inner padding: 16–40px. */

  /* ---- RADIUS ----------------------------------------------------------- */
  --radius-sm:   8px;    /* small controls, inputs */
  --radius-md:   14px;   /* inputs, small cards, vertical clip tiles */
  --radius-lg:   20px;   /* standard cards */
  --radius-xl:   28px;   /* hero panels, stat bar, auth card, CTA band */
  --radius-full: 999px;  /* buttons, badges, pills, tab bar */

  /* ---- SHADOW (soft, ambient — no hard drops) -------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.10);
  --shadow-accent: 0 8px 24px rgba(59, 130, 246, 0.18);   /* primary CTA / popular tier */

  /* ---- MOTION ----------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}

/* ============================================================================
   TYPE HELPER CLASSES  (used throughout the pages as class="text-display-lg" etc.)
   ============================================================================ */
.text-display-xl { font-family: var(--font-display); font-weight: var(--weight-bold);     font-size: clamp(2.75rem, 2.1rem + 2.6vw, var(--size-display-xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-display-lg { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: clamp(2.25rem, 1.9rem + 1.5vw, var(--size-display-lg)); line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); }
.text-display-md { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: clamp(1.75rem, 1.55rem + 0.9vw, var(--size-display-md)); line-height: var(--leading-snug);  letter-spacing: var(--tracking-tight); }
.text-display-sm { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-display-sm); line-height: var(--leading-snug); }
.text-eyebrow    { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--size-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.text-body-lg    { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--size-body-lg); line-height: var(--leading-relaxed); }
.text-body-md    { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--size-body-md); line-height: var(--leading-relaxed); }
.text-body-sm    { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--size-body-sm); line-height: var(--leading-normal); }
.text-caption    { font-family: var(--font-body); font-weight: var(--weight-medium);  font-size: var(--size-caption); line-height: var(--leading-normal); }

/* ============================================================================
   BUTTON STATES  (extracted from components/core/Button.jsx)
   3 variants x 3 sizes. Base is a full-pill, display-font, 600-weight button.
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600;
  border-radius: var(--radius-full); cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--duration-base) var(--ease-out);
}
/* sizes */
.btn-sm { padding: 9px 16px;  font-size: 14px;   gap: 6px;  }
.btn-md { padding: 12px 22px; font-size: 15.5px; gap: 8px;  }
.btn-lg { padding: 15px 28px; font-size: 17px;   gap: 10px; }

/* PRIMARY */
.btn-primary            { background: var(--blue-500); color: var(--text-inverse); border-color: transparent; box-shadow: var(--shadow-accent); }
.btn-primary:hover      { background: var(--blue-600); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(59,130,246,0.28); }
.btn-primary:active     { transform: translateY(0) scale(0.98); transition-duration: var(--duration-fast); }  /* press: guide spec (0.98); see note */
.btn-primary[disabled]  { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: var(--shadow-accent); }

/* SECONDARY */
.btn-secondary           { background: var(--white); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover     { background: var(--ink-50); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn-secondary:active    { transform: translateY(0) scale(0.98); transition-duration: var(--duration-fast); }
.btn-secondary[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* GHOST */
.btn-ghost           { background: transparent; color: var(--text-primary); border-color: transparent; box-shadow: none; }
.btn-ghost:hover     { background: var(--accent-soft); }
.btn-ghost:active    { transform: scale(0.98); transition-duration: var(--duration-fast); }
.btn-ghost[disabled] { opacity: 0.45; cursor: not-allowed; }

/* NOTE ON :active — the guide specifies a 0.98 press scale at 150ms. The live
   React Button.jsx does NOT currently implement an explicit active state (only
   default + hover). The :active rules above encode the intended press behavior
   for the Elementor rebuild. If matching the current site exactly, omit them. */

/* ============================================================================
   BADGE  (extracted from components/core/Badge.jsx) — uppercase pill
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-full);
}
.badge-accent  { background: var(--accent-soft); color: var(--text-accent);    border: 1px solid var(--accent-soft-border); }
.badge-neutral { background: var(--ink-50);      color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.badge-dark    { background: var(--ink-900);     color: #fff;                  border: 1px solid transparent; }