/**
 * AUTOMIFYA 2.0 — Base Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Modern CSS reset, body defaults, typography, and utility classes.
 * Imports tokens.css — never define raw values here.
 *
 * Load order:  1. tokens.css  →  2. base.css  →  3. components.css  →  page CSS
 * ─────────────────────────────────────────────────────────────────────────────
 */

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


/* ─── RESET ─────────────────────────────────────────────────────────────────
   Modern minimal reset — opinionated defaults without normalizing everything.
   ─────────────────────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Images & media */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Prevent textarea resize from breaking layouts */
textarea {
  resize: vertical;
}

/* Remove default list styles where needed (use .list-unstyled) */
/* Lists keep default styles unless class applied */

/* Remove default button appearance */
button {
  border: none;
  background: none;
  cursor: pointer;
}

/* Remove default anchor styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Ensure block-level elements render correctly */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Hidden elements */
[hidden] { display: none !important; }


/* ─── TYPOGRAPHY DEFAULTS ───────────────────────────────────────────────────
   Applied to flowing content — not UI components.
   ─────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
}

h1 { font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl)); }
h2 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h3 { font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-semi); }
h6 { font-size: var(--text-base); font-weight: var(--fw-semi); }

p {
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  max-width: 65ch; /* Optimal line length */
}

/* Override max-width for UI paragraphs */
p.full-width { max-width: none; }

a:not([class]) {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--t-fast);
}

a:not([class]):hover { opacity: 0.75; }

strong, b { font-weight: var(--fw-semi); color: var(--color-text); }

em, i { font-style: italic; }

small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--color-bg-3);
  color: var(--color-accent-cyan);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

pre {
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

blockquote {
  border-left: 3px solid var(--color-grad-1);
  padding-left: var(--space-6);
  color: var(--color-text-2);
  font-size: var(--text-lg);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-12) 0;
}

/* Selection color */
::selection {
  background: rgba(240, 98, 42, 0.25);
  color: var(--color-text);
}

/* Focus outline — accessible, on-brand */
:focus-visible {
  outline: 2px solid var(--color-grad-1);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* ─── SCROLLBAR ─────────────────────────────────────────────────────────────
   Subtle custom scrollbar — Webkit only.
   ─────────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-2);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-2);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-bg-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-3);
}


/* ─── LAYOUT UTILITIES ──────────────────────────────────────────────────────
   Container system and layout primitives.
   ─────────────────────────────────────────────────────────────────────────── */

/* Primary container */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* Narrow content container (articles, forms) */
.container-narrow {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* Wide container */
.container-wide {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* Section wrapper — provides vertical padding */
.section {
  padding-block: var(--section-padding-y);
}

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

/* Flex utilities */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.justify-center { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

/* Grid utilities */
.grid        { display: grid; }
.grid-2      { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3      { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4      { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-auto   { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }


/* ─── SPACING UTILITIES ─────────────────────────────────────────────────────
   Margin and padding shorthands.
   ─────────────────────────────────────────────────────────────────────────── */

.mt-2  { margin-top: var(--space-2);  }
.mt-4  { margin-top: var(--space-4);  }
.mt-6  { margin-top: var(--space-6);  }
.mt-8  { margin-top: var(--space-8);  }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-2  { margin-bottom: var(--space-2);  }
.mb-4  { margin-bottom: var(--space-4);  }
.mb-6  { margin-bottom: var(--space-6);  }
.mb-8  { margin-bottom: var(--space-8);  }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

.mx-auto { margin-inline: auto; }


/* ─── TYPOGRAPHY UTILITIES ──────────────────────────────────────────────────
   Applied via class — no raw values.
   ─────────────────────────────────────────────────────────────────────────── */

/* Text sizes */
.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg);   }
.text-xl   { font-size: var(--text-xl);   }
.text-2xl  { font-size: var(--text-2xl);  }
.text-3xl  { font-size: var(--text-3xl);  }
.text-4xl  { font-size: var(--text-4xl);  }

/* Font weights */
.fw-light  { font-weight: var(--fw-light);  }
.fw-normal { font-weight: var(--fw-normal); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semi   { font-weight: var(--fw-semi);   }
.fw-bold   { font-weight: var(--fw-bold);   }
.fw-black  { font-weight: var(--fw-black);  }

/* Text colors */
.text-primary  { color: var(--color-text);   }
.text-secondary { color: var(--color-text-2); }
.text-muted    { color: var(--color-text-3); }
.text-success  { color: var(--color-success); }
.text-error    { color: var(--color-error);   }

/* Alignment */
.text-left   { text-align: left;   }
.text-center { text-align: center; }
.text-right  { text-align: right;  }

/* Text transform */
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-label); }
.capitalize { text-transform: capitalize; }

/* Gradient text — key brand utility */
.grad-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Line clamp utilities */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ─── VISIBILITY UTILITIES ──────────────────────────────────────────────────
   Show/hide across breakpoints and states.
   ─────────────────────────────────────────────────────────────────────────── */

.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;
}

.hidden      { display: none !important; }
.visible     { visibility: visible; }
.invisible   { visibility: hidden; }
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* Responsive visibility */
@media (max-width: 767px) {
  .hide-mobile  { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}


/* ─── DISPLAY UTILITIES ─────────────────────────────────────────────────────
   ─────────────────────────────────────────────────────────────────────────── */

.block         { display: block; }
.inline        { display: inline; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }

/* Position */
.relative      { position: relative; }
.absolute      { position: absolute; }
.fixed         { position: fixed; }
.sticky        { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }
.min-w-0 { min-width: 0; }


/* ─── GRADIENT BORDER UTILITY ───────────────────────────────────────────────
   Creates a gradient border using background-clip trick.
   ─────────────────────────────────────────────────────────────────────────── */

.grad-border {
  position: relative;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
}

.grad-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-brand);
  z-index: var(--z-below);
  opacity: 0.4;
  transition: opacity var(--t-base);
}

.grad-border:hover::before {
  opacity: 0.8;
}


/* ─── PRINT STYLES ──────────────────────────────────────────────────────────
   Hide non-essential UI elements when printing.
   ─────────────────────────────────────────────────────────────────────────── */

@media print {
  .nav,
  .footer,
  .mifya-widget,
  .cookie-banner,
  .ad-slot {
    display: none !important;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }
}