/* ==========================================================================
   rspsnsbl — ELEGANT GRAY theme tokens
   Dark ink on warm taupe-gray surfaces. Editorial. Sophisticated. Calm.
   Same brand DNA: Scandinavian minimalist, Nordic green accent, Source Serif 4+Inter.
   --------------------------------------------------------------------------
   To use: <link rel="stylesheet" href="tokens-elegant.css">
   All --rs-* variable names are identical to the dark and light tokens,
   so the same components work without code changes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,ital,wght@8..60,0,200;8..60,0,300;8..60,0,400;8..60,0,600;8..60,0,700;8..60,1,400;8..60,1,700&family=Inter:wght@300;400;500&display=swap');

:root {
  /* === COLOR (ELEGANT GRAY) ============================================ */
  /* Surfaces — warm taupe-gray family. Multiple layers for depth. */
  --rs-bg:            #e6e4de;    /* page surface — Nordic stone / oatmeal linen */
  --rs-bg-elevated:   #efede7;    /* cards / panels lift off the page */
  --rs-bg-selected:   #d8d5cc;    /* selected / confirmed (deeper) */
  --rs-bg-input:      #ffffff;    /* inputs — pure white feels recessed */

  /* Ink — near-black on the gray, all WCAG AAA where applicable
     CONTRAST against #e6e4de:
       --rs-ink         13:1   AAA — body text, table content, headings
       --rs-ink-soft     7:1   AAA — sidebar nav, secondary labels
       --rs-ink-faint    4.7:1 AA  — eyebrows, metadata, column headers
       --rs-ink-disabled 3:1   --  — only for disabled controls */
  --rs-ink:           #1a1d22;
  --rs-ink-soft:      #4d525a;
  --rs-ink-faint:     #6f747c;
  --rs-ink-disabled:  #a8acb2;

  /* Lines — slightly darker on gray than on white, so they remain visible */
  --rs-line:          rgba(26, 29, 34, 0.10);
  --rs-line-soft:     rgba(26, 29, 34, 0.05);
  --rs-line-strong:   rgba(26, 29, 34, 0.18);

  /* Accent — deeper Nordic green for richer contrast on warm gray */
  --rs-accent:        #2a6e4a;
  --rs-accent-soft:   rgba(42, 110, 74, 0.10);
  --rs-accent-glow:   rgba(42, 110, 74, 0.22);

  /* Inverted (dark panel on gray page — for "moment" panels & previews) */
  --rs-ink-bg:        #1a1d22;
  --rs-ink-bg-2:      #232730;
  --rs-on-light:      #f1efe9;
  --rs-on-light-soft: #cfcdc6;

  /* === TYPOGRAPHY (identical to other themes) ========================== */
  --rs-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --rs-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  --rs-w-light: 200; --rs-w-book: 300; --rs-w-regular: 400; --rs-w-medium: 500;

  --rs-size-display-1: clamp(42px, 5.2vw, 80px);
  --rs-size-display-2: clamp(34px, 4vw, 56px);
  --rs-size-display-3: clamp(24px, 2.4vw, 36px);
  --rs-size-body-lg: 17px; --rs-size-body: 14px; --rs-size-body-sm: 13px;
  --rs-size-caption: 12px; --rs-size-eyebrow: 10px;

  --rs-lh-display: 1.08; --rs-lh-tight: 1.2; --rs-lh-body: 1.5;

  --rs-tracking-display: -0.03em;
  --rs-tracking-tight:   -0.015em;
  --rs-tracking-body:    0;
  --rs-tracking-wide:    0.18em;
  --rs-tracking-eyebrow: 0.24em;

  /* === SPACING ========================================================= */
  --rs-space-1:4px; --rs-space-2:8px; --rs-space-3:12px;
  --rs-space-4:16px; --rs-space-5:22px; --rs-space-6:28px;
  --rs-space-7:36px; --rs-space-8:44px; --rs-space-9:56px;
  --rs-space-10:72px; --rs-space-11:96px;

  /* === LAYOUT / RADIUS / MOTION ======================================== */
  --rs-max-width: 1600px;
  --rs-page-pad: 44px; --rs-page-pad-tablet: 28px; --rs-page-pad-mobile: 20px;
  --rs-bp-tablet: 1080px; --rs-bp-mobile: 560px;

  --rs-radius-sm: 6px; --rs-radius-md: 12px; --rs-radius-lg: 18px;
  --rs-radius-pill: 999px;
  --rs-hairline: 1px solid var(--rs-line);

  --rs-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rs-ease-fast: cubic-bezier(0.4, 0, 0.2, 1);
  --rs-dur-fast: 250ms; --rs-dur-base: 400ms; --rs-dur-slow: 700ms;

  --rs-shadow-sm: 0 1px 2px rgba(26,29,34,0.04), 0 2px 8px rgba(26,29,34,0.05);
  --rs-shadow-md: 0 4px 16px rgba(26,29,34,0.08);
  --rs-glow-accent: 0 0 18px var(--rs-accent-glow);
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--rs-bg); color: var(--rs-ink);
  font-family: var(--rs-font-body);
  font-weight: var(--rs-w-regular); font-size: var(--rs-size-body);
  line-height: var(--rs-lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
button { font-family: inherit; }

/* --------------------------------------------------------------------------
   UTILITY CLASSES (same names as other themes, mapped to elegant tokens)
   -------------------------------------------------------------------------- */
.rs-display-1 { font-family: var(--rs-font-display); font-weight: var(--rs-w-light); font-size: var(--rs-size-display-1); line-height: var(--rs-lh-display); letter-spacing: var(--rs-tracking-display); }
.rs-display-2 { font-family: var(--rs-font-display); font-weight: var(--rs-w-book); font-size: var(--rs-size-display-2); line-height: var(--rs-lh-display); letter-spacing: var(--rs-tracking-display); }
.rs-display-3 { font-family: var(--rs-font-display); font-weight: var(--rs-w-book); font-size: var(--rs-size-display-3); line-height: var(--rs-lh-tight); letter-spacing: var(--rs-tracking-tight); }
.rs-eyebrow   { font-family: var(--rs-font-display); font-weight: var(--rs-w-regular); font-size: var(--rs-size-eyebrow); letter-spacing: var(--rs-tracking-eyebrow); text-transform: uppercase; color: var(--rs-ink-faint); }
.rs-italic-accent { font-style: italic; font-weight: var(--rs-w-book); color: var(--rs-accent); }
.rs-soft  { color: var(--rs-ink-soft); }
.rs-faint { color: var(--rs-ink-faint); }
.rs-container { max-width: var(--rs-max-width); margin: 0 auto; padding: 0 var(--rs-page-pad); }
.rs-divider   { border: 0; border-top: var(--rs-hairline); margin: 0; }

/* Action strip (marketing only) */
.rs-strip { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); border-top: var(--rs-hairline); }
.rs-cell { position: relative; padding: var(--rs-space-5); border-right: var(--rs-hairline); text-decoration: none; color: var(--rs-ink); display: flex; flex-direction: column; gap: var(--rs-space-3); transition: background var(--rs-dur-base) ease; overflow: hidden; }
.rs-cell:last-child { border-right: 0; }
.rs-cell::before { content:''; position:absolute; top:-1px; left:0; width:0; height:1px; background:var(--rs-accent); box-shadow:var(--rs-glow-accent); transition: width var(--rs-dur-slow) var(--rs-ease); }
.rs-cell:hover { background: var(--rs-accent-soft); }
.rs-cell:hover::before { width: 100%; }

