/* Synolo · Brand tokens
   Pulled directly from Brand Concept 01 (May 2026) */

:root {
  /* Colour system */
  --green:      #1F4744;   /* Pneuma Green — the room */
  --green-deep: #14322F;
  --green-soft: #2B5D5A;
  --green-tint: #DDE5E2;   /* soft mint surface */
  --green-wash: #E8EEEA;

  --ink:        #1A2622;
  --ink-soft:   #3C4844;
  --ink-mute:   #6F7672;
  --ink-faint:  #98A09B;

  --terracotta: #9A4A2E;   /* Signal · CTAs · between-session */
  --terracotta-deep: #7C3A22;
  --terracotta-soft: #F1E1D6;

  --clay:       #C8896B;
  --sage:       #A9B39A;
  --sage-soft:  #D4DBCB;

  --stone:      #EFE9DD;   /* Recessed · sub-surfaces (deliberate cream accent) */
  --paper:      #F4F1EA;   /* Cream · accent panels only (brand reference) */
  --paper-warm: #ECE6D7;
  --paper-deep: #E2DBC9;
  --linen:      #FFFFFF;   /* Elevated · cards · pure white */
  --canvas:     #FBFAF7;   /* Main page · whisper-warm white */
  --white-warm: #FFFFFF;   /* Highest — modal/dialog surfaces */

  /* Type */
  --serif: "Newsreader", "Heldane Display", "Charter", "Source Serif Pro", Georgia, serif;
  --sans:  "Manrope", "Circular Spotify Txt", "Inter", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale (from brand sheet 04) */
  --display:  54px;
  --display-lh: 1.06;
  --headline: 32px;
  --headline-lh: 1.15;
  --subhead:  22px;
  --subhead-lh: 1.27;
  --body:     15px;
  --body-lh:  1.6;
  --caption:  12px;
  --caption-lh: 1.5;

  /* Geometry */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

/* Reset-ish, scoped */
.syn, .syn * { box-sizing: border-box; }
.syn { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.syn .h-display { font-family: var(--serif); font-weight: 400; font-size: var(--display); line-height: var(--display-lh); letter-spacing: -0.015em; }
.syn .h-headline { font-family: var(--serif); font-weight: 400; font-size: var(--headline); line-height: var(--headline-lh); letter-spacing: -0.01em; }
.syn .h-subhead { font-family: var(--serif); font-weight: 400; font-size: var(--subhead); line-height: var(--subhead-lh); letter-spacing: -0.005em; }
.syn .t-body { font-size: var(--body); line-height: var(--body-lh); }
.syn .t-caption { font-size: var(--caption); line-height: var(--caption-lh); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.syn .t-eyebrow { font-size: 11px; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; }
.syn .t-italic { font-style: italic; }

/* Hairline status — never a fill (brand rule) */
.syn .hairline { box-shadow: inset 2px 0 0 currentColor; padding-left: 12px; }

.syn .surface-paper { background: var(--paper); }
.syn .surface-stone { background: var(--stone); }
.syn .surface-green { background: var(--green); color: var(--paper); }

/* Subtle paper texture — barely visible warm noise */
.syn .paper-grain {
  background-color: var(--canvas);
}

/* Buttons */
.syn .btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 14px; line-height: 1;
  padding: 12px 18px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.syn .btn-primary { background: var(--green); color: var(--paper); }
.syn .btn-primary:hover { background: var(--green-deep); }
.syn .btn-signal { background: var(--terracotta); color: var(--paper); }
.syn .btn-signal:hover { background: var(--terracotta-deep); }
.syn .btn-ghost { background: transparent; color: var(--ink); border-color: rgba(26,38,34,0.18); }
.syn .btn-ghost:hover { background: rgba(26,38,34,0.04); }
.syn .btn-quiet { background: transparent; color: var(--green); padding: 8px 0; }
.syn .btn-quiet:hover { color: var(--green-deep); }

/* Cards — elevated, brighter than the canvas */
.syn .card {
  background: var(--linen);
  border: 1px solid rgba(26,38,34,0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(26,38,34,0.02), 0 12px 32px -20px rgba(26,38,34,0.14);
}
.syn .card-stone { background: var(--stone); box-shadow: none; }
.syn .card-paper { background: var(--paper); box-shadow: none; }
.syn .divider { height: 1px; background: rgba(26,38,34,0.07); }

/* Pills / chips */
.syn .pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; line-height: 1; padding: 6px 10px;
  border-radius: 999px; border: 1px solid rgba(26,38,34,0.12);
  color: var(--ink-soft); background: transparent;
}
.syn .pill-green  { color: var(--green);      border-color: rgba(31,71,68,0.25);   background: rgba(31,71,68,0.05); }
.syn .pill-terra  { color: var(--terracotta); border-color: rgba(154,74,46,0.28);  background: rgba(154,74,46,0.06); }
.syn .pill-sage   { color: #4F5A48;           border-color: rgba(79,90,72,0.25);   background: rgba(169,179,154,0.18); }
.syn .pill-ink    { color: var(--ink-soft);   border-color: rgba(26,38,34,0.15);   background: rgba(26,38,34,0.03); }

/* Focus */
.syn :focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }