/* ASVELIS Design System — Colors & Type
 * --------------------------------------
 * Pet relocation & veterinary services (Hanoi, Vietnam).
 * Primary palette: deep cobalt blue + lively grass green.
 * Typography: Be Vietnam Pro (Google Fonts).
 */

/* ---------- Font faces (self-hosted) ---------- */
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Be Vietnam Pro";
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/BeVietnamPro-Bold.ttf") format("truetype");
}
/* Note: 800 (ExtraBold) is not shipped — Bold (700) is used as a synthetic fallback
   via the weight range above. If true ExtraBold is required, add BeVietnamPro-ExtraBold.ttf. */

:root {
  /* ============== BRAND COLORS ============== */
  /* Sampled directly from the official logo. */
  --asv-blue:           #064B99;  /* primary — dog silhouette, "PET RELOCATION" text */
  --asv-blue-600:       #0A56AC;
  --asv-blue-500:       #1668C4;
  --asv-blue-400:       #4A8AD6;
  --asv-blue-300:       #82AEE3;
  --asv-blue-200:       #BFD3EF;
  --asv-blue-100:       #E3ECF8;
  --asv-blue-50:        #F2F6FC;
  --asv-blue-900:       #042E5E;  /* darkest — hover, deep ink */
  --asv-blue-950:       #02224A;
  --asv-blue-ink:       #021A3A;  /* deep background blue — used in dark section backgrounds */

  --asv-green:          #6DC12C;  /* primary accent — cat silhouette, "ASVELIS" text */
  --asv-green-600:      #5FAD24;
  --asv-green-500:      #79C740;
  --asv-green-400:      #95D269;
  --asv-green-300:      #B6DF94;
  --asv-green-200:      #D4ECBE;
  --asv-green-100:      #ECF7DE;
  --asv-green-50:       #F6FBED;
  --asv-green-900:      #3F7314;
  --asv-green-950:      #2A4E0C;

  /* ============== NEUTRALS ============== */
  --asv-ink:            #0F1A2E;  /* near-black, blue-tinted */
  --asv-graphite:       #2A3548;
  --asv-slate:          #4B5668;
  --asv-mute:           #6E7889;
  --asv-quiet:          #9BA3B2;
  --asv-line:           #DCE1E9;  /* dividers, hairline borders */
  --asv-line-soft:      #ECEFF4;
  --asv-paper:          #F6F8FB;  /* page background */
  --asv-card:           #FFFFFF;
  --asv-white:          #FFFFFF;

  /* ============== SEMANTIC ============== */
  --asv-success:        var(--asv-green-600);
  --asv-success-bg:     var(--asv-green-100);
  --asv-warning:        #E5A126;
  --asv-warning-bg:     #FBEFCF;
  --asv-danger:         #D14343;
  --asv-danger-bg:      #FBE3E3;
  --asv-info:           var(--asv-blue-500);
  --asv-info-bg:        var(--asv-blue-100);

  /* ============== FOREGROUND / BACKGROUND ============== */
  --fg-1:               var(--asv-ink);       /* primary text */
  --fg-2:               var(--asv-graphite);  /* secondary text */
  --fg-3:               var(--asv-slate);     /* tertiary / metadata */
  --fg-4:               var(--asv-mute);      /* placeholder / labels */
  --fg-quiet:           var(--asv-quiet);     /* disabled */
  --fg-on-blue:         #FFFFFF;
  --fg-on-green:        #FFFFFF;
  --fg-link:            var(--asv-blue);

  --bg-1:               var(--asv-card);
  --bg-2:               var(--asv-card);
  --bg-tinted-blue:     var(--asv-blue-50);
  --bg-tinted-green:    var(--asv-green-50);

  --border:             var(--asv-line);
  --border-soft:        var(--asv-line-soft);
  --border-strong:      var(--asv-graphite);

  /* ============== TYPOGRAPHY ============== */
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Type ramp — tuned for marketing + dashboard duality */
  --t-display-xl: 700 64px/1.05 var(--font-display);   /* hero */
  --t-display-l:  700 48px/1.08 var(--font-display);   /* page hero */
  --t-display-m:  700 36px/1.15 var(--font-display);   /* section */
  --t-h1:         700 32px/1.2  var(--font-display);
  --t-h2:         600 24px/1.25 var(--font-display);
  --t-h3:         600 20px/1.3  var(--font-display);
  --t-h4:         600 17px/1.35 var(--font-sans);
  --t-body-l:     400 18px/1.55 var(--font-sans);
  --t-body:       400 16px/1.55 var(--font-sans);
  --t-body-s:     400 14px/1.5  var(--font-sans);
  --t-caption:    500 13px/1.4  var(--font-sans);
  --t-overline:   600 12px/1.2  var(--font-sans);     /* uppercase eyebrow */
  --t-button:     600 15px/1    var(--font-sans);
  --t-code:       500 13px/1.5  var(--font-mono);

  /* Letter-spacing tokens */
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-overline: 0.12em;   /* used with --t-overline + uppercase */

  /* ============== SPACING ============== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ============== RADII ============== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-content-card: 20px;

  /* ============== ELEVATION ============== */
  --shadow-xs:  0 1px 2px rgba(6, 75, 153, 0.06);
  --shadow-sm:  0 2px 6px rgba(6, 75, 153, 0.08), 0 1px 2px rgba(6, 75, 153, 0.05);
  --shadow-md:  0 8px 20px rgba(6, 75, 153, 0.10), 0 2px 6px rgba(6, 75, 153, 0.06);
  --shadow-lg:  0 20px 40px rgba(6, 75, 153, 0.14), 0 6px 14px rgba(6, 75, 153, 0.06);
  --shadow-xl:  0 32px 64px rgba(6, 75, 153, 0.18);
  --ring-focus: 0 0 0 3px rgba(109, 193, 44, 0.35);     /* green focus ring */
  --ring-blue:  0 0 0 3px rgba(6, 75, 153, 0.20);

  /* ============== CONTENT CARD SYSTEM ============== */
  --content-card-border-width: 1.5px;
  --content-card-shadow-rest: 0 4px 10px rgba(0, 0, 0, 0.02);
  --content-card-shadow-hover: 0 12px 24px rgba(2, 34, 74, 0.06);
  --content-card-hover-transform: translateY(-4px);
  --content-card-blue-surface-rest: rgba(6, 75, 153, 0.03);
  --content-card-blue-surface-hover: rgba(6, 75, 153, 0.06);
  --content-card-blue-border-rest: rgba(6, 75, 153, 0.1);
  --content-card-blue-border-hover: var(--asv-blue);
  --content-card-blue-shadow-hover: 0 12px 24px rgba(6, 75, 153, 0.06);
  --content-card-green-surface-rest: rgba(109, 193, 44, 0.03);
  --content-card-green-surface-hover: rgba(109, 193, 44, 0.06);
  --content-card-green-border-rest: rgba(109, 193, 44, 0.1);
  --content-card-green-border-hover: var(--asv-green);
  --content-card-green-shadow-hover: 0 12px 24px rgba(109, 193, 44, 0.06);
  --content-card-white-surface-rest: var(--asv-card);
  --content-card-white-surface-hover: var(--asv-card);
  --content-card-white-border-rest: var(--border-soft);
  --content-card-white-border-hover: var(--border-soft);
  --content-card-dark-surface-rest: rgba(255, 255, 255, 0.04);
  --content-card-dark-surface-hover: rgba(255, 255, 255, 0.08);
  --content-card-dark-border-rest: rgba(255, 255, 255, 0.1);
  --content-card-dark-border-hover: rgba(255, 255, 255, 0.3);
  --content-card-dark-shadow-rest: none;
  --content-card-dark-shadow-hover: 0 12px 24px rgba(0, 0, 0, 0.2);

  /* ============== MOTION ============== */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-quick: 120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;
  --dur-page:  520ms;
}