/* Two-line menu trigger */
.rs-menu-trigger { width:32px; height:18px; background:transparent; border:0; cursor:pointer; padding:0; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.rs-menu-trigger span { display:block; height:1px; background:var(--rs-ink); transition: background var(--rs-dur-fast) ease, width var(--rs-dur-base) var(--rs-ease), transform var(--rs-dur-base) ease; }
.rs-menu-trigger span:nth-child(1) { width:32px; }
.rs-menu-trigger span:nth-child(2) { width:22px; align-self:flex-end; }
.rs-menu-trigger:hover span { background: var(--rs-accent); }
.rs-menu-trigger:hover span:nth-child(2) { width:32px; }

/* Pill button */
.rs-btn { display:inline-block; padding:12px 22px; border:1px solid var(--rs-line-strong); border-radius:var(--rs-radius-pill); background:transparent; color:var(--rs-ink); font-family:var(--rs-font-body); font-size:var(--rs-size-body); font-weight:var(--rs-w-medium); text-decoration:none; cursor:pointer; transition: all var(--rs-dur-fast) ease; }
.rs-btn:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
.rs-btn-primary { background: var(--rs-accent); border-color: var(--rs-accent); color: #ffffff; }
.rs-btn-primary:hover { box-shadow: var(--rs-glow-accent); color: #ffffff; }

/* Fact card */
.rs-fact-card { background: var(--rs-bg-elevated); border: 1px solid var(--rs-line); border-radius: var(--rs-radius-md); padding: var(--rs-space-4) var(--rs-space-5); display: flex; flex-direction: column; gap: 6px; transition: background var(--rs-dur-base) ease, border-color var(--rs-dur-base) ease; position: relative; cursor: pointer; min-height: 76px; }
.rs-fact-card:hover { border-color: var(--rs-line-strong); background: var(--rs-bg-selected); }
.rs-fact-card.is-confirmed,
.rs-fact-card[aria-checked="true"] { background: var(--rs-bg-selected); border-color: rgba(42,110,74,0.35); }
.rs-fact-card.is-confirmed::before { content:''; position:absolute; top:0; left:var(--rs-space-5); width:22px; height:1px; background:var(--rs-accent); box-shadow:0 0 8px var(--rs-accent-glow); }
.rs-fact-card .label { font-family: var(--rs-font-display); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color: var(--rs-ink-faint); }
.rs-fact-card .value { font-family: var(--rs-font-display); font-weight:400; font-size:16px; line-height:1.3; letter-spacing:-0.01em; color: var(--rs-ink); }
.rs-fact-card .edit  { position:absolute; top:var(--rs-space-3); right:var(--rs-space-4); font-family:var(--rs-font-body); font-size:11px; color:var(--rs-ink-faint); background:none; border:0; cursor:pointer; padding:4px 6px; border-radius:var(--rs-radius-sm); }
.rs-fact-card .edit:hover { color: var(--rs-accent); background: var(--rs-accent-soft); }
.rs-fact-card.is-empty .value { color: var(--rs-ink-faint); font-style: italic; }

/* Inverted panel — dark "moment" card on gray page */
.rs-panel-inverted { background: var(--rs-ink-bg); color: var(--rs-on-light); border-radius: var(--rs-radius-lg); padding: var(--rs-space-7); }
.rs-panel-inverted * { color: inherit; }
.rs-panel-inverted .soft  { color: var(--rs-on-light-soft); }
.rs-panel-inverted .label { font-family: var(--rs-font-display); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rs-on-light-soft); }

/* Sidebar nav */
.rs-sidebar { background: var(--rs-bg); border-right: 1px solid var(--rs-line); padding: var(--rs-space-5); }
.rs-sidebar-section-label { font-family: var(--rs-font-display); font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--rs-ink-faint); margin: var(--rs-space-6) 0 var(--rs-space-3); }
.rs-sidebar-item { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; margin:0 -10px; border-radius:6px; color:var(--rs-ink-soft); font-family:var(--rs-font-body); font-size:14px; text-decoration:none; cursor:pointer; transition: color var(--rs-dur-fast) ease, background var(--rs-dur-fast) ease; }
.rs-sidebar-item:hover { color: var(--rs-ink); background: rgba(26,29,34,0.04); }
.rs-sidebar-item.is-active { color: var(--rs-ink); background: var(--rs-accent-soft); position: relative; }
.rs-sidebar-item.is-active::before { content:''; position:absolute; left:-10px; top:8px; bottom:8px; width:2px; background:var(--rs-accent); border-radius:2px; }
.rs-sidebar-item .count { font-family:var(--rs-font-display); font-size:11px; letter-spacing:0.06em; color:var(--rs-ink-faint); background:var(--rs-bg-elevated); padding:2px 8px; border-radius:8px; }

/* Steps */
.rs-steps { display:flex; align-items:center; gap:var(--rs-space-4); padding:var(--rs-space-4) 0; }
.rs-step  { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.rs-step + .rs-step::before { content:''; flex:0 0 auto; width:32px; height:1px; background:var(--rs-line-strong); margin-right:var(--rs-space-2); }
.rs-step-num { width:24px; height:24px; border-radius:50%; border:1px solid var(--rs-line-strong); display:inline-flex; align-items:center; justify-content:center; font-family:var(--rs-font-display); font-size:11px; color:var(--rs-ink-faint); flex:0 0 auto; }
.rs-step-label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rs-step-eyebrow { font-family:var(--rs-font-display); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rs-ink-faint); }
.rs-step-name    { font-family:var(--rs-font-display); font-size:14px; color:var(--rs-ink-soft); }
.rs-step.is-active .rs-step-num { background: var(--rs-ink); color: var(--rs-bg); border-color: var(--rs-ink); }
.rs-step.is-active .rs-step-eyebrow,
.rs-step.is-active .rs-step-name { color: var(--rs-ink); }
.rs-step.is-complete .rs-step-num { background: var(--rs-accent-soft); border-color: var(--rs-accent); color: var(--rs-accent); }

/* Table */
.rs-table { width:100%; border-collapse:collapse; }
.rs-table th, .rs-table td { padding:14px 16px; text-align:left; }
.rs-table th { font-family:var(--rs-font-display); font-weight:400; font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--rs-ink-faint); border-bottom:1px solid var(--rs-line-strong); }
.rs-table td { color:var(--rs-ink); font-size:14px; border-bottom:1px solid var(--rs-line); }
.rs-table tr:hover td { background: rgba(26,29,34,0.025); }
.rs-table .code { font-family:'SF Mono',Menlo,monospace; font-size:12px; letter-spacing:0.04em; color:var(--rs-ink-soft); }
.rs-table .meta { color: var(--rs-ink-soft); font-size:13px; }
.rs-table .num  { font-family: var(--rs-font-display); font-size:15px; color: var(--rs-ink); }

