/* HouseAccount design system — tokens, fonts, and typography utilities.
 * Ported verbatim from docs/design-system/SOURCE.md §1. Component classes live
 * in houseaccount_components.css. Font src uses bare filenames so Propshaft
 * rewrites them to digested asset paths at compile time. */

/* Circular XX (Lineto) — licensed webfont, staged in app/assets/fonts */
@font-face {
  font-family: 'Circular XX';
  src: url("/assets/CircularXXSub-Book-236ae766.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular XX';
  src: url("/assets/CircularXXSub-BookItalic-51f46493.woff2") format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Circular XX';
  src: url("/assets/CircularXXSub-Medium-09062ed2.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular XX';
  src: url("/assets/CircularXXSub-MediumItalic-ed5039b2.woff2") format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Circular XX';
  src: url("/assets/CircularXXSub-Bold-5d023273.woff2") format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Circular XX';
  src: url("/assets/CircularXXSub-BoldItalic-a9d3d911.woff2") format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ————— Brand Blues ————— */
  --ha-blue-primary:       #143C55; /* primary-base — THE brand color */
  --ha-blue-primary-alt:   #123043;
  --ha-blue-primary-soft:  #1B5288;
  --ha-blue-dark-gradient-2: #2D6373;
  --ha-blue-accent:        #2D85FF; /* accent-base */
  --ha-blue-text:          #1E71E6; /* accent-text (AA text-safe blue, links) */
  --ha-blue-light:         #589EFF;
  --ha-blue-muted:         #4C91BF;

  /* ————— Gold (rare seasoning — promo tags only) ————— */
  --ha-gold-base:          #FFB959;
  --ha-gold-light:         #FFEACD;
  --ha-gold-lighter:       #FFD7A1;

  /* ————— Neutrals (cool, blue-tinted) ————— */
  --ha-ink:                #143C55; /* all primary text */
  --ha-ink-muted:          #6E777D;
  --ha-ink-subtle:         #757575;
  --ha-border:             #DBE1E5;
  --ha-border-strong:      #EBEEF0;
  --ha-surface:            #FFFFFF;
  --ha-surface-subtle:     #F6F8F9;
  --ha-scrim:              #D9D9D9;

  /* ————— Semantic ————— */
  --ha-success:            #0D9698; /* teal */
  --ha-danger:             #C51026;
  --ha-danger-bg:          #FDF5F6;

  /* ————— Shadows (only two tiers — never invent more) ————— */
  --ha-shadow-card:        0 10px 16px 0 rgba(39, 56, 66, 0.08);
  --ha-shadow-sheet:       0 0 24px 0 rgba(39, 56, 66, 0.16);
  --ha-shadow-inset-hi:    inset 0 1px 0 0 rgba(255,255,255,0.25);

  /* ————— Gradients ————— */
  --ha-gradient-blue-deep:   linear-gradient(180deg, #143C55 0%, #1B5288 100%);
  --ha-gradient-blue-dark:   linear-gradient(180deg, #000000 0%, #EBEEF0 100%);

  /* ————— Radii ————— */
  --ha-radius-xs:   4px;
  --ha-radius-sm:   5px;
  --ha-radius-md:   8px;   /* buttons (non-pill), cards, inputs, chips */
  --ha-radius-lg:   16px;  /* sheet top corners */
  --ha-radius-pill: 100px; /* buttons are pill-shaped */

  /* ————— Spacing (4px base grid) ————— */
  --ha-space-1: 4px;  --ha-space-2: 8px;  --ha-space-3: 12px; --ha-space-4: 16px;
  --ha-space-5: 20px; --ha-space-6: 24px; --ha-space-8: 32px; --ha-space-10: 40px;
  --ha-space-12: 48px; --ha-space-16: 64px;

  /* ————— Type ————— */
  --ha-font-sans: 'Circular XX', -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ha-weight-book: 400; --ha-weight-medium: 500; --ha-weight-bold: 700;

  --ha-fs-hero:     60px; --ha-lh-hero:     64px;
  --ha-fs-display:  48px; --ha-lh-display:  56px;
  --ha-fs-h1:       40px; --ha-lh-h1:       48px;
  --ha-fs-h2:       32px; --ha-lh-h2:       40px;
  --ha-fs-h3:       24px; --ha-lh-h3:       32px;
  --ha-fs-body-lg:  18px; --ha-lh-body-lg:  28px;
  --ha-fs-body:     16px; --ha-lh-body:     28px;
  --ha-fs-small:    14px; --ha-lh-small:    20px;
  --ha-fs-caption:  13px; --ha-lh-caption:  20px;
}

.ha, body.ha {
  font-family: var(--ha-font-sans);
  font-weight: var(--ha-weight-book);
  font-size: var(--ha-fs-body);
  line-height: var(--ha-lh-body);
  color: var(--ha-ink);
  background: var(--ha-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

.ha-hero, .ha-display, .ha-h1, .ha-h2, .ha-h3 { font-weight: 700; color: var(--ha-ink); }
.ha-hero { font-size: var(--ha-fs-hero); line-height: var(--ha-lh-hero); letter-spacing: -0.02em; }
.ha-display {
  font-size: var(--ha-fs-display); line-height: var(--ha-lh-display); letter-spacing: -0.02em;
}
.ha-h1 { font-size: var(--ha-fs-h1); line-height: var(--ha-lh-h1); letter-spacing: -0.015em; }
.ha-h2 { font-size: var(--ha-fs-h2); line-height: var(--ha-lh-h2); letter-spacing: -0.01em; }
.ha-h3 { font-size: var(--ha-fs-h3); line-height: var(--ha-lh-h3); letter-spacing: -0.005em; }
.ha-body-lg {
  font-size: var(--ha-fs-body-lg); line-height: var(--ha-lh-body-lg); color: var(--ha-ink);
}
.ha-body { font-size: var(--ha-fs-body); line-height: var(--ha-lh-body); color: var(--ha-ink); }
.ha-small {
  font-size: var(--ha-fs-small); line-height: var(--ha-lh-small); color: var(--ha-ink-muted);
}
.ha-caption {
  font-size: var(--ha-fs-caption); line-height: var(--ha-lh-caption);
  color: var(--ha-ink-muted); font-weight: 500; letter-spacing: 0.01em;
}

.ha-muted  { color: var(--ha-ink-muted); }
.ha-bold   { font-weight: var(--ha-weight-bold); }
.ha-medium { font-weight: var(--ha-weight-medium); }

.ha a, a.ha-link {
  color: var(--ha-blue-text);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
  transition: color 120ms ease;
}
.ha a:hover, a.ha-link:hover { color: var(--ha-blue-primary); }