/* ==============================================================
   FS Trust OS — Design Tokens
   私密、克制、编辑级 / Operating System aesthetic
   ============================================================== */

:root {
  /* Ink — system shell, top bar, primary text */
  --ink-100: #07101F;       /* deepest, top bar background */
  --ink-90:  #0B1530;       /* sidebar */
  --ink-80:  #131E3A;       /* card on dark */
  --ink-70:  #1E2A47;       /* hover on dark */
  --ink-60:  #2C3956;       /* line on dark */
  --ink-50:  #475472;       /* secondary text on dark */
  --ink-40:  #6B7591;       /* tertiary text on dark */

  /* Paper — workspace canvas, ivory warm */
  --paper-0:  #FBF8F0;      /* lightest, panels */
  --paper-1:  #F4EFE3;      /* canvas */
  --paper-2:  #EDE7D6;      /* tinted surface */
  --paper-3:  #E4DDC8;      /* warm divider */

  /* Lines & borders — warm, low-contrast */
  --line-100: #0B1530;
  --line-80:  #2A3354;
  --line-50:  #C9C2AC;
  --line-30:  #DCD4BB;
  --line-15:  #E6DFC8;
  --line-08:  #EFEADA;

  /* Text on paper */
  --text-100: #0E1224;      /* primary heading */
  --text-80:  #232A40;      /* body */
  --text-60:  #4A5167;      /* secondary */
  --text-50:  #6E7387;      /* tertiary, captions */
  --text-40:  #8C8E96;      /* hint */
  --text-30:  #A8A597;      /* muted on paper */

  /* Accent — restrained warm amber (selected / key nodes / status) */
  --amber-100: #B14B14;     /* deepest */
  --amber-90:  #C0541E;     /* primary accent */
  --amber-70:  #D2693A;     /* hover */
  --amber-30:  rgba(192,84,30,0.14);
  --amber-15:  rgba(192,84,30,0.07);

  /* Verified — muted teal for trustworthy / secure / signed */
  --jade-100: #2F6258;
  --jade-90:  #3F7A6E;
  --jade-30:  rgba(63,122,110,0.16);
  --jade-15:  rgba(63,122,110,0.08);

  /* Alert — warm rust for attention (used very sparingly) */
  --alert-90: #9B3A2A;
  --alert-15: rgba(155,58,42,0.08);

  /* Type */
  --serif: 'Cormorant Garamond', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radii */
  --r-2: 2px;
  --r-3: 3px;
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;

  /* Elevation — used very sparingly */
  --shadow-1: 0 1px 0 rgba(11,21,48,0.04);
  --shadow-2: 0 4px 18px rgba(11,21,48,0.06);
  --shadow-inset: inset 0 0 0 1px var(--line-15);

  /* Spacing rhythm */
  --gap-1: 4px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 20px;
  --gap-6: 24px;
  --gap-7: 32px;

  /* App shell metrics */
  --bar-h: 56px;
  --bar-h-tight: 50px;
  --side-w: 268px;
  --insp-w: 320px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper-1);
  color: var(--text-80);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Accessibility helpers */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}
.skip {
  position: absolute; left: 12px; top: -40px;
  background: var(--ink-90); color: #fff;
  padding: 8px 12px; border-radius: var(--r-4);
  font-size: 12px; z-index: 200;
  transition: top .15s;
}
.skip:focus { top: 12px; }

::selection { background: var(--amber-30); color: var(--ink-90); }

/* SEO content is preserved but visually removed (kept for crawlers/AT) */
.seo-archive {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: normal;
}

/* Typography primitives */
.t-serif { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; }
.t-mono  { font-family: var(--mono); font-feature-settings: "tnum"; }
.t-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-50);
}
.t-eyebrow--dark { color: var(--ink-40); }
.t-eyebrow--amber { color: var(--amber-90); }

/* Hairline rule */
.rule { display: block; height: 1px; background: var(--line-15); }
.rule--dark { background: var(--ink-60); }

/* Focus ring — visible but quiet */
:focus-visible {
  outline: 2px solid var(--amber-90);
  outline-offset: 2px;
  border-radius: 3px;
}