/*
Theme Name: Vara SaaS
Author: VR IT Services Pro
Author URI: https://www.vritservicespro.com
Theme URI: https://www.vritservicespro.com/themes/vara-saas
Description: A blazing-fast hybrid WordPress theme for SaaS websites with Gutenberg and Elementor page builder compatibility.
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: vara-saas
Tags: blog, portfolio, one-column, two-columns, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments, block-styles, wide-blocks, accessibility-ready

Vara SaaS WordPress Theme, Copyright 2026 VR IT Services Pro
Vara SaaS is distributed under the terms of the GNU General Public License v3 or later.
*/

/* ── Light Mode Design Tokens ── */
:root {
  /* Surface & Background */
  --vara-bg: #f8fafc;
  --vara-bg-alt: #f1f5f9;
  --vara-bg-elevated: #ffffff;
  --vara-surface: #ffffff;
  --vara-surface-alt: #f8fafc;
  --vara-surface-container-lowest: #ffffff;
  --vara-surface-container-low: #f1f5f9;
  --vara-surface-container: #f8fafc;
  --vara-surface-container-high: #e2e8f0;
  --vara-surface-container-highest: #cbd5e1;

  /* Text */
  --vara-text: #0f172a;
  --vara-text-heading: #0f172a;
  --vara-text-secondary: #475569;
  --vara-text-muted: #475569;
  --vara-text-on-primary: #ffffff;

  /* Brand Colors */
  --vara-primary: #7c3aed;
  --vara-primary-rgb: 124, 58, 237;
  --vara-secondary: #cebdff;
  --vara-accent: #4edea3;
  --vara-tertiary: #4edea3;

  /* Containers */
  --vara-primary-container: #7c3aed;
  --vara-secondary-container: #4f319c;
  --vara-tertiary-container: #007650;

  /* Links */
  --vara-link: #7c3aed;

  /* Borders */
  --vara-border: #e2e8f0;
  --vara-border-light: #f1f5f9;
  --vara-outline: #e2e8f0;
  --vara-outline-variant: #f1f5f9;

  /* Dropdown */
  --vara-dropdown-bg: #ffffff;

  /* Cards */
  --vara-card-bg: #ffffff;
  --vara-card-border: rgba(0, 0, 0, 0.05);
  --vara-card-border-radius: 1.5rem;
  --vara-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --vara-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.08);

  /* Elevation */
  --vara-glass-bg: rgba(255, 255, 255, 0.7);
  --vara-glass-border: rgba(0, 0, 0, 0.05);

  /* Focus */
  --vara-focus-ring: rgba(124, 58, 237, 0.2);
  --vara-focus-ring-dark: rgba(124, 58, 237, 0.15);

  /* Dark mode surface tokens */
  --vara-dark-bg: #0b1326;
  --vara-dark-surface: #131b2e;

  /* White */
  --vara-white: #ffffff;

  /* Typography */
  --vara-font-family: 'Inter', sans-serif;
  --vara-font-mono: 'JetBrains Mono', monospace;
  --vara-logo-width: 150px;
  --vara-base-size: 16px;

  /* Spacing */
  --vara-container-max: 1280px;
  --vara-gutter: 32px;
  --vara-section-gap: 120px;
  --vara-section-gap-lg: 200px;

  /* Border Radius */
  --vara-radius-sm: 0.25rem;
  --vara-radius: 0.5rem;
  --vara-radius-md: 0.75rem;
  --vara-radius-lg: 1rem;
  --vara-radius-xl: 1.5rem;
  --vara-radius-full: 9999px;

  /* Shadows */
  --vara-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vara-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  --vara-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --vara-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1);
  --vara-shadow-primary: 0 4px 14px rgba(124, 58, 237, 0.3);
  --vara-shadow-primary-lg: 0 6px 20px rgba(124, 58, 237, 0.4);
}

/* Skip to content link — accessibility */
.skip-link {
  position: fixed;
  top: -100%;
  left: 0;
  z-index: 100000;
  padding: 0.75rem 1.5rem;
  background: var(--vara-primary);
  color: var(--vara-white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--vara-radius) 0;
  line-height: 1.4;
}

.skip-link:focus {
  top: 0;
}

/* Minimal structural resets */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--vara-font-family);
  color: var(--vara-text);
  background: var(--vara-bg);
  line-height: 1.6;
}

/* Responsive media — scoped so icon SVGs stay visible (future-proof).
   `img/picture/video/canvas` keep block+responsive.
   `svg` keeps its intrinsic size and currentColor; icon SVGs in header/toggle
   get explicit sizing in screen.css so new SVGs don't need fixes. */
img,
picture,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  flex-shrink: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* WordPress Core Alignment Classes */
.alignleft {
  float: left;
  margin: 0.5rem 1.5rem 1.5rem 0;
}

.alignright {
  float: right;
  margin: 0.5rem 0 1.5rem 1.5rem;
}

.aligncenter {
  display: block;
  margin: 1.5rem auto;
  clear: both;
}

.alignnone {
  margin: 0.5rem 0 1.5rem 0;
}

/* Screen reader text */
.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 !important;
}

.screen-reader-text:focus {
  background-color: var(--vara-surface-container-low);
  border-radius: var(--vara-radius);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--vara-text);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}