/* Design tokens. The only place where raw colors and sizes live.
   Values from the "Regole di stile" page of the Claude Design project. */
:root {
  /* Palette: the Sociabile logo colours, lime #c8f250 on ink #15151f (ADR-0033).
     Lime is a fill only: on light backgrounds it is too pale for text, lines
     or focus, so those use the olive ink or the dark line. */
  --color-primary: #c8f250;
  --color-primary-strong: #b4de3c;
  --color-primary-soft: #f1fad6;
  --color-primary-ink: #3f5a00;
  --color-primary-line: #15151f;
  --color-on-primary: #15151f;
  --color-link: #3f5a00;
  --color-link-hover: #2f4400;
  --color-accent: #c8f250;
  --color-ink: #16161d;
  --color-ink-soft: #3d3d47;
  --color-ink-muted: #6b6b76;
  --color-ink-faint: #b3b3bc;
  --color-bg: #f6f6f7;
  --color-surface: #ffffff;
  --color-surface-muted: #fafafb;
  --color-surface-hover: #fbfdf5;
  --color-border: #e6e6ea;
  --color-border-soft: #eeeef1;
  --color-border-strong: #d8d8de;
  --color-border-accent: #b4de3c;
  --color-neutral: #3d3d47;
  --color-neutral-soft: #ececef;
  --color-success: #1d7a46;
  --color-success-soft: #dcf3e5;
  --color-success-dot: #2f9a5c;
  --color-warning: #8f5300;
  --color-warning-soft: #fdebc8;
  --color-warning-wash: #fffaf0;
  --color-danger: #b3261e;
  --color-danger-soft: #fde3e0;
  --color-destructive: #c0302b;
  --color-destructive-strong: #a32621;
  --color-destructive-soft: #fdecea;
  --color-destructive-border: #efb3ae;
  --color-focus: #15151f;

  /* Dark menu (sidebar and dark blocks): the logo ink */
  --color-menu: #15151f;
  --color-menu-hover: #22222e;
  --color-menu-active: #2b2b39;
  --color-menu-line: #2a2a36;
  --color-menu-ink: #c6c6d2;
  --color-menu-muted: #8c8c9e;
  --color-on-dark: #ffffff;
  --color-topbar: rgb(255 255 255 / 0.92);
  --color-bg-glass: rgb(246 246 247 / 0.95);

  /* Feed previews (T29): neutral colours close to the platforms' own feeds */
  --color-post-ink: #1c1e21;
  --color-post-muted: #65676b;
  --color-post-divider: #e4e6eb;
  --color-post-placeholder: #eef0f3;
  --color-post-badge: rgb(0 0 0 / 0.6);
  --color-post-link-instagram: #00376b;
  --color-post-link-facebook: #385898;
  --color-post-link-linkedin: #0a66c2;

  /* Platform logos (ADR-0022): the colours of their own brand guidelines */
  --color-logo-instagram: #e4405f;
  --color-logo-facebook: #0866ff;
  --color-logo-linkedin: #0a66c2;

  /* Typography */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-post: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;     /* 12px: badges, group labels */
  --text-sm: 0.8125rem;   /* 13px: hints, metadata */
  --text-hint: 0.78125rem; /* 12.5px: help under a field */
  --text-base: 0.875rem;  /* 14px: body text and fields */
  --text-md: 0.9375rem;   /* 15px */
  --text-lg: 1.0625rem;   /* 17px: section titles */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.75rem;    /* 28px: page titles */
  --text-hero: 1.375rem;  /* 22px: dark block on the home page */
  --leading: 1.5;
  --tracking-title: -0.02em;
  --tracking-label: 0.05em;

  /* Spacing scale (multiples of 4) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Shape and depth */
  --radius-xs: 7px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-sm: none;
  --shadow: 0 4px 16px rgb(21 21 31 / 0.08);

  /* Layout */
  --content-max: 72rem;
  --sidebar-width: 244px;
  --topbar-height: 56px;
  --header-height: 56px;
  --page-gutter: 36px;
  --page-gutter-mobile: 16px;
  --form-max: 980px;
  --aside-width: 360px;
  --post-preview-width: 30rem;
  --post-avatar: 2.5rem;
  --post-avatar-small: 2rem;
  --calendar-day-min: 7.5rem;
  --calendar-popover: 20rem;
}