/* Cog Music — shared design system for the artist landing page and portal. */

:root {
  --ink: #191410;
  --ink-2: #4b4034;
  --ink-3: #6f6456;
  --paper: #f3ecde;
  --paper-2: #ece2cd;
  --cream: #fbf8f0;
  --line: #e0d5bf;
  --line-2: #d3c6ab;

  --green: #1c5e44;
  --green-d: #123f2e;
  --gold: #e0a125;
  --gold-d: #b57e12;
  --coral: #d8532a;
  --sky: #2a6f97;

  --ok: #1c7d4d;
  --warn: #c8871a;
  --bad: #c0442a;

  --shadow-sm: 0 1px 2px rgba(25, 20, 16, .06), 0 2px 6px rgba(25, 20, 16, .05);
  --shadow: 0 10px 30px -12px rgba(25, 20, 16, .28);
  --shadow-lg: 0 30px 60px -20px rgba(25, 20, 16, .35);

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --maxw: 1160px;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -.01em; }
p { line-height: 1.6; margin: 0; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 13px 20px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space: nowrap; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--cream); }
.btn-primary:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: #2a1e06; }
.btn-gold:hover { background: var(--gold-d); color: #fff; }
.btn-green { background: var(--green); color: #eafff4; }
.btn-green:hover { background: var(--green-d); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 9px 14px; font-size: 13.5px; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  background: var(--cream); color: var(--ink-2);
}
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }

.card { background: var(--cream); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }

.tag { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.tag-live { background: #e4f4ea; color: #1c7d4d; }
.tag-review { background: #fbeecf; color: #a9740c; }
.tag-draft { background: #eee7d8; color: #7a6d55; }
.tag-off { background: #efe3df; color: #a24a2c; }
.tag-reject { background: #f6dfd7; color: #b23a1c; }

.lang-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; background: var(--cream); }
.lang-toggle button { font-family: var(--sans); font-weight: 700; font-size: 12.5px; border: 0; background: transparent; color: var(--ink-3); padding: 7px 12px; cursor: pointer; }
.lang-toggle button.on { background: var(--ink); color: var(--cream); }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>"); }

@media (max-width: 720px) {
  .wrap { padding: 0 18px; }
}