/*
 * grafo74 — Modern UI Phase 1: Design System
 * Central, non-destructive visual tokens and shared component foundations.
 * Version: var.3 grafo74
 */

:root {
  color-scheme: light;

  /* Typography */
  --ds-font-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
  --ds-font-serif: Georgia, "Times New Roman", serif;
  --ds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-md: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --ds-text-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --ds-leading-tight: 1.2;
  --ds-leading-normal: 1.55;

  /* Neutral palette */
  --ds-color-bg: #f7f8fa;
  --ds-color-surface: #ffffff;
  --ds-color-surface-muted: #f1f3f6;
  --ds-color-text: #20242a;
  --ds-color-text-muted: #626b76;
  --ds-color-border: #d9dee5;
  --ds-color-border-strong: #b9c1cc;

  /* Brand and semantic palette */
  --ds-color-primary: #1d5b8f;
  --ds-color-primary-hover: #174a74;
  --ds-color-primary-soft: #e9f2f9;
  --ds-color-accent: #9b6b2f;
  --ds-color-success: #27734f;
  --ds-color-warning: #986b16;
  --ds-color-danger: #a53a3a;
  --ds-color-focus: #176fbd;

  /* Spacing: 4/8 px scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-7: 3rem;
  --ds-space-8: 4rem;

  /* Shape */
  --ds-radius-sm: 0.375rem;
  --ds-radius-md: 0.625rem;
  --ds-radius-lg: 1rem;
  --ds-radius-pill: 999px;

  /* Elevation */
  --ds-shadow-sm: 0 1px 2px rgba(21, 32, 43, 0.08);
  --ds-shadow-md: 0 8px 24px rgba(21, 32, 43, 0.10);
  --ds-shadow-lg: 0 18px 48px rgba(21, 32, 43, 0.14);

  /* Motion */
  --ds-duration-fast: 140ms;
  --ds-duration-normal: 220ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --ds-container: 1200px;
  --ds-page-gutter: clamp(1rem, 3vw, 2rem);
}

html {
  accent-color: var(--ds-color-primary);
  scroll-behavior: smooth;
}

body {
  background-color: var(--ds-color-bg);
  color: var(--ds-color-text);
  font-family: var(--ds-font-sans);
  line-height: var(--ds-leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--ds-color-primary-soft);
  color: var(--ds-color-text);
}

a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color var(--ds-duration-fast) var(--ds-ease-standard),
              background-color var(--ds-duration-fast) var(--ds-ease-standard),
              border-color var(--ds-duration-fast) var(--ds-ease-standard),
              opacity var(--ds-duration-fast) var(--ds-ease-standard),
              transform var(--ds-duration-fast) var(--ds-ease-standard);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ds-color-focus);
  outline-offset: 3px;
}

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

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
.main-block__button {
  border-radius: var(--ds-radius-md);
  transition: color var(--ds-duration-fast) var(--ds-ease-standard),
              background-color var(--ds-duration-fast) var(--ds-ease-standard),
              border-color var(--ds-duration-fast) var(--ds-ease-standard),
              box-shadow var(--ds-duration-fast) var(--ds-ease-standard),
              transform var(--ds-duration-fast) var(--ds-ease-standard);
}

button:not(:disabled),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled) {
  cursor: pointer;
}

button:not(:disabled):active,
input[type="button"]:not(:disabled):active,
input[type="submit"]:not(:disabled):active,
input[type="reset"]:not(:disabled):active,
.button:active,
.btn:active,
.main-block__button:active {
  transform: translateY(1px);
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  border-color: var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background-color: var(--ds-color-surface);
  color: var(--ds-color-text);
  transition: border-color var(--ds-duration-fast) var(--ds-ease-standard),
              box-shadow var(--ds-duration-fast) var(--ds-ease-standard),
              background-color var(--ds-duration-fast) var(--ds-ease-standard);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
select:hover,
textarea:hover {
  border-color: var(--ds-color-border-strong);
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--ds-color-border);
}

/* Shared site chrome */
.header {
  background-color: color-mix(in srgb, var(--ds-color-surface) 94%, transparent);
  border-bottom: 1px solid var(--ds-color-border);
  box-shadow: var(--ds-shadow-sm);
}

.header__container,
._container {
  max-width: var(--ds-container);
}

.header__logo,
.topnav a,
.dropbtn {
  border-radius: var(--ds-radius-sm);
}

.topnav a:hover,
.topnav a:focus-visible,
.dropdown:hover .dropbtn,
.dropbtn:focus-visible {
  background-color: var(--ds-color-primary-soft);
  color: var(--ds-color-primary-hover);
}

.dropdown-content {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-md);
  overflow: hidden;
}

/* Shared content surfaces. Existing dimensions remain untouched. */
.card,
.news__item,
.categories__item,
.products__item,
.services__item,
[class*="__card"] {
  border-radius: var(--ds-radius-lg);
}

.title,
h1,
h2,
h3 {
  line-height: var(--ds-leading-tight);
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* Back-to-top control */
#upbutton {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-md);
}

#upbutton:hover,
#upbutton:focus-visible {
  border-color: var(--ds-color-primary);
  box-shadow: var(--ds-shadow-lg);
}

/* Utility classes for future phases and gradual migration */
.ds-container {
  width: min(100% - (2 * var(--ds-page-gutter)), var(--ds-container));
  margin-inline: auto;
}

.ds-surface {
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface);
  box-shadow: var(--ds-shadow-sm);
}

.ds-muted { color: var(--ds-color-text-muted); }
.ds-stack > * + * { margin-top: var(--ds-space-4); }

@media (max-width: 767px) {
  :root {
    --ds-page-gutter: 1rem;
  }

  .dropdown-content {
    border-radius: var(--ds-radius-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid CanvasText;
  }
}