/* =========================================================
   Villafana Painting LLC — Design System Tokens
   Foundation: colors + typography + spacing + radii
   ========================================================= */

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

/* -----------------------------
   1. Color tokens
   ----------------------------- */
:root {
  /* Brand & Accent */
  --color-primary:            #1a2d4a;
  --color-brand-red:          #a51e1e;
  --color-brand-navy:         #0f1e2d;
  --color-brand-blue:         #2d5a87;
  --color-brand-silver:       #8c9baa;
  --color-brand-steel:        #3c5a78;
  --color-brand-light-blue:   #dce8f0;
  --color-brand-crimson-light:#c94040;

  /* Surface */
  --color-canvas:             #f8f8f6;
  --color-surface-soft:       #eef1f5;
  --color-surface-card:       #e8ecf0;
  --color-surface-strong:     #d8dfe6;
  --color-surface-dark:       #0f1e2d;
  --color-surface-dark-elev:  #1a2d4a;
  --color-hairline:           #d8dfe6;

  /* Text */
  --color-ink:                #0f1e2d;
  --color-body-strong:        #1a2d4a;
  --color-body:               #2d3d50;
  --color-muted:              #5a6a7a;
  --color-muted-soft:         #8c9baa;
  --color-on-primary:         #ffffff;
  --color-on-dark:            #ffffff;

  /* Semantic */
  --color-success:            #22c55e;
  --color-warning:            #f59e0b;
  --color-error:              #ef4444;

  --font-display: "Plain Black", "Recoleta", "Söhne Breit", Inter,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --type-display-xl-size: 72px;  --type-display-xl-lh: 1.0;   --type-display-xl-tracking: -2.5px;
  --type-display-lg-size: 56px;  --type-display-lg-lh: 1.05;  --type-display-lg-tracking: -2px;
  --type-display-md-size: 40px;  --type-display-md-lh: 1.1;   --type-display-md-tracking: -1px;
  --type-display-sm-size: 32px;  --type-display-sm-lh: 1.15;  --type-display-sm-tracking: -0.5px;

  --type-title-lg-size: 24px;    --type-title-lg-lh: 1.3;     --type-title-lg-tracking: -0.3px;
  --type-title-md-size: 18px;    --type-title-md-lh: 1.4;     --type-title-md-tracking: 0;
  --type-title-sm-size: 16px;    --type-title-sm-lh: 1.4;     --type-title-sm-tracking: 0;

  --type-body-md-size:  16px;    --type-body-md-lh:  1.55;
  --type-body-sm-size:  14px;    --type-body-sm-lh:  1.55;
  --type-caption-size:  13px;    --type-caption-lh:  1.4;
  --type-caption-uc-size: 12px;  --type-caption-uc-lh: 1.4;   --type-caption-uc-tracking: 1.5px;
  --type-button-size:   14px;    --type-button-lh:   1.0;
  --type-nav-size:      14px;    --type-nav-lh:      1.4;

  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:     12px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section:96px;

  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  9999px;
  --radius-full:  9999px;

  --container-max: 1280px;
}

html, body {
  background: var(--color-canvas);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-xl, .display-lg, .display-md, .display-sm,
h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
  margin: 0;
}

.display-xl, h1.display { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-xl-tracking); }
.display-lg, h2.display { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-tracking); }
.display-md             { font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-tracking); }
.display-sm             { font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-lh); letter-spacing: var(--type-display-sm-tracking); }

h1, h2, h3, h4, h5, h6,
.title-lg, .title-md, .title-sm {
  font-family: var(--font-body);
  color: var(--color-ink);
  margin: 0;
}
.title-lg { font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-lh); letter-spacing: var(--type-title-lg-tracking); font-weight: 600; }
.title-md { font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh); font-weight: 600; }
.title-sm { font-size: var(--type-title-sm-size); line-height: var(--type-title-sm-lh); font-weight: 600; }

p, .body-md { font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: var(--color-body); }
.body-sm    { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--color-body); }
.body-strong { color: var(--color-body-strong); font-weight: 500; }
.muted       { color: var(--color-muted); }
.muted-soft  { color: var(--color-muted-soft); }

.caption          { font-size: var(--type-caption-size); line-height: var(--type-caption-lh); font-weight: 500; color: var(--color-muted); }
.caption-uppercase{
  font-size: var(--type-caption-uc-size);
  line-height: var(--type-caption-uc-lh);
  letter-spacing: var(--type-caption-uc-tracking);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
}

.text-link, a.text-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}