/*
  VIVIDEAR Base Styles
  Design tokens, reset rules, typography, layout primitives, and accessibility helpers.
*/

:root {
  /* Palette tokens */
  --color-blue-500: #3D7EFF;
  --color-blue-600: #2E69E8;
  --color-blue-50: #EAF1FF;
  --color-navy-900: #17324D;
  --color-navy-950: #10273D;
  --color-teal-500: #3DB9A6;
  --color-teal-300: #56D7D1;
  --color-teal-50: #EAF9F6;
  --color-gold-500: #F4B942;
  --color-gold-50: #FFF4D8;
  --color-coral-500: #F26A5A;
  --color-orange-500: #F59E0B;
  --color-purple-500: #7A5AF8;
  --color-white: #FFFFFF;
  --color-neutral-50: #FAF8F4;
  --color-neutral-100: #EEF2F5;
  --color-neutral-200: #E4E8ED;
  --color-neutral-500: #8B97A6;
  --color-neutral-700: #66758A;
  --color-neutral-900: #223143;

  /* Semantic color tokens */
  --color-brand-primary: var(--color-blue-500);
  --color-brand-primary-hover: var(--color-blue-600);
  --color-brand-secondary: var(--color-teal-500);
  --color-brand-accent: var(--color-teal-300);
  --color-surface: var(--color-white);
  --color-surface-soft: var(--color-neutral-50);
  --color-surface-muted: var(--color-blue-50);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-700);
  --color-text-soft: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-divider: var(--color-neutral-100);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-danger: var(--color-coral-500);
  --color-focus-ring: rgba(61, 126, 255, .38);

  /* Typography tokens */
  --font-fallback: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", var(--font-fallback);
  --font-heading: "Outfit", var(--font-fallback);
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 24px;
  --font-size-2xl: 28px;
  --font-size-3xl: 40px;
  --font-size-4xl: 48px;
  --font-size-hero: 72px;
  --line-height-tight: 1.1;
  --line-height-heading: 1.16;
  --line-height-body: 1.66;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Spacing tokens */
  --space-0: 0;
  --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-30: 120px;
  --section-space: 120px;
  --section-space-sm: 64px;
  --section-space-mobile: 80px;
  --container-padding-desktop: 40px;
  --container-padding-tablet: 40px;
  --container-padding-mobile: 20px;

  /* Container tokens */
  --container-width: 1320px;
  --container-narrow: 960px;
  --max-page-width: 1440px;

  /* Radius tokens */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
  --radius-2xl: 48px;
  --radius-card: var(--radius-xl);
  --radius-section: 56px;
  --radius-button: 18px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadow tokens */
  --shadow-xs: 0 2px 10px rgba(0, 0, 0, .035);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, .04);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, .08);
  --shadow-lg: 0 20px 80px rgba(0, 0, 0, .12);
  --shadow-card: var(--shadow-sm);
  --shadow-floating: var(--shadow-md);
  --shadow-section: var(--shadow-lg);

  /* Border tokens */
  --border-width: 1px;
  --border-width-strong: 2px;
  --border-color: var(--color-border);
  --border-soft: rgba(228, 232, 237, .78);

  /* Transition tokens */
  --ease-standard: ease;
  --transition-fast: .2s var(--ease-standard);
  --transition-base: .22s var(--ease-standard);
  --transition-slow: .3s var(--ease-standard);

  /* Z-index tokens */
  --z-base: 1;
  --z-dropdown: 20;
  --z-sticky: 100;
  --z-overlay: calc(var(--z-modal) - 1);
  --z-modal: 1000;

  /* Focus tokens */
  --focus-ring: 3px solid var(--color-focus-ring);
  --focus-offset: 4px;

  /* Legacy aliases retained for the current static prototype and future theme migration. */
  --primary-blue: var(--color-brand-primary);
  --blue-hover: var(--color-brand-primary-hover);
  --blue-light: var(--color-blue-50);
  --deep-navy: var(--color-navy-900);
  --navy-hover: var(--color-navy-950);
  --soft-teal: var(--color-brand-secondary);
  --teal-light: var(--color-teal-50);
  --gold-accent: var(--color-gold-500);
  --gold-light: var(--color-gold-50);
  --warm-bg: var(--color-surface-soft);
  --white: var(--color-white);
  --border: var(--color-border);
  --divider: var(--color-divider);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --muted-text: var(--color-text-soft);
  --coral: var(--color-danger);
  --orange: var(--color-warning);
  --purple: var(--color-purple-500);
  --aqua: var(--color-brand-accent);
  --container: var(--container-width);
  --max-page: var(--max-page-width);
  --pad-desktop: var(--container-padding-desktop);
  --pad-tablet: var(--container-padding-tablet);
  --pad-mobile: var(--container-padding-mobile);
  --radius-xxl: var(--radius-2xl);
  --radius-hero: var(--radius-section);
}

/*
Breakpoints:

* mobile: 640px
* tablet: 768px
* laptop: 1024px
* desktop: 1200px
* wide: 1440px
*/

/* Reset and document defaults */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-primary);
  background: var(--warm-bg);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
}

html[lang="fa"],
html[lang="ar"] {
  /*
    Future Persian/Arabic font integration can override these variables
    without changing component or template CSS.
  */
  --font-body: var(--font-fallback);
  --font-heading: var(--font-fallback);
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(100% - 80px, var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space);
}

.section-tight {
  padding-block: var(--section-space-sm);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--deep-navy);
  font-family: var(--font-heading);
  letter-spacing: 0;
}

h1 {
  font-size: clamp(56px, 5vw, var(--font-size-hero));
  line-height: 1.11;
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: clamp(var(--font-size-3xl), 3.6vw, var(--font-size-4xl));
  line-height: 1.16;
  font-weight: var(--font-weight-bold);
}

h3 {
  font-size: var(--font-size-2xl);
  line-height: 1.25;
  font-weight: var(--font-weight-semibold);
}

p {
  margin: 0;
  color: var(--text-secondary);
}



/* Focus and accessibility */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Direction and language readiness */
html[dir="rtl"] {
  direction: rtl;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}