/* Mudcast design tokens (site copy; the app keeps marketplace/brand/tokens.css).
   One color scheme: black, white and warm gray, with a single accent used only on
   the "Get a creator shortlist" button and focus outlines. */
:root {
  --font-display: "Archivo", "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --font-body: "Libre Franklin", "Franklin Gothic Book", "Segoe UI", system-ui, sans-serif;

  --color-bg: #fafaf8;
  --color-surface: #ffffff;
  --color-surface-2: #f0efeb;
  --color-text: #1c1c1a;
  --color-text-muted: #55544f;
  --color-border: #dddcd6;
  --color-primary: #1c1c1a;      /* ink: headings, selected chips, avatars */
  --color-primary-hover: #000000;
  --color-on-primary: #ffffff;
  --color-secondary: #1c1c1a;    /* links: ink, underlined */
  --color-accent: #e8672a;       /* blaze orange: the CTA button only */
  --color-accent-hover: #d65f24;
  --color-on-accent: #1c1208;
  --color-success: #2f7d4a;
  --color-warning: #b7791f;
  --color-danger: #b23a2e;
  --color-focus: var(--color-accent);

  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: none;
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --max-width: 1180px;
  --gutter: 16px;
}

/* Dark. Applies when the page is set to dark, or follows the system when no theme is set. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121211;
    --color-surface: #1b1b19;
    --color-surface-2: #232321;
    --color-text: #ecebe6;
    --color-text-muted: #b0afa8;
    --color-border: #33322f;
    --color-primary: #ecebe6;
    --color-primary-hover: #ffffff;
    --color-on-primary: #121211;
    --color-secondary: #ecebe6;
    --color-accent: #f08447;
    --color-accent-hover: #f59a64;
    --color-on-accent: #1c1208;
  }
}
:root[data-theme="dark"] {
  --color-bg: #121211;
  --color-surface: #1b1b19;
  --color-surface-2: #232321;
  --color-text: #ecebe6;
  --color-text-muted: #b0afa8;
  --color-border: #33322f;
  --color-primary: #ecebe6;
  --color-primary-hover: #ffffff;
  --color-on-primary: #121211;
  --color-secondary: #ecebe6;
  --color-accent: #f08447;
  --color-accent-hover: #f59a64;
  --color-on-accent: #1c1208;
}

/* Preview only: alternative button colors (js/preview.js). Orange is the default. */
:root[data-accent="clay"] { --color-accent: #7a4a2a; --color-accent-hover: #633a1f; --color-on-accent: #ffffff; }
:root[data-accent="spruce"] { --color-accent: #1f4d3f; --color-accent-hover: #163a2f; --color-on-accent: #ffffff; }
:root[data-accent="ink"] { --color-accent: #1c1c1a; --color-accent-hover: #000000; --color-on-accent: #ffffff; }
:root[data-theme="dark"][data-accent="clay"] { --color-accent: #c98a5c; --color-accent-hover: #d89d72; --color-on-accent: #1c1208; }
:root[data-theme="dark"][data-accent="spruce"] { --color-accent: #5fae8f; --color-accent-hover: #77c3a4; --color-on-accent: #0c1411; }
:root[data-theme="dark"][data-accent="ink"] { --color-accent: #ecebe6; --color-accent-hover: #ffffff; --color-on-accent: #121211; }