/* Social Code, foundation v1. Every literal color is from the existing source.
   Import after the font loader, before component styles. No global element reset.
   --font-outfit and --font-work-sans support the app's next/font variables. */
:root {
  color-scheme: dark;

  /* Immutable brand primitives: social-code-app/tailwind.config.ts. */
  --sc-navy-950: #080F18;
  --sc-navy-900: #0D1825;
  --sc-navy-800: #101B28;
  --sc-navy-700: #131E2B;
  --sc-navy-600: #1A2332;
  --sc-navy-500: #1E2D3E;
  --sc-navy-400: #243548;
  --sc-teal: #00D9C0;
  --sc-teal-dark: #00A896;
  --sc-teal-light: #4DE8D4;
  --sc-coral: #FF6B6B;
  --sc-coral-dark: #E55E5E;
  --sc-coral-light: #FF8C8C;
  --sc-offwhite: #F7F9FC;
  /* Existing marketing utilities and hover; existing dashboard warning. */
  --sc-slate-400: #94A3B8;
  --sc-slate-500: #64748B;
  --sc-coral-marketing-hover: #FF8A80;
  --sc-amber: #FBBF24;

  /* Semantic roles. Components consume these, never raw hex values. */
  --sc-bg: var(--sc-navy-900);
  --sc-bg-subtle: var(--sc-navy-800);
  --sc-surface: var(--sc-navy-700);
  --sc-surface-raised: var(--sc-navy-600);
  --sc-text: var(--sc-offwhite);
  --sc-text-secondary: var(--sc-slate-400);
  --sc-text-disabled: var(--sc-slate-500);
  --sc-border: var(--sc-navy-400);
  --sc-control-border: var(--sc-slate-500);
  --sc-accent: var(--sc-teal);
  --sc-link: var(--sc-teal);
  --sc-link-hover: var(--sc-teal-light);
  --sc-action: var(--sc-coral);
  --sc-action-hover: var(--sc-coral-marketing-hover);
  --sc-action-active: var(--sc-coral-dark);
  --sc-on-action: var(--sc-navy-950);
  --sc-focus: var(--sc-teal-light);
  --sc-positive: var(--sc-teal);
  --sc-danger: var(--sc-coral);
  --sc-warning: var(--sc-amber);

  /* Retain both existing typefaces; narrow their responsibilities. */
  --sc-font-display: var(--font-outfit, "Outfit"), sans-serif;
  --sc-font-body: var(--font-work-sans, "Work Sans"), sans-serif;
  --sc-font-ui: var(--sc-font-body);
  --sc-text-xs: 0.8125rem;
  --sc-text-sm: 0.875rem;
  --sc-text-base: 1rem;
  --sc-text-lg: 1.125rem;
  --sc-text-lead: clamp(1.25rem, 1.05rem + 0.65vw, 1.5rem);
  --sc-text-display: clamp(2.75rem, 1.15rem + 4.1vw, 5.5rem);
  --sc-text-title: clamp(2rem, 1.5rem + 1.8vw, 3.5rem);
  --sc-text-section: clamp(1.5rem, 1.15rem + 1vw, 2.25rem);
  --sc-text-app-title: clamp(1.5rem, 1.2rem + 0.6vw, 2rem);
  --sc-weight-regular: 400;
  --sc-weight-medium: 500;
  --sc-weight-semibold: 600;
  --sc-leading-display: 1.04;
  --sc-leading-title: 1.14;
  --sc-leading-body: 1.65;
  --sc-leading-prose: 1.8;
  --sc-leading-ui: 1.4;
  --sc-tracking-display: -0.045em;
  --sc-tracking-title: -0.025em;
  --sc-tracking-label: 0.1em;

  /* A 4px foundation; 8px increments carry most layout decisions. */
  --sc-space-1: 0.25rem;
  --sc-space-2: 0.5rem;
  --sc-space-3: 0.75rem;
  --sc-space-4: 1rem;
  --sc-space-5: 1.25rem;
  --sc-space-6: 1.5rem;
  --sc-space-8: 2rem;
  --sc-space-10: 2.5rem;
  --sc-space-12: 3rem;
  --sc-space-16: 4rem;
  --sc-space-20: 5rem;
  --sc-space-24: 6rem;
  --sc-space-32: 8rem;

  --sc-content-max: 80rem;
  --sc-editorial-max: 72rem;
  --sc-prose-max: 65ch;
  --sc-sidebar-width: 15rem;
  --sc-gutter: clamp(1.25rem, 4vw, 4rem);
  --sc-section-space: clamp(4rem, 7vw, 8rem);
  --sc-app-space: clamp(1rem, 2vw, 2rem);
  --sc-header-height: 5rem;
  --sc-control-height: 3rem;
  --sc-touch-min: 2.75rem;
  --sc-radius-control: 0.25rem;
  --sc-radius-panel: 0.375rem;
  --sc-rule: 1px;
  --sc-shadow: none;
  --sc-duration: 160ms;
  --sc-easing: ease-out;
  --sc-z-header: 20;
}

/* Optional surface contracts for later adoption, not a dashboard redesign. */
.sc-scope {
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-base);
  line-height: var(--sc-leading-body);
}
.sc-scope *, .sc-scope *::before, .sc-scope *::after { box-sizing: border-box; }
.sc-scope :focus-visible {
  outline: 2px solid var(--sc-focus);
  outline-offset: 5px;
}
.sc-scope ::selection { background: var(--sc-accent); color: var(--sc-on-action); }
.sc-container {
  width: min(calc(100% - 2 * var(--sc-gutter)), var(--sc-content-max));
  margin-inline: auto;
}
.sc-prose {
  max-width: var(--sc-prose-max);
  font-family: var(--sc-font-body);
  font-size: var(--sc-text-lg);
  line-height: var(--sc-leading-prose);
}
.sc-prose > * + * { margin-block-start: var(--sc-space-6); }
.sc-prose :is(h2, h3) {
  margin-block-start: var(--sc-space-12);
  font-family: var(--sc-font-display);
  font-weight: var(--sc-weight-semibold);
  line-height: var(--sc-leading-title);
  letter-spacing: var(--sc-tracking-title);
}
.sc-prose a { color: var(--sc-link); text-underline-offset: 0.2em; }
.sc-app-surface { padding: var(--sc-app-space); }
.sc-panel {
  background: var(--sc-surface);
  border: var(--sc-rule) solid var(--sc-border);
  border-radius: var(--sc-radius-panel);
  box-shadow: var(--sc-shadow);
}
.sc-number { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  :root { --sc-duration: 0ms; }
}