/* Notifly Design System — colors_and_type.css
 * Source: Figma "Untitled.fig" (notifly.tech marketing site, 2025)
 * Verified against METADATA top-30 colors and component specs.
 */

/* Pretendard — official brand font, loaded locally from /fonts (uploaded by team) */
@font-face { font-family: "Pretendard"; font-weight: 100; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Thin.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 200; font-style: normal; font-display: swap; src: url("fonts/Pretendard-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Light.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Regular.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Medium.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/Pretendard-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Bold.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/Pretendard-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Pretendard"; font-weight: 900; font-style: normal; font-display: swap; src: url("fonts/Pretendard-Black.ttf") format("truetype"); }
/* Variable fallback (single file) — used as the primary src in production for smaller payload */
@font-face { font-family: "Pretendard Variable"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("fonts/PretendardVariable.woff2") format("woff2-variations"); }

:root {
  /* ─── Brand ─────────────────────────────────────── */
  --notifly-blue:        #0044CC;   /* PRIMARY brand — CTAs, accents, key icons, wordmark */
  --notifly-blue-light:  #3377FF;   /* secondary brand — glows, accents, hover-lift */
  --notifly-blue-deep:   #0044CC;   /* alias of primary, kept for back-compat */
  --notifly-blue-hover:  #003399;   /* hover/pressed darker step */
  --notifly-blue-ink:    #022047;   /* dark navy — used in inverse buttons */

  /* Brand tints */
  --blue-50:   #F4F8FF;
  --blue-100:  #EEF3FF;
  --blue-150:  #E8EFFC;
  --blue-200:  #E0EAFF;             /* radial-gradient stop on Value section */
  --blue-tint-3:  rgba(51,119,255,0.03); /* Tag bg */
  --blue-tint-10: rgba(51,119,255,0.10); /* Tag border */

  /* ─── Neutrals (verified from metadata top-30) ──── */
  --ink:       #121619;             /* rgb(18,22,25) — headings */
  --ink-soft:  #18181B;             /* rgb(24,24,27) — secondary heading */
  --ink-04:    #04090B;             /* rgb(4,9,11) — push-notification title */
  --fg-1:      #363F4B;             /* rgb(54,63,75) — body lead */
  --fg-2:      #4D5867;             /* rgb(77,88,103) — body */
  --fg-3:      #515868;             /* rgb(81,88,104) — soft */
  --fg-4:      #697077;             /* rgb(105,112,119) — tertiary */
  --fg-5:      #717989;             /* rgb(113,121,137) — quaternary */
  --fg-6:      #71717A;             /* rgb(113,113,122) — meta */
  --fg-7:      #303640;             /* rgb(48,54,64) */

  --bg:        #FFFFFF;
  --bg-soft:   #F7F8FA;             /* rgb(247,248,250) — UseCase tag bg, table odd */
  --bg-mute:   #E9ECEE;             /* rgb(233,236,238) — divider, stat border */
  --line:      #D4D4D8;             /* rgb(212,212,216) — input border */
  --line-soft: #D9D9D9;             /* rgb(217,217,217) */
  --line-2:    #D4D4D4;             /* rgb(212,212,212) */

  /* Accent (rare — used in arrooo and a few brand swatches) */
  --violet:    #9747FF;             /* rgb(151,71,255) */

  /* ─── Shadows ──────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 45px rgba(0,0,0,0.10), 0 184px 110px rgba(0,0,0,0.05);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-press: inset 0 1px 1px rgba(255,255,255,0.10);

  /* ─── Radii ──────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-3xl: 36px;
  --r-pill: 999px;

  /* ─── Spacing scale (from observed gaps: 4/6/8/10/12/16/20/24/32/40/60/80/100/120) ─── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-15: 60px;
  --s-20: 80px;
  --s-25: 100px;
  --s-30: 120px;

  /* ─── Type ─────────────────────────────────────── */
  --font-sans-ko: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans-en: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-sans-ja: "Pretendard Variable", "Pretendard", "Noto Sans JP", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Display + heading sizes (from Hero/Value/Metric sections) */
  --t-display-xl: 72px;     /* Hero brand line "노티플라이" */
  --t-display-lg: 60px;     /* Hero headline */
  --t-display-md: 56px;     /* Stat numbers */
  --t-h1: 48px;             /* Section h2s */
  --t-h2: 32px;             /* Sub-section */
  --t-h3: 28px;             /* Feature title */
  --t-h4: 22px;
  --t-h5: 20px;             /* Lead body / value title */
  --t-body-lg: 18px;        /* Feature description */
  --t-body: 16px;           /* Default body */
  --t-body-sm: 15px;        /* Button label */
  --t-caption: 14px;
  --t-meta: 12px;

  /* Letter-spacing rules (from Figma) */
  --ls-tight: -0.02em;      /* big display, stat numbers */
  --ls-h1: -0.01em;         /* h1/h2 */
  --ls-normal: 0;
}

/* ─── Semantic type recipes ─────────────────────── */
.t-display-xl { font: 700 var(--t-display-xl)/1.2 var(--font-sans-ko); letter-spacing: var(--ls-tight); color: var(--ink); }
.t-display-lg { font: 700 var(--t-display-lg)/1.2 var(--font-sans-ko); letter-spacing: var(--ls-tight); color: var(--ink); }
.t-display-md { font: 700 var(--t-display-md)/1.32 var(--font-sans-ko); letter-spacing: var(--ls-tight); color: var(--ink); }
.t-h1         { font: 700 var(--t-h1)/1.3 var(--font-sans-ko); letter-spacing: var(--ls-h1); color: var(--ink); }
.t-h2         { font: 700 var(--t-h2)/1.4 var(--font-sans-ko); letter-spacing: var(--ls-h1); color: var(--ink); }
.t-h3         { font: 700 var(--t-h3)/1.4 var(--font-sans-ko); letter-spacing: var(--ls-h1); color: var(--ink); }
.t-h4         { font: 700 var(--t-h4)/1.45 var(--font-sans-ko); color: var(--ink); }
.t-lead       { font: 500 var(--t-h5)/1.6 var(--font-sans-ko); color: var(--fg-1); }
.t-body-lg    { font: 400 var(--t-body-lg)/1.6 var(--font-sans-ko); color: var(--fg-4); }
.t-body       { font: 400 var(--t-body)/1.6 var(--font-sans-ko); color: var(--fg-2); }
.t-body-sm    { font: 500 var(--t-body-sm)/1.4 var(--font-sans-ko); color: var(--fg-1); }
.t-caption    { font: 400 var(--t-caption)/1.5 var(--font-sans-ko); color: var(--fg-4); }
.t-meta       { font: 400 var(--t-meta)/1.5 var(--font-sans-ko); color: var(--fg-5); }
.t-eyebrow    { font: 700 var(--t-body)/1 var(--font-sans-ko); color: var(--notifly-blue); letter-spacing: 0; }

/* Two-tone heading helper: bold ink phrase with one or two key words in brand blue */
.t-accent { color: var(--notifly-blue); }

/* Default page styling */
html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans-ko); }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }