/* ClipFlame design tokens + base components. Shared by the marketing site and the studio app.
   Red, flame orange and black: near-black surfaces, red for actions, orange for highlights, white text. */

:root {
  --cf-red: #ff0033;
  --cf-red-strong: #cc0000;
  --cf-red-soft: rgba(255, 0, 51, 0.14);
  --cf-flame: #ff7a1a;
  --cf-flame-text: #ffa35c;
  --cf-flame-soft: rgba(255, 122, 26, 0.14);
  --cf-bg: #0f0f0f;
  --cf-surface: #181818;
  --cf-surface-2: #212121;
  --cf-surface-3: #2b2b2b;
  --cf-border: #303030;
  --cf-text: #f1f1f1;
  --cf-text-muted: #aaaaaa;
  --cf-text-dim: #717171;
  --cf-success: #2ba640;
  --cf-warning: #ffb800;

  --cf-radius-sm: 8px;
  --cf-radius: 12px;
  --cf-radius-lg: 20px;
  --cf-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  --cf-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cf-max: 1160px;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cf-bg);
  color: var(--cf-text);
  font-family: var(--cf-font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, video { max-width: 100%; display: block; }

.cf-container { width: 100%; max-width: var(--cf-max); margin: 0 auto; padding: 0 16px; }

/* Logo: red tile with a flame + two-tone wordmark */
.cf-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px;
  letter-spacing: -0.02em; text-decoration: none; }
.cf-logo__mark { width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff2a55'/%3E%3Cstop offset='1' stop-color='%23d4002b'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe08a'/%3E%3Cstop offset='1' stop-color='%23ff9a1f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='9' fill='url(%23r)'/%3E%3Cpath d='M16 4.5c.8 3.6 3.2 5.6 4.9 8 1.3 1.8 2.1 3.8 2.1 6a7 7 0 0 1-14 0c0-2.6 1.1-4.7 2.8-6.3.1 1.8.8 3.1 2 3.8-.3-4.3.7-8.2 2.2-11.5z' fill='url(%23f)'/%3E%3Cpath d='M16.4 14.5c1.9 1.9 3.1 3.5 3.1 5.4a3.5 3.5 0 0 1-7 0c0-1.5.7-2.7 1.8-3.6.2 1 .7 1.6 1.4 1.9 0-1.3.2-2.5.7-3.7z' fill='%23ff4d1a'/%3E%3C/svg%3E") center / contain no-repeat; }
.cf-logo__flame { color: var(--cf-flame); }

/* Buttons */
.cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--cf-font); text-decoration: none; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.cf-btn:active { transform: translateY(1px); }
.cf-btn--primary { background: var(--cf-red); color: #fff; }
.cf-btn--primary:hover { background: var(--cf-red-strong); }
.cf-btn--ghost { background: transparent; color: var(--cf-text); border-color: var(--cf-border); }
.cf-btn--ghost:hover { background: var(--cf-surface-2); }
.cf-btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.cf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cf-btn:focus-visible, .cf-input:focus-visible, .cf-select:focus-visible {
  outline: 2px solid var(--cf-red); outline-offset: 2px; }

/* Cards and form controls */
.cf-card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-lg); }
.cf-input, .cf-select { width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--cf-radius-sm);
  border: 1px solid var(--cf-border); background: var(--cf-surface-2); color: var(--cf-text);
  font: 400 15px var(--cf-font); }
.cf-label { display: block; font-size: 13px; font-weight: 600; color: var(--cf-text-muted); margin-bottom: 6px; }

.cf-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--cf-flame-soft); color: var(--cf-flame-text); font-size: 13px; font-weight: 600; }

.cf-progress { height: 4px; border-radius: 4px; background: var(--cf-surface-3); overflow: hidden; }
.cf-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--cf-red), var(--cf-flame)); transition: width 0.4s ease; }

.cf-muted { color: var(--cf-text-muted); }