:root {
  /* === BASE === */
  --vb-color-base-black: #000000;
  --vb-color-base-white: #FFFFFF;

  /* === BRAND TEAL === */
  --vb-color-brand-teal-50:  #D8F3F4;
  --vb-color-brand-teal-100: #D8F3F4;
  --vb-color-brand-teal-200: #A4E0E3;
  --vb-color-brand-teal-300: #4CC1C8;
  --vb-color-brand-teal-400: #009098;
  --vb-color-brand-teal-500: #009098;
  --vb-color-brand-teal-600: #00737A;
  --vb-color-brand-teal-700: #00475A;
  --vb-color-brand-primary:  #009098;
  --vb-color-brand:          var(--vb-color-brand-primary);

  /* === CREAM === */
  --vb-color-cream-vb-cream: #F7F5EB;

  /* === GRAY === */
  --vb-color-gray-50:  #F5F5F5;
  --vb-color-gray-100: #CACACA;
  --vb-color-gray-200: #999999;
  --vb-color-gray-300: #6E6E6E;
  --vb-color-gray-400: #999999;
  --vb-color-gray-500: #2C2C2C;

  /* === SERVICE === */
  --vb-color-service-buy-orange:    #A0330A;
  --vb-color-service-sell-blue:     #0095D9;
  --vb-color-service-library-green: #00475A;
  --vb-color-service-buy:     var(--vb-color-service-buy-orange);
  --vb-color-service-sell:    var(--vb-color-service-sell-blue);
  --vb-color-service-library: var(--vb-color-service-library-green);

  /* === SEMANTIC === */
  --vb-color-semantic-accent:   #F0D03D;
  --vb-color-semantic-error:    #DD0022;
  --vb-color-semantic-disabled: rgba(44, 44, 44, .3);

  /* === SEMANTIC ALIASES === */
  --vb-color-background-default:   var(--vb-color-gray-50);
  --vb-color-background-cream:     var(--vb-color-cream-vb-cream);
  --vb-color-background-secondary: var(--vb-color-gray-100);
  --vb-color-background-disabled:  var(--vb-color-gray-100);
  --vb-color-border-default:       var(--vb-color-gray-300);
  --vb-color-border-subtle:        var(--vb-color-gray-200);
  --vb-color-text-primary:         var(--vb-color-gray-500);
  --vb-color-text-secondary:       var(--vb-color-gray-300);
  --vb-color-text-inverse:         var(--vb-color-base-white);
  --vb-color-text-disabled:        var(--vb-color-semantic-disabled);

  /* === TYPE === */
  /* NOTE: Hiragino Sans is macOS/iOS system font — no webfont file exists.
     Fallback order tries Hiragino first, then Noto Sans JP (Google Fonts)
     as the closest available substitution. Flagged to user. */
  --vb-font-family-base: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN",
                          "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  --vb-font-size-base:    16px;
  --vb-font-weight-regular: 300;   /* W3 */
  --vb-font-weight-bold:    600;   /* W6 */
  --vb-line-height-base:  1.5;
  --vb-line-height-tight: 1.4;
  --vb-letter-spacing-base: 0;

  /* === LAYOUT === */
  --vb-spacing-base:  4px;
  --vb-header-height: 64px;
  --vb-footer-height: auto;

  /* === TYPE SCALE (Vuetify-aligned; tight lh on large headings) === */
  --vb-text-h1-size: 96px; --vb-text-h1-weight: 300; --vb-text-h1-lh: 1.4;
  --vb-text-h2-size: 60px; --vb-text-h2-weight: 300; --vb-text-h2-lh: 1.4;
  --vb-text-h3-size: 48px; --vb-text-h3-weight: 300; --vb-text-h3-lh: 1.4;
  --vb-text-h4-size: 34px; --vb-text-h4-weight: 300; --vb-text-h4-lh: 1.4;
  --vb-text-h5-size: 24px; --vb-text-h5-weight: 600; --vb-text-h5-lh: 1.4;
  --vb-text-h6-size: 20px; --vb-text-h6-weight: 600; --vb-text-h6-lh: 1.4;
  --vb-text-body-size: 16px; --vb-text-body-weight: 300; --vb-text-body-lh: 1.5;
  --vb-text-small-size: 14px;
  --vb-text-caption-size: 12px;
  --vb-text-overline-size: 10px;
}

