/* ===========================
   BENTOPIA — CSS Variables
   =========================== */

@font-face {
  font-family: 'JPN';
  src: url('../fonts/jpn.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Main';
  src: url('../fonts/AlteHaasGroteskBold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* ── Brand Colors ── */
  --color-red:        #e01320;
  --color-teal:       #12e0bd;
  --color-dark:       #0b0219;

  /* ── Derived Palette ── */
  --color-bg:         #0b0219;           /* slightly lighter than dark */
  --color-bg-deep:    #0b0219;
  --color-surface:    rgba(32, 10, 32, 0.7);
  --color-surface-2:  rgba(18, 224, 189, 0.05);
  --color-border:     rgba(18, 224, 189, 0.15);
  --color-border-hot: rgba(224, 19, 32, 0.4);

  /* ── Text ── */
  --color-text:       #e8dfe8;
  --color-text-dim:   rgba(232, 223, 232, 0.55);
  --color-text-accent:#12e0bd;
  --color-text-hot:   #e01320;

  /* ── Glass Card ── */
  --glass-bg:         rgba(32, 10, 32, 0.45);
  --glass-blur:       18px;
  --glass-border:     rgba(18, 224, 189, 0.18);
  --glass-shadow:     0 8px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(18,224,189,0.08);

  /* ── Layout ── */
  --header-h:         64px;
  --max-w:            1280px;
  --radius:           14px;
  --radius-sm:        8px;

  /* ── Fonts ── */
  --font-logo:        'JPN', serif;
  --font-body:        'Main', sans-serif;

  /* ── Motion ── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-teal);
  color: var(--color-dark);
}

::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-teal);
}