/* SEF Studio design tokens
 *
 * The marketing palette and type system live here verbatim, with a small set
 * of studio-only additions for app density (denser sections, status pills,
 * platform badges, alignment-score colours).
 */

:root {
  /* Colours (verbatim from sef-marketing) */
  --color-bg: #FBFAF5;
  --color-bg-tint: #F2EEE3;
  --color-text: #1A1A1A;
  --color-muted: #5A5A5A;
  --color-muted-soft: #767169;
  --color-rule: #E5E0D5;
  --color-rule-strong: #C9C2B0;
  --color-oxblood: #5C1F1F;
  --color-oxblood-deep: #4A1818;
  --color-oxblood-hover: #7A2929;
  --color-cream: #F8F1E5;
  --color-error: #8A1F1F;

  /* Type families */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid via clamp) */
  --type-display: clamp(2rem, 4.2vw, 3.25rem);
  --type-h2: clamp(1.65rem, 2.4vw, 2.1rem);
  --type-h3: 1.25rem;
  --type-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --type-body: 1rem;
  --type-small: 0.9375rem;
  --type-eyebrow: 0.75rem;

  /* Layout */
  --canvas-max: 1400px;
  --container-max: 1100px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --rule-thin: 1px;
  --transition-fast: 0.15s ease;

  /* Density (app surfaces are denser than the marketing site) */
  --section-pad-y: clamp(2rem, 5vh, 4rem);
  --section-gap: clamp(1rem, 2.5vh, 1.75rem);
  --app-card-pad: clamp(1rem, 1.6vw, 1.4rem);
  --app-card-radius: 2px;

  /* Status pills (importer + status partial) */
  --color-status-ok-bg: rgba(46, 90, 31, 0.10);
  --color-status-ok-fg: #2F5A1F;
  --color-status-warn-bg: rgba(180, 120, 20, 0.12);
  --color-status-warn-fg: #8A6510;
  --color-status-fail-bg: rgba(138, 31, 31, 0.10);
  --color-status-fail-fg: var(--color-error);
  --color-status-info-bg: var(--color-bg-tint);
  --color-status-info-fg: var(--color-muted);

  /* Alignment scores reuse the status palette */
  --color-align-good-bg: var(--color-status-ok-bg);
  --color-align-good-fg: var(--color-status-ok-fg);
  --color-align-ok-bg:   var(--color-status-warn-bg);
  --color-align-ok-fg:   var(--color-status-warn-fg);
  --color-align-bad-bg:  var(--color-status-fail-bg);
  --color-align-bad-fg:  var(--color-status-fail-fg);

  /* Platform badges (cream-tinted washes, not GitHub-saturated) */
  --color-badge-bluesky-bg: #DCE8F4;
  --color-badge-bluesky-fg: #1F4D7A;
  --color-badge-x-bg: #E8E5DC;
  --color-badge-x-fg: #2A2A2A;
  --color-badge-linkedin-bg: #DDE6EC;
  --color-badge-linkedin-fg: #14506E;
  --color-badge-instagram-bg: #F0DDE3;
  --color-badge-instagram-fg: #8A2349;
  --color-badge-facebook-bg: #DDE5F2;
  --color-badge-facebook-fg: #1F3D7A;

  /* Generic state badge */
  --color-badge-bg: var(--color-bg-tint);
  --color-badge-fg: var(--color-muted);

  /* Legacy aliases. Removed in Pass 8 once all consumers are migrated. */
  --bg: var(--color-bg);
  --panel: var(--color-bg);
  --line: var(--color-rule);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --primary: var(--color-oxblood);
  --primary-hover: var(--color-oxblood-hover);
  --warn: var(--color-status-warn-fg);
  --danger: var(--color-error);
}