/* Oleku brand tokens. Matches event-front/src/css/app.css and public/logo.svg. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../event-front/public/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../event-front/public/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("../../event-front/public/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cream: #faf9f6;
  --paper: #ffffff;
  --ink: #131316;
  --text: #111111;
  --muted: #7a7a94;
  --rose: #e8427c;
  --violet: #7c3aed;
  --indigo: #4361ee;
  --coral: #ff5d3d;
  --coral-deep: #fb923c;
  --sand: #f1e7d8;
  --line: rgba(19, 19, 22, 0.08);
  --gradient: linear-gradient(135deg, #e8427c 0%, #7c3aed 100%);
  --gradient-text: linear-gradient(90deg, #e8427c 0%, #7c3aed 100%);
  --leaf: #15ad67;
  --petal: #ff6b57;
  --amber: #f59e0b;
  --teal: #0f766e;
  --bloom-paper: #fafaf9;
  --night: #08111f;
  --night-surface: #0f172a;
  --night-raised: #172033;
  --night-line: #334155;
  --night-text: #f8fafc;
  --night-muted: #94a3b8;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --shadow-rose: 0 8px 32px rgba(228, 66, 124, 0.35);
  --shadow-card: 0 4px 24px rgba(19, 19, 22, 0.08);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.lockup img {
  width: 1.73em;
  height: 1.73em;
  display: block;
  flex: none;
}

.lockup span {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  font-size: 1em;
}

.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fixed-size boards. Standalone files set the canvas; the brand sheet scales the same blocks. */

.board-post, .board-story, .board-og, .board-slide, .board-banner, .board-email, .board-card, .board-card-back, .board-avatar {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.board-post { width: 1080px; height: 1080px; background: var(--cream); color: var(--ink); position: relative; }
.board-post .orb, .board-og .orb { position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; }
.board-post .orb-a { width: 520px; height: 520px; right: -120px; top: -140px; background: rgba(232, 66, 124, 0.28); }
.board-post .orb-b { width: 420px; height: 420px; left: -140px; bottom: -80px; background: rgba(124, 58, 237, 0.18); }
.board-post .sheet, .board-og .sheet, .board-slide .sheet, .board-card .sheet {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.board-post .sheet { padding: 80px; }
.board-post .lockup { font-size: 46px; }
.board-post h1, .board-og h1, .board-slide h1, .board-story h1, .board-banner h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.board-post h1 { font-size: 104px; }
.board-post p { margin: 32px 0 0; font-size: 32px; line-height: 1.35; color: var(--muted); max-width: 16em; }
.board-post .url { font-size: 28px; font-weight: 700; }

.board-story {
  width: 1080px;
  height: 1920px;
  color: var(--night-text);
  background:
    radial-gradient(circle at top left, rgba(255, 93, 61, 0.22), transparent 32%),
    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.35), transparent 36%),
    var(--night);
  display: flex;
  flex-direction: column;
}
.board-story .mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px 88px 40px; }
.board-story .mark { width: 220px; height: 220px; }
.board-story h1 { margin-top: 48px; font-size: 92px; }
.board-story p { margin: 32px 0 0; font-size: 36px; line-height: 1.35; color: var(--night-muted); max-width: 16em; }
.board-story .foot {
  background: var(--cream);
  color: var(--ink);
  padding: 52px 88px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.board-story .foot strong { font-family: var(--font-display); font-weight: 900; font-size: 42px; letter-spacing: -0.03em; }
.board-story .foot span { font-size: 24px; color: var(--muted); }

.board-og { width: 1200px; height: 630px; position: relative; background: var(--cream); color: var(--ink); }
.board-og .orb-a { width: 380px; height: 380px; right: -60px; top: -80px; background: rgba(232, 66, 124, 0.3); filter: blur(30px); }
.board-og .orb-b { width: 320px; height: 320px; left: 40%; bottom: -140px; background: rgba(124, 58, 237, 0.2); filter: blur(30px); }
.board-og .sheet { padding: 64px 72px; }
.board-og .lockup { font-size: 36px; }
.board-og h1 { max-width: 14em; font-size: 68px; }
.board-og .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.board-og p { margin: 0; font-size: 26px; color: var(--muted); }

.board-slide { width: 1280px; height: 720px; background: var(--paper); color: var(--ink); }
.board-slide .sheet { padding: 72px 80px 56px; justify-content: flex-start; }
.board-slide .eyebrow { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rose); }
.board-slide h1 { margin-top: 28px; max-width: 11em; font-size: 84px; }
.board-slide .sub { margin: 28px 0 0; max-width: 22em; font-size: 26px; line-height: 1.4; color: var(--muted); }
.board-slide .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.board-slide .lockup { font-size: 28px; }
.board-slide .url { font-size: 20px; font-weight: 700; }

.board-banner {
  width: 1584px;
  height: 396px;
  color: var(--ink);
  border-bottom: 8px solid transparent;
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--gradient) border-box;
}
.board-banner .sheet { height: 100%; padding: 0 120px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.board-banner .lockup { font-size: 52px; }
.board-banner .copy { text-align: right; }
.board-banner h1 { font-size: 52px; letter-spacing: -0.04em; line-height: 1; }
.board-banner p { margin: 12px 0 0; font-size: 24px; color: var(--muted); }

.board-email {
  width: 600px;
  height: 140px;
  color: var(--ink);
  border-bottom: 4px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--gradient) border-box;
}
.board-email .sheet { height: 100%; padding: 0 36px; display: flex; align-items: center; justify-content: space-between; }
.board-email .lockup { font-size: 32px; }
.board-email .url { font-size: 16px; font-weight: 700; color: var(--muted); }

.board-card {
  width: 1050px;
  height: 600px;
  color: var(--ink);
  border-left: 12px solid transparent;
  background:
    linear-gradient(var(--cream), var(--cream)) padding-box,
    var(--gradient) border-box;
}
.board-card .sheet { padding: 64px 72px 56px 80px; }
.board-card .lockup { font-size: 72px; }
.board-card .line { margin: 28px 0 0; font-family: var(--font-display); font-weight: 900; font-size: 36px; letter-spacing: -0.03em; }
.board-card .meta { display: flex; justify-content: space-between; align-items: flex-end; }
.board-card .company { font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.board-card .url { margin-top: 8px; font-size: 28px; font-weight: 700; }
.board-card .city { font-size: 20px; color: var(--muted); }

.board-card-back {
  width: 1050px;
  height: 600px;
  background: var(--ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-card-back .stack { text-align: center; }
.board-card-back img { width: 220px; height: 220px; }
.board-card-back .url { margin-top: 28px; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); }

.board-avatar {
  width: 1080px;
  height: 1080px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.board-avatar img { width: 760px; height: 760px; }