/* Shared tokens — paper & jade palette
   Calm, lively-but-restrained: warm paper, neutral graphite ink,
   jade/sea-green accent. Greys carry their own subtle warmth so the
   green doesn't feel surgical against pure cool greys. */
:root {
  /* Paper — slightly warm off-whites */
  --paper:    #F4F2EC;   /* main background */
  --paper-2:  #ECE9E1;   /* sunken / secondary */

  /* Ink — graphite, very slightly green-leaning so it sits with jade */
  --ink:      #1F2A28;
  --ink-2:    #34403C;

  /* Slate / mid-greys — warm, low-chroma */
  --slate:    #6E756F;
  --slate-2:  #A0A49C;

  /* Hairlines */
  --hairline:   #D7D3C8;
  --hairline-2: #E4E0D5;

  /* Accent — jade (a touch toward sea). Single hue (170°) for everything. */
  --accent:        oklch(0.55 0.09 170);   /* base jade */
  --accent-strong: oklch(0.42 0.10 170);   /* deep jade for hover / emphasis */
  --accent-soft:   oklch(0.93 0.04 170);   /* tinted background wash */
  --accent-ink:    #FFFFFF;                /* readable on accent fill */

  --sans: "Helvetica Neue", Helvetica, Inter, "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }

/* Placeholder portrait — striped SVG, never auto-drawn faces */
.portrait-placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--hairline) 0 1px,
      transparent 1px 9px
    ),
    var(--paper-2);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--slate);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}