/* ============================================================
   Block My Friends — Design Tokens
   README.md Design Tokens 섹션 기준. 새 hex 코드 금지.
   extension/popup/tokens.css 와 동일 내용 유지.
   ============================================================ */

/* --- Font --- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root {
  /* ---- Color ---- */
  --color-primary:        #2B62F0;
  --color-primary-hover:  #1C4BC7;
  --color-primary-tint:   #EDF1FE;
  --color-primary-tint2:  #F8FAFF;
  --color-primary-border: #DCE6FB;
  --color-primary-border2:#C9D8FB;
  --color-primary-border3:#B8C7EE;

  --text-1:       #17181C;
  --text-2:       #5C6470;
  --text-3:       #8A9099;
  --text-muted:   #B0B6BE;
  --text-disabled:#C8CDD4;

  --surface:        #FFFFFF;
  --surface-muted:  #F7F8FA;
  --surface-muted2: #F1F3F6;
  --surface-muted3: #F4F5F7;

  --border:   #E8EAEE;
  --divider:  #F0F1F4;
  --divider2: #EDEFF2;

  --color-success:    #02B47E;
  --color-success-bg: #E9F8F1;
  --color-danger:     #F04452;
  --color-danger-bg:  #FFF1F2;
  --color-danger-border: #F5D5D8;
  --color-warning:    #FF9F1C;
  --color-warning-bg: #FFF6E9;
  --color-warning-text:#B87400;

  /* ---- Typography ---- */
  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  /* Desktop scale */
  --fs-hero:    48px;
  --lh-hero:    1.24;
  --fw-hero:    800;
  --ls-hero:    -.035em;

  --fs-h2:      30px;
  --lh-h2:      1.38;
  --fw-h2:      700;
  --ls-h2:      -.03em;

  --fs-card-title: 17px;
  --fw-card-title: 700;

  --fs-body:    16px;
  --lh-body:    1.65;

  --fs-caption: 13px;

  --fs-eyebrow: 13px;
  --fw-eyebrow: 700;
  --ls-eyebrow: .06em;

  /* ---- Spacing (4px base) ---- */
  --sp-1:  4px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4:  10px;
  --sp-5:  12px;
  --sp-6:  14px;
  --sp-7:  16px;
  --sp-8:  20px;
  --sp-9:  24px;
  --sp-10: 28px;
  --sp-11: 32px;
  --sp-12: 40px;
  --sp-13: 44px;
  --sp-14: 52px;
  --sp-15: 56px;
  --sp-16: 72px;

  --gutter-desktop: 48px;
  --gutter-webapp:  40px;
  --gutter-mobile:  20px;

  /* ---- Radius ---- */
  --radius-btn:   12px;
  --radius-input: 12px;
  --radius-card:  16px;
  --radius-block: 18px;
  --radius-pill:  999px;
  --radius-checkbox: 6px;
  --radius-phone: 26px;
  --radius-sheet: 18px 18px 0 0;

  /* ---- Shadow ---- */
  --shadow-card:  0 1px 3px rgba(0,0,0,.06);
  --shadow-pop:   0 4px 18px rgba(23,24,28,.08);
  --shadow-pop2:  0 6px 20px rgba(23,24,28,.09);
  --shadow-hero:  0 24px 60px -18px rgba(23,24,28,.22);
  --shadow-hero-m:0 16px 40px -16px rgba(23,24,28,.22);
  --shadow-phone: 0 10px 34px -10px rgba(23,24,28,.2);
  --shadow-btn:   0 6px 16px rgba(43,98,240,.27);
  --shadow-focus: 0 0 0 3px rgba(43,98,240,.12);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.22,.61,.36,1);
}

/* ---- Keyframes ---- */
@keyframes bmfPulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(1.9); opacity: 0;  }
  100% { opacity: 0; }
}

@keyframes bmfSpin {
  to { transform: rotate(360deg); }
}

@keyframes bmfIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@keyframes bmfReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

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

body {
  font-family: var(--font-main);
  color: var(--text-1);
  word-break: keep-all;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--color-primary-hover);
}

/* ---- Utility: focus ring ---- */
.bmf-focus:focus-visible {
  outline: none;
  border: 1.5px solid var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* ---- Utility: spinner ---- */
.bmf-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-primary-tint);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: bmfSpin .7s linear infinite;
}

/* ---- Utility: pulse dot ---- */
.bmf-pulse {
  position: relative;
}
.bmf-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  animation: bmfPulse 1.8s ease-out infinite;
}

/* ---- Utility: monospace code ---- */
.bmf-code {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .06em;
}