/* Plug & Play — CSS Custom Properties
   This file contains ONLY :root variables and html/body base reset.
   No component styles go here. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');

:root {
  /* Colors */
  --color-primary:     #1a1a1a;
  --color-secondary:   #2a2a2a;
  --color-gray-mid:    #888780;
  --color-cream:       #F4F0E6;
  --color-accent:      #F5C518;
  --color-accent-dark: #C9A000;
  --color-footer:      #111111;
  --color-error:       #E24B4A;
  --color-success-bg:  #EAF3DE;
  --color-error-bg:    #FCEBEB;
  --color-success:    #2d6a2d;

  /* Typography */
  --font-heading: 'Oswald', sans-serif;
  --font-body:    'Arial', sans-serif;

  /* Spacing */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  48px;
  --spacing-xl:  96px;
  --spacing-xxl: 160px;

  /* Layout */
  --max-width:     1200px;
  --border-radius: 4px;
  --transition:    0.2s ease-in-out;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { direction: rtl; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-cream);
  background-color: var(--color-primary);
  background-image: url('../assets/images/texture.png');
  background-repeat: repeat;
  background-size: 260px 180px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-heading); border: none; background: none; }

/* Focus visible — accessibility */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }