/* ============================================================
   brafa Systems — Design Tokens
   colors, type scale, spacing, radii, shadows
   ============================================================ */

/* ---- Brand font — the real brafa wordmark / display face ---- */
@font-face {
  font-family: "brafa";
  src: url("fonts/brafa.woff2") format("woff2"),
       url("fonts/brafa.woff")  format("woff"),
       url("fonts/brafa.ttf")   format("truetype"),
       url("fonts/brafa.otf")   format("opentype");
  font-weight: 100 900;   /* single physical weight — accept any value as fallback */
  font-style: normal;
  font-display: swap;
}

/* ---- Jura kept for the wider "systems"-style wide eyebrow lockup,
       Poppins is the brand secondary (body, UI, longer copy where the
       single-weight brafa face reads too thin),
       JetBrains Mono kept for codes/voltages/IDs.                  */
@import url("https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500;600&family=Poppins:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* -------- COLOR -------- */
  /* Brand monochrome */
  --brafa-black:        #0B0B0B;
  --brafa-ink:          #1A1A1A;
  --brafa-graphite:     #3A3A3A;
  --brafa-steel:        #8A8A8A;
  --brafa-stone:        #B5B4B0;
  --brafa-fog:          #D9D9D9;
  --brafa-bone:         #F2F1EE;
  --brafa-paper:        #FAFAF8;
  --brafa-white:        #FFFFFF;

  /* The one accent */
  --brafa-green:        #4FE07A;   /* unlock LED, active state */
  --brafa-green-deep:   #1E8A3E;   /* hover/text on white */
  --brafa-green-soft:   #E4F8EB;   /* badge background */

  /* Functional (used rarely) */
  --brafa-red:          #E0524F;   /* denied access */
  --brafa-red-soft:     #FBE6E5;
  --brafa-amber:        #E0A84F;   /* warning, low battery */
  --brafa-amber-soft:   #FBF1DD;
  --brafa-blue:         #5B8BCF;   /* wiring diagrams — DC line */

  /* Semantic — light theme (default) */
  --bg:                 var(--brafa-bone);
  --bg-surface:         var(--brafa-white);
  --bg-sunken:          var(--brafa-paper);
  --fg:                 var(--brafa-ink);
  --fg-muted:           var(--brafa-graphite);
  --fg-subtle:          var(--brafa-steel);
  --fg-on-dark:         var(--brafa-white);
  --border:             var(--brafa-fog);
  --border-strong:      var(--brafa-graphite);
  --accent:             var(--brafa-green-deep);
  --accent-bg:          var(--brafa-green);
  --danger:             var(--brafa-red);
  --warning:            var(--brafa-amber);

  /* Hardware/dark surfaces (the keypad context) */
  --hw-body:            #15171A;
  --hw-body-edge:       #232629;
  --hw-glyph:           #F2F1EE;
  --hw-glyph-dim:       #888B90;

  /* -------- TYPE -------- */
  /* Display = the proprietary brafa wordmark face (logos, big headings).
     Body    = Poppins (the brand body face — multi-weight, much more
               legible than brafa at small sizes).
     Wide    = Jura for the "S Y S T E M S"-style letter-spaced eyebrow.
     Mono    = JetBrains Mono for codes, voltages, IDs.              */
  --font-display:       "brafa", "Poppins", "Galano", "Nunito Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:          "Poppins", "brafa", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-wide:          "Jura", "Poppins", "brafa", system-ui, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-light:       300;
  --weight-regular:     400;
  --weight-medium:      500;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* Size tokens */
  --text-hero:          80px;
  --text-display:       56px;
  --text-h1:            36px;
  --text-h2:            24px;
  --text-h3:            18px;
  --text-body:          16px;
  --text-small:         13px;
  --text-eyebrow:       11px;

  --leading-tight:      1.1;
  --leading-snug:       1.25;
  --leading-normal:     1.45;
  --leading-loose:      1.65;

  --tracking-tight:     -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-extra:     0.6em;   /* the deck-eyebrow spacing */

  /* -------- SPACING (4-based) -------- */
  --space-1:            4px;
  --space-2:            8px;
  --space-3:            12px;
  --space-4:            16px;
  --space-5:            24px;
  --space-6:            32px;
  --space-7:            48px;
  --space-8:            64px;
  --space-9:            96px;
  --space-10:           128px;

  /* -------- RADIUS -------- */
  --radius-xs:          2px;
  --radius-sm:          4px;
  --radius-md:          10px;
  --radius-lg:          18px;
  --radius-xl:          28px;
  --radius-pill:        999px;

  /* -------- SHADOW -------- */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:          0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:          0 24px 48px -16px rgba(0,0,0,0.18);
  --shadow-key:         0 1px 0 rgba(255,255,255,0.04) inset, 0 -1px 0 rgba(0,0,0,0.5) inset;

  /* -------- BORDER -------- */
  --hairline:           1px solid var(--border);
  --hairline-dark:      1px solid rgba(255,255,255,0.08);

  /* -------- MOTION -------- */
  --ease:               cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:           150ms;
  --dur-base:           250ms;
  --dur-slow:           400ms;

  /* -------- LAYOUT -------- */
  --container-max:      1180px;
  --container-pad:      var(--space-7);
}

/* ============================================================
   SEMANTIC TYPE STYLES — use these on elements directly
   ============================================================ */

.brafa-hero,
h1.hero {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.brafa-display {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.brafa-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h1);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.brafa-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.brafa-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  color: var(--fg);
}

.brafa-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--fg);
}

.brafa-small {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

/* The deck-signature eyebrow:  S N J A L L L Á S A R */
.brafa-eyebrow {
  font-family: var(--font-wide);
  font-weight: var(--weight-medium);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.brafa-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-normal);
  color: var(--fg);
}

/* ============================================================
   PRIMITIVES — surfaces, buttons, badges, key-cap
   Use these directly OR remix in component code.
   ============================================================ */

.brafa-card {
  background: var(--bg-surface);
  border: var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
}

.brafa-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  border: 1px solid var(--brafa-black);
  background: var(--brafa-black);
  color: var(--brafa-white);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.brafa-btn:hover    { background: var(--brafa-ink); }
.brafa-btn:active   { transform: translateY(1px); filter: brightness(0.95); }
.brafa-btn:focus-visible { outline: 2px solid var(--brafa-green); outline-offset: 2px; }

.brafa-btn--ghost {
  background: transparent;
  color: var(--brafa-black);
}
.brafa-btn--ghost:hover {
  background: var(--brafa-black);
  color: var(--brafa-white);
}

.brafa-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-wide);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--brafa-bone);
  color: var(--brafa-graphite);
}
.brafa-badge--active {
  background: var(--brafa-green-soft);
  color: var(--brafa-green-deep);
}
.brafa-badge--danger {
  background: var(--brafa-red-soft);
  color: var(--brafa-red);
}

/* Hardware key-cap (used in keypad recreation) */
.brafa-keycap {
  background: #1B1E22;
  color: var(--hw-glyph);
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-key);
}