/* ---------- Semantic element styles ---------- */
html, body { background: var(--bg-1); color: var(--fg-1); font: var(--t-body); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

h1 { font: var(--t-h1); letter-spacing: var(--tracking-tight); color: var(--asv-blue); margin: 0; }
h2 { font: var(--t-h2); letter-spacing: var(--tracking-snug); color: var(--asv-blue); margin: 0; }
h3 { font: var(--t-h3); letter-spacing: var(--tracking-snug); color: var(--asv-blue); margin: 0; }
h4 { font: var(--t-h4); color: var(--fg-1); margin: 0; }
p  { font: var(--t-body); color: var(--fg-2); margin: 0; }
small { font: var(--t-body-s); color: var(--fg-3); }
a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-quick) var(--ease-out); }
a:hover { color: var(--asv-blue-900); }
code, pre { font: var(--t-code); }
.overline { font: var(--t-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--asv-blue); }
.display-xl { font: var(--t-display-xl); letter-spacing: var(--tracking-tight); }
.display-l  { font: var(--t-display-l);  letter-spacing: var(--tracking-tight); }
.display-m  { font: var(--t-display-m);  letter-spacing: var(--tracking-snug); }

/* Accent classes for brand wordmark feel */
.asv-green-word { color: var(--asv-green); }
.asv-blue-word  { color: var(--asv-blue); }