/* =====================================================================
   base.css
   - Resets
   - Global variables (phone defaults) + responsive overrides
   - Global background
====================================================================== */

/* [base.css] Reset */
html, body { margin: 0; padding: 0; }

/* [base.css] Global background via per-site variable */
body { background-color: var(--site-bg, #e9eef3); }

/* --- BASELINE (small phones) --- */
:root {
  --banner-h: 84px;
  --brand-left: 3%;
  --brand-gap: 10px;
  --brand-pad-bottom: 4px;
  --logo-max: 64px;
  --brand-font: clamp(1.35rem, 6.4vw, 1.95rem);
  --inner-pad-y: 0px;            /* vertical padding inside banner */
  --inner-pad-x: 0px;           /* horizontal padding inside banner */
  --banner-fade: 0.50;           /* image fade strength (0..1) */

  /* Shared action icon button theme (single source of truth) */
  --action-icon-edit-ring: color-mix(in srgb, var(--success, #37d38a) 78%, white 22%);
  --action-icon-delete-ring: color-mix(in srgb, var(--danger, #c0392b) 78%, white 22%);
  --action-icon-bg: color-mix(in srgb, var(--site-bg, #eaf1fa) 88%, white 12%);
  --action-icon-edit-fg: color-mix(in srgb, var(--site-text, #1f2d3d) 86%, black 14%);
  --action-icon-delete-fg: color-mix(in srgb, var(--danger, #c0392b) 88%, black 12%);
  --action-icon-warn-ring: color-mix(in srgb, #f59e0b 76%, white 24%);
  --action-icon-warn-fg: color-mix(in srgb, #b45309 86%, black 14%);
}

/* --- FLUID INTERPOLATION (<900): smooth scaling from small baseline to desktop baseline --- */
@media (max-width: 899px) {
  :root {
    --banner-h: clamp(84px, 16vw, 148px);
    --brand-left: 4%;
    --brand-gap: clamp(10px, 1.8vw, 16px);
    --brand-pad-bottom: clamp(4px, 1.7vw, 16px);
    --logo-max: clamp(64px, 15vw, 136px);
    --brand-font: clamp(1.35rem, 5.4vw, 3.1rem);
    --inner-pad-y: clamp(0px, 1.3vw, 12px);
    --inner-pad-x: clamp(0px, 1.3vw, 12px);
  }
}

/* --- DESKTOP/LARGE (>=900) keep established baseline --- */
@media (min-width: 900px) {
  :root {
    --banner-h: 160px;
    --brand-pad-bottom: 20px;
    --logo-max: 150px;
    --brand-font: 3.5rem;
    --inner-pad-y: 16px;
    --inner-pad-x: 16px;
  }
}