// ============================================================
// VARIABLES — Oath Hammer LESS
// ============================================================

// Fonts
@font-primary:   "Sherwood", "Palatino Linotype", serif;
@font-secondary: "BlueDragon", "Palatino Linotype", serif;
@font-body:      "Calibri", "Segoe UI", sans-serif;
@font-size-base: 0.82rem;

// Colors — from design_rules.md (CMYK converted to RGB)
// Blue:  CMYK(94, 42, 9,  50) → rgb(8,  74, 116)
// Olive: CMYK(26, 28, 64, 56) → rgb(83, 81, 40)
@color-blue:     #084a74;
@color-olive:    #535128;
@color-gold:     #c8a84b;
@color-dark:     #2a1a0a;
@color-paper:    #f5ead0;

// Derived — using LESS fade() to keep colors in sync with variables
@color-olive-faint:   fade(@color-olive, 20%);
@color-blue-hover:    fade(@color-blue, 8%);
@color-input-bg:      rgba(255, 255, 255, 0.3);
@color-disabled-bg:   rgba(0, 0, 0, 0.08);

// Layout
@portrait-height:    150px;
@left-panel-width:   180px;
@npc-left-width:     160px;
@item-img-size:      24px;
@item-sheet-img:     52px;
@label-min-width:    9rem;
@input-min-width:    10rem;
@input-max-width:    12rem;

// Fonts sizes
@font-size-sm:   calc(@font-size-base * 0.85);
@font-size-xs:   calc(@font-size-base * 0.9);
@font-size-lg:   calc(@font-size-base * 1.1);
@font-size-xl:   calc(@font-size-base * 1.2);

// Mixins
.sheet-background() {
  background-image: var(--oh-background-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.transition-opacity() {
  opacity: 0.6;
  transition: opacity 0.2s;
  &:hover { opacity: 1; }
}