/* Perion Design System — Colors & Type
   Source: Brand Guidelines V1.4 (April 2026). */

/* ───────────────────────── Fonts ───────────────────────── */
@font-face { font-family: "Poppins"; font-weight: 100; font-style: normal;
  src: url("./fonts/Poppins-Thin.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 200; font-style: normal;
  src: url("./fonts/Poppins-ExtraLight.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal;
  src: url("./fonts/Poppins-Light.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal;
  src: url("./fonts/Poppins-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: italic;
  src: url("./fonts/Poppins-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal;
  src: url("./fonts/Poppins-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal;
  src: url("./fonts/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal;
  src: url("./fonts/Poppins-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: italic;
  src: url("./fonts/Poppins-BoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 800; font-style: normal;
  src: url("./fonts/Poppins-ExtraBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Poppins"; font-weight: 900; font-style: normal;
  src: url("./fonts/Poppins-Black.ttf") format("truetype"); font-display: swap; }

:root {
  /* ── Brand colors ── */
  --perion-pink:      #FF0083;   /* Primary hero accent, PMS 806C */
  --perion-charcoal:  #00101A;   /* Default dark surface / type on light */
  --perion-offwhite:  #F3F3F3;   /* Default light surface / type on dark */
  --perion-white:     #FFFFFF;   /* Utility neutral for dense UI */

  /* ── Secondary palette ── */
  --perion-blue:      #0062FF;
  --perion-purple:    #7E43B5;
  --perion-orange:    #FF8502;

  /* ── Neutrals ── */
  --neutral-01:       #6B6A67;   /* body secondary / meta */
  --neutral-02:       #A39D95;   /* borders / dividers */
  --neutral-03:       #DDDDDD;   /* fills / disabled */

  /* ── Semantic (UI) ── */
  --fg-1: var(--perion-charcoal);
  --fg-2: var(--neutral-01);
  --fg-3: var(--neutral-02);
  --fg-on-dark:  var(--perion-offwhite);
  --fg-accent:   var(--perion-pink);

  --bg-1: var(--perion-offwhite);
  --bg-2: var(--perion-white);
  --bg-dark: var(--perion-charcoal);
  --bg-accent: var(--perion-pink);

  --border-1: var(--neutral-02);
  --border-2: var(--neutral-03);

  --danger: #EF4444;
  --success: #3FDBAA;

  /* ── Type ── */
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* Display / hero — Poppins Bold, -2% tracking, 100% leading */
  --fs-display-xl: 160px;  /* Cover hero */
  --fs-display:    140px;
  --fs-h1:         80px;
  --fs-h2:         52px;
  --fs-h3:         36px;
  --fs-subhead:    25px;
  --fs-lede:       22px;
  --fs-body:       18px;
  --fs-body-sm:    16px;
  --fs-eyebrow:    14px;
  --fs-caption:    12px;

  --lh-tight: 1;
  --lh-snug:  1.1;
  --lh-body:  1.4;
  --lh-loose: 1.6;

  --tr-display: -0.02em;
  --tr-eyebrow: 0.08em;

  /* ── Spacing (4pt base) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;    /* page gutter @ 1920 */
  --sp-10: 120px;

  /* ── Radii — generous, pill buttons are signature ── */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ── Shadows — restrained; brand favors flat surfaces ── */
  --shadow-1: 0 1px 2px rgba(0,16,26,0.06), 0 1px 1px rgba(0,16,26,0.04);
  --shadow-2: 0 4px 12px rgba(0,16,26,0.08);
  --shadow-3: 0 16px 40px rgba(0,16,26,0.14);

  /* Signature "Perion glow" — pink halo used behind hero imagery */
  --glow-pink: 0 0 80px rgba(255,0,131,0.55), 0 0 160px rgba(255,0,131,0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  240ms;
  --dur-slow: 480ms;
}

/* ─────────────────── Semantic element styles ─────────────────── */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--tr-display); color: var(--fg-1);
  margin: 0;
}
h2, .h2 { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tr-display); margin: 0; }
h3, .h3 { font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tr-display); margin: 0; }
h4, .subhead { font-weight: 500; font-size: var(--fs-subhead); line-height: var(--lh-body); margin: 0; }
p, .body { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); }
.lede { font-weight: 400; font-size: var(--fs-lede); line-height: var(--lh-body); }
.eyebrow {
  font-weight: 500; font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tr-eyebrow);
  color: var(--fg-2);
}
.caption { font-size: var(--fs-caption); color: var(--fg-2); line-height: var(--lh-body); }

/* Signature: highlight terminal punctuation in pink. */
.punct-pink { color: var(--perion-pink); }

/* ─────────────────── Core components ─────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--fs-body); letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-primary { background: var(--perion-pink); color: var(--perion-offwhite); }
.btn-primary:hover { background: #E0006F; }
.btn-primary:active { transform: scale(0.98); }
.btn-dark { background: var(--perion-charcoal); color: var(--perion-offwhite); }
.btn-dark:hover { background: #000; }
.btn-light { background: var(--perion-offwhite); color: var(--perion-charcoal); }
.btn-light:hover { background: var(--perion-white); }
.btn-ghost { background: transparent; color: var(--perion-charcoal); border: 1.5px solid var(--perion-charcoal); }
.btn-ghost:hover { background: var(--perion-charcoal); color: var(--perion-offwhite); }

.surface-dark { background: var(--perion-charcoal); color: var(--perion-offwhite); }
.surface-light { background: var(--perion-offwhite); color: var(--perion-charcoal); }
.surface-pink { background: var(--perion-pink); color: var(--perion-offwhite); }