/* Badge */
.rs-badge { display:inline-flex; align-items:center; font-family:var(--rs-font-body); font-size:11px; font-weight:500; letter-spacing:0.04em; padding:3px 9px; border-radius:999px; border:1px solid var(--rs-line-strong); background:var(--rs-bg-elevated); color:var(--rs-ink-soft); white-space:nowrap; }
.rs-badge.is-positive { color:var(--rs-accent); border-color:rgba(42,110,74,0.35); background:var(--rs-accent-soft); }
.rs-badge.is-pending { color:var(--rs-ink); border-color:var(--rs-line-strong); }
.rs-badge.is-needs-attention { color:var(--rs-ink); border-color:var(--rs-line-strong); background:var(--rs-bg-elevated); }
.rs-badge.is-needs-attention::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--rs-ink); margin-right:6px; }

/* Tabs */
.rs-tabs { display:flex; gap:var(--rs-space-6); border-bottom:1px solid var(--rs-line-strong); }
.rs-tab { display:inline-flex; align-items:center; gap:8px; padding:12px 0; font-family:var(--rs-font-body); font-size:14px; color:var(--rs-ink-soft); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; transition: color var(--rs-dur-fast) ease, border-color var(--rs-dur-fast) ease; }
.rs-tab:hover { color: var(--rs-ink); }
.rs-tab.is-active { color: var(--rs-ink); border-bottom-color: var(--rs-accent); }
.rs-tab .count { font-family: var(--rs-font-display); font-size:11px; color: var(--rs-ink-faint); letter-spacing:0.06em; }