/*
 * rt-global.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Round Table – Global Design System Tokens
 *
 * Extracted from Figma: "Round-Table-for-Development" (node 79:1789)
 *
 * All values are exposed as CSS custom properties on :root.
 * Component stylesheets consume these variables so a single token
 * update propagates everywhere.
 *
 * ── Figma design specs used ──────────────────────────────────────────────────
 * Canvas: 1440px
 * Content area: 1249px (96px left margin, 95px right margin)
 * Columns: 267px | 30px gap | 655px | 30px gap | 267px
 * Top-of-content: 110px (below 80px navbar + 30px gap)
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Colors ────────────────────────────────────────────────────────── */
  --rt-color-bg:           #f7f7f8;   /* page background                    */
  --rt-color-white:        #ffffff;
  --rt-color-text-primary: #111111;   /* headings, names, primary text       */
  --rt-color-text-secondary: #585858; /* secondary / muted text              */
  --rt-color-text-dim:     rgba(17, 17, 17, 0.80); /* role, company, location */
  --rt-color-text-dimmer:  rgba(17, 17, 17, 0.70); /* even lighter labels     */
  --rt-color-brand:        #558af5;   /* blue accent – links, CTAs           */
  --rt-color-border:       #707070;   /* input/form border                   */
  --rt-color-divider:      #dbdbdc;   /* horizontal rules, item separators   */
  --rt-color-comment-bg:   #faf8f7;   /* comment bubble background           */
  --rt-color-active-bar:   #111111;   /* nav active-item indicator           */

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --rt-shadow-card:  0px 0px 20px 0px rgba(0, 0, 0, 0.05);   /* all cards   */
  --rt-shadow-nav:   0px 15px 40px 0px rgba(0, 0, 0, 0.04);  /* top navbar  */
  --rt-shadow-input: 0px 1px 2px 0px rgba(10, 13, 18, 0.05); /* form fields */

  /* ── Typography – Families ─────────────────────────────────────────── */
  --rt-font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rt-font-secondary: 'Poppins', sans-serif;   /* used for video timestamps  */

  /* ── Typography – Weights ──────────────────────────────────────────── */
  --rt-fw-normal:   400;
  --rt-fw-medium:   500;
  --rt-fw-semibold: 600;

  /* ── Typography – Sizes (from Figma) ──────────────────────────────── */
  --rt-text-xs:   10px;   /* job location                              */
  --rt-text-sm:   12px;   /* timestamps, meta, role descriptions       */
  --rt-text-base: 13px;   /* like/share counts                         */
  --rt-text-md:   14px;   /* names, labels, network items              */
  --rt-text-lg:   15px;   /* post body, action labels, job titles      */
  --rt-text-xl:   16px;   /* create-post actions, nav items            */
  --rt-text-2xl:  18px;   /* nav username                              */
  --rt-text-3xl:  20px;   /* profile card display name                 */

  /* ── Typography – Line Heights ────────────────────────────────────── */
  --rt-lh-tight:  16px;
  --rt-lh-base:   20px;
  --rt-lh-lg:     24px;
  --rt-lh-normal: normal;

  /* ── Typography – Letter Spacing ───────────────────────────────────── */
  --rt-ls-xs:  -0.20px;
  --rt-ls-sm:  -0.24px;
  --rt-ls-md:  -0.26px;
  --rt-ls-lg:  -0.28px;
  --rt-ls-xl:  -0.30px;

  /* ── Border Radii ──────────────────────────────────────────────────── */
  --rt-radius-xs:   4px;
  --rt-radius-sm:   5px;    /* input fields, job logos                 */
  --rt-radius-md:   10px;   /* all cards / panels                      */
  --rt-radius-lg:   12px;   /* profile card cover top corners          */
  --rt-radius-pill: 20px;   /* nav item active pill                    */
  --rt-radius-full: 9999px; /* avatars, circular buttons               */

  /* ── Spacing Scale ─────────────────────────────────────────────────── */
  --rt-space-1:  2px;
  --rt-space-2:  4px;
  --rt-space-3:  5px;
  --rt-space-4:  6px;
  --rt-space-5:  8px;
  --rt-space-6:  10px;
  --rt-space-7:  12px;
  --rt-space-8:  14px;
  --rt-space-9:  16px;
  --rt-space-10: 20px;
  --rt-space-11: 24px;
  --rt-space-12: 25px;
  --rt-space-13: 30px;

  /* ── Layout ────────────────────────────────────────────────────────── */
  --rt-sidebar-width:   267px;
  --rt-feed-max-width:  655px;
  --rt-column-gap:       30px;
  --rt-content-max:    1249px;   /* total 3-column content width             */
  --rt-page-margin:      96px;   /* outer page margin (Figma: left=96, right≈95) */
}

#membership-variant-toggle  svg{
  /* transition: transform 300ms ease; */
}

#membership-variant-toggle.rt-membership-variant-toggle--flipped svg{
  transform: scaleX(-1);
}