/* === GLOBAL RESET === */
html, body {
  margin: 0;
  font-family: var(--vb-font-family-base);
  font-size: var(--vb-font-size-base);
  font-weight: var(--vb-font-weight-regular);
  line-height: var(--vb-line-height-base);
  letter-spacing: var(--vb-letter-spacing-base);
  color: var(--vb-color-text-primary);
  background-color: var(--vb-color-background-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* === SEMANTIC TYPOGRAPHY === */
h1, .vb-h1 { font-size: var(--vb-text-h1-size); font-weight: var(--vb-text-h1-weight); line-height: var(--vb-text-h1-lh); margin: 0; }
h2, .vb-h2 { font-size: var(--vb-text-h2-size); font-weight: var(--vb-text-h2-weight); line-height: var(--vb-text-h2-lh); margin: 0; }
h3, .vb-h3 { font-size: var(--vb-text-h3-size); font-weight: var(--vb-text-h3-weight); line-height: var(--vb-text-h3-lh); margin: 0; }
h4, .vb-h4 { font-size: var(--vb-text-h4-size); font-weight: var(--vb-text-h4-weight); line-height: var(--vb-text-h4-lh); margin: 0; }
h5, .vb-h5 { font-size: var(--vb-text-h5-size); font-weight: var(--vb-text-h5-weight); line-height: var(--vb-text-h5-lh); margin: 0; }
h6, .vb-h6 { font-size: var(--vb-text-h6-size); font-weight: var(--vb-text-h6-weight); line-height: var(--vb-text-h6-lh); margin: 0; }
p,  .vb-body { font-size: var(--vb-text-body-size); line-height: var(--vb-text-body-lh); margin: 0; }
.vb-small    { font-size: var(--vb-text-small-size); line-height: 1.5; }
.vb-caption  { font-size: var(--vb-text-caption-size); line-height: 1.5; color: var(--vb-color-text-secondary); }
.vb-overline { font-size: var(--vb-text-overline-size); line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; color: var(--vb-color-text-secondary); }
.vb-bold     { font-weight: var(--vb-font-weight-bold); }

/* === BUTTONS (Vuetify v-btn VB customization, border-radius: 0) === */
.vb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: var(--vb-font-weight-bold);
  border: 0; border-radius: 0; cursor: pointer;
  letter-spacing: 0; line-height: 1; white-space: nowrap;
  transition: background-color .12s, color .12s, border-color .12s, opacity .12s;
  padding: 0 16px; height: 36px; font-size: 14px; min-width: 64px;
}
.vb-btn--x-small { height: 20px; font-size: 10px; min-width: 36px; padding: 0 8px; }
.vb-btn--small   { height: 28px; font-size: 12px; min-width: 50px; padding: 0 12px; }
.vb-btn--large   { height: 44px; font-size: 16px; min-width: 78px; padding: 0 20px; }
.vb-btn--x-large { height: 52px; font-size: 18px; min-width: 92px; padding: 0 24px; }

.vb-btn--primary   { background: var(--vb-color-brand-primary); color: var(--vb-color-text-inverse); }
.vb-btn--primary:hover:not(:disabled)   { background: var(--vb-color-brand-teal-600); }
.vb-btn--primary:active:not(:disabled)  { background: var(--vb-color-brand-teal-700); }

.vb-btn--secondary { background: transparent; color: var(--vb-color-brand-primary); box-shadow: inset 0 0 0 1px var(--vb-color-brand-primary); }
.vb-btn--secondary:hover:not(:disabled) { background: var(--vb-color-brand-teal-50); }

.vb-btn--outline   { background: transparent; color: var(--vb-color-text-primary); box-shadow: inset 0 0 0 1px var(--vb-color-border-default); }
.vb-btn--outline:hover:not(:disabled)   { background: var(--vb-color-gray-50); }

.vb-btn--text      { background: transparent; color: var(--vb-color-brand-primary); }
.vb-btn--text:hover:not(:disabled)      { background: var(--vb-color-brand-teal-50); }

.vb-btn:disabled,
.vb-btn[aria-disabled="true"] {
  background: var(--vb-color-background-disabled);
  color: var(--vb-color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}

/* === FORM ELEMENTS === */
.vb-input {
  font-family: inherit; font-size: 14px; font-weight: 300;
  height: 44px; padding: 0 12px;
  background: var(--vb-color-base-white);
  color: var(--vb-color-text-primary);
  border: 1px solid var(--vb-color-border-default);
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s;
}
.vb-input:focus { outline: none; border-color: var(--vb-color-brand-primary); box-shadow: inset 0 0 0 1px var(--vb-color-brand-primary); }
.vb-input::placeholder { color: var(--vb-color-gray-200); }

.vb-label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--vb-color-text-primary); }

/* === CARDS / SURFACES === */
.vb-card {
  background: var(--vb-color-base-white);
  border-radius: 0;
  padding: 16px;
}
.vb-card--bordered { border: 1px solid var(--vb-color-border-subtle); }
.vb-card--elevated { box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.vb-card--cream    { background: var(--vb-color-background-cream); }

/* === UTIL === */
.vb-divider { height: 1px; background: var(--vb-color-border-subtle); border: 0; }
.vb-divider--strong { background: var(--vb-color-border-default); }