/* ==========================================================
   RickBeddoe.com — Design Tokens
   ========================================================== */

/* ------------------------------------------
   Typography
   ------------------------------------------ */

@font-face {
  font-family: "Agency FB";
  src:
    url("/assets/fonts/agency-fb/font.woff2") format("woff2"),
    url("/assets/fonts/agency-fb/font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fonts */
  --sf-font-heading: "Agency FB", "Teko", sans-serif;
  --sf-font-body: "Zilla Slab", serif;

  /* Colors */
  --sf-bg-main:        #0f1113;
  --sf-bg-panel:       #16191c;
  --sf-bg-elevated:    #1d2125;

  --sf-text-primary:   #e6e3dc;
  --sf-text-secondary: #b8b2a7;
  --sf-text-muted:     #8a857c;

  --sf-accent-bronze:  #b08d57;
  --sf-accent-amber:   #d6a756;

  --sf-border-subtle:  #2c2a24;

  --sf-band-background: #272220;

  /* Spacing */
  --sf-space-md: 16px;
  --sf-space-lg: 24px;
  --sf-space-xl: 40px;

  /* Motion */
  --sf-speed-fast: 150ms;
  --sf-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Lightened surfaces (≈10%) */
  --sf-bg-elevated-soft: color-mix(
    in srgb,
    var(--sf-bg-elevated) 90%,
    white
  );

  --sf-bg-panel-soft: color-mix(
    in srgb,
    var(--sf-bg-panel) 90%,
    white
  );
  
  
  /* NEW: darker recessed tab surface */
  --sf-bg-tab-inactive: color-mix(
    in srgb,
    var(--sf-bg-elevated) 92%,
    black
  );

}