/* =============================================================================
 * design-system.css — medinaproperti.com
 * UI/UX Phase 02 — Global Design System (tokens + reusable foundation)
 * -----------------------------------------------------------------------------
 * PURPOSE
 *   Establish one source of truth for colors, typography, layout, and component
 *   values as CSS custom properties, plus a small set of OPT-IN, namespaced
 *   (.ds-*) reusable classes that later phases (03–08) apply deliberately.
 *
 * PHASE-02 GROUND RULES (intentional):
 *   - Tokens only + opt-in .ds-* helpers. This file does NOT restyle any bare
 *     element (body / a / p / h1 / input / button …), so it produces essentially
 *     no visual change on its own — every existing template renders as before.
 *   - No template redesign, no header/footer/hamburger/portfolio/contact/spacing
 *     fixes here; those belong to their assigned phases.
 *   - Values are drawn from the archive's own dominant styles so applying them
 *     later keeps the brand identity.
 *   - No @import, no external font/library/framework, no WP/Elementor runtime
 *     dependency. Loaded LAST so the variables are available everywhere and so
 *     later-phase rules can override safely.
 *   - Body font size stays 14px this phase (per approval); heading sizes are
 *     defined as tokens but NOT force-applied — title corrections happen per
 *     template in later phases.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. TOKENS
 * ------------------------------------------------------------------------- */
:root {
  /* --- Colors: brand (from the existing palette, unchanged) --- */
  --color-primary:        #61CE70;   /* green — primary actions            */
  --color-primary-hover:  #4bb95c;   /* darker green for hover/active      */
  --color-dark-teal:      #033537;   /* dark teal — headings / dark bands  */
  --color-accent:         #FFCE47;   /* gold-yellow — highlight CTA        */
  --color-accent-hover:   #f0bd2e;

  /* --- Colors: text --- */
  --color-text:           #4A4A4A;   /* body — already universal on site   */
  --color-heading:        #033537;   /* headings                           */
  --color-muted:          #6E7A7A;   /* secondary / meta text              */

  /* --- Colors: surfaces & lines --- */
  --color-bg:             #FFFFFF;   /* page background                    */
  --color-surface:        #F6F8F8;   /* cards / raised blocks              */
  --color-border:         #E2E7E7;   /* hairline borders / dividers        */

  /* --- Colors: interaction & state --- */
  --color-focus:          #1a73c4;   /* keyboard focus ring                */
  --color-error:          #d63638;   /* error / invalid                    */
  --color-error-bg:       #fce4e4;
  --color-success:        #1e8e3e;   /* success / valid                    */
  --color-success-bg:     #e5f4ea;
  --color-link:           #1a73c4;   /* default link (opt-in via .ds-*)    */
  --color-link-hover:     #033537;

  /* --- Typography --- */
  --font-base: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-body:        14px;   /* fixed at 14px this phase                    */
  --fs-small:       12px;   /* captions / meta                            */
  --fs-caption:     11px;
  --lh-body:        1.7;    /* body line height                           */
  --lh-heading:     1.25;   /* heading line height                        */
  --para-space:     1em;    /* space between paragraphs                   */

  /* Heading weights */
  --fw-normal:      400;
  --fw-medium:      600;
  --fw-bold:        700;
  --fw-heading:     700;

  /* Responsive heading RANGES (tokens only — NOT applied globally this phase).
   * Later phases apply these per template where a title needs correcting;
   * intentional hero / page-title sizing is preserved. */
  --fs-h1:  clamp(28px, 2.2vw + 16px, 40px);
  --fs-h2:  clamp(22px, 1.4vw + 14px, 30px);
  --fs-h3:  clamp(18px, 0.8vw + 13px, 22px);
  --fs-h4:  clamp(16px, 0.4vw + 13px, 18px);
  --fs-hero: clamp(34px, 4vw + 12px, 60px);  /* preserves the 60px home hero */

  /* --- Layout --- */
  --container-width:       1200px;  /* primary max content width (token;
                                       not force-applied to Elementor yet)  */
  --container-narrow:      760px;   /* reading width for article body       */
  --container-pad:         20px;    /* horizontal page padding (desktop)    */
  --container-pad-mobile:  16px;    /* safe mobile side padding             */

  --section-space:         64px;    /* vertical rhythm between sections     */
  --section-space-sm:      40px;
  --section-space-lg:      96px;
  --grid-gap:              24px;    /* default gap for card grids           */
  --grid-gap-sm:           16px;

  --header-height:         80px;    /* single target header height          */

  /* --- Components --- */
  --btn-pad:            12px 28px;
  --btn-height:         44px;
  --btn-fs:             14px;
  --radius-small:       4px;        /* single corner radius; retires 0/3    */
  --radius-pill:        999px;
  --field-height:       44px;
  --field-pad:          10px 14px;
  --card-pad:           24px;
  --focus-outline:      2px solid var(--color-focus);
  --focus-offset:       2px;
  --shadow-card:        0 2px 8px rgba(3, 53, 55, 0.08);  /* used sparingly */
  --shadow-raised:      0 4px 16px rgba(3, 53, 55, 0.10);
  --transition:         0.2s ease;

  /* Breakpoints — documented for reference (custom properties can't be used
   * inside @media queries, so the .ds-* media rules below hard-code these):
   *   mobile  : max-width 767px
   *   tablet  : 768px – 1024px
   *   desktop : min-width 1025px                                           */
}

/* ---------------------------------------------------------------------------
 * 2. SAFE GLOBAL FOUNDATION
 *    The ONLY global rules in this file. Both are additive and produce no
 *    layout/visual regression on existing content.
 * ------------------------------------------------------------------------- */

/* Keyboard focus visibility (accessibility). Appears only on keyboard nav,
 * never on mouse click, so it does not alter the visual design. */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Text-selection tint in the brand color — cosmetic, no layout impact. */
::selection {
  background: rgba(97, 206, 112, 0.25);
}

/* ---------------------------------------------------------------------------
 * 3. OPT-IN REUSABLE CLASSES (.ds-*)
 *    These render nothing until a later phase adds the class to markup. They
 *    are the reusable foundation the header/footer/component phases build on.
 *    Namespaced so they never collide with Elementor/OceanWP selectors.
 * ------------------------------------------------------------------------- */

/* Containers */
.ds-container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.ds-container--narrow {
  max-width: var(--container-narrow);
}
@media (max-width: 767px) {
  .ds-container {
    padding-inline: var(--container-pad-mobile);
  }
}

/* Section vertical rhythm */
.ds-section    { padding-block: var(--section-space); }
.ds-section--sm { padding-block: var(--section-space-sm); }
.ds-section--lg { padding-block: var(--section-space-lg); }

/* Buttons — one base + variants */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-height);
  padding: var(--btn-pad);
  font-family: var(--font-base);
  font-size: var(--btn-fs);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.ds-btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.ds-btn--primary:hover { background: var(--color-primary-hover); }
.ds-btn--accent {
  background: var(--color-accent);
  color: var(--color-dark-teal);
}
.ds-btn--accent:hover { background: var(--color-accent-hover); }
.ds-btn--dark {
  background: var(--color-dark-teal);
  color: #fff;
}
.ds-btn--outline {
  background: transparent;
  color: var(--color-dark-teal);
  border-color: var(--color-border);
}
.ds-btn--outline:hover { border-color: var(--color-dark-teal); }

/* Form fields */
.ds-field {
  width: 100%;
  min-height: var(--field-height);
  padding: var(--field-pad);
  font-family: var(--font-base);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ds-field:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(97, 206, 112, 0.18);
}
.ds-field--error { border-color: var(--color-error); }
.ds-field--error:focus { box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.18); }

/* Card */
.ds-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--card-pad);
}
.ds-card--raised {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}

/* Simple grid helper */
.ds-grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Typography helpers (opt-in — do NOT change existing headings) */
.ds-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-heading); color: var(--color-heading); }
.ds-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-heading); color: var(--color-heading); }
.ds-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: var(--fw-medium); color: var(--color-heading); }
.ds-muted { color: var(--color-muted); }
.ds-small { font-size: var(--fs-small); }
.ds-caption { font-size: var(--fs-caption); color: var(--color-muted); }

/* State messages (for form-handler feedback in later phases) */
.ds-alert { padding: 12px 16px; border-radius: var(--radius-small); font-size: var(--fs-body); }
.ds-alert--error   { color: var(--color-error);   background: var(--color-error-bg); }
.ds-alert--success { color: var(--color-success); background: var(--color-success-bg); }

/* Visually-hidden (accessible labels for later phases) */
.ds-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}