/* 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 */
  --color-primary: oklch(0.56 0.2 290);
  --color-primary-strong: oklch(0.5 0.2 290);
  --color-primary-soft: #efedfb;
  --color-primary-ink: oklch(0.42 0.18 290);
  --color-link: oklch(0.48 0.2 290);
  --color-accent: oklch(0.7 0.16 290);
  --color-ink: #16181d;
  --color-ink-soft: #3d414b;
  --color-ink-muted: #6b6f7a;
  --color-ink-faint: #b4b2c0;
  --color-bg: #f7f6fa;
  --color-surface: #ffffff;
  --color-surface-muted: #faf9fc;
  --color-surface-hover: #fbfaff;
  --color-border: #e7e5ee;
  --color-border-soft: #efedf3;
  --color-border-strong: #d9d7e2;
  --color-border-accent: #c9c3ee;
  --color-neutral: #3d414b;
  --color-neutral-soft: #eceaf1;
  --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: oklch(0.56 0.2 290);

  /* Dark menu (sidebar and dark blocks) */
  --color-menu: #17152a;
  --color-menu-hover: #26233d;
  --color-menu-active: #2e2a4a;
  --color-menu-line: #2a2742;
  --color-menu-ink: #c8c5dc;
  --color-menu-muted: #8682a3;
  --color-on-dark: #ffffff;
  --color-topbar: rgb(255 255 255 / 0.92);
  --color-bg-glass: rgb(247 246 250 / 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(40 30 90 / 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;
}