/* Alin Global — shared design tokens */
:root {
  /* Warm pastel palette */
  --cream: #F5E6D3;
  --cream-soft: #FBF4EA;
  --peach: #E8B4A0;
  --peach-soft: #F2CFBF;
  --terracotta: #D4876B;
  --terracotta-deep: #BE6F54;
  --cocoa: #8B5A3C;
  --cocoa-deep: #5C3A24;
  --ink: #2A1E14;
  --ink-soft: #4A392D;
  --paper: #FBF7F1;
  --line: rgba(139, 90, 60, 0.18);
  --line-strong: rgba(139, 90, 60, 0.35);

  /* Type */
  --font-heading-he: 'Frank Ruhl Libre', 'Fraunces', Georgia, serif;
  --font-body-he: 'Assistant', 'Heebo', system-ui, sans-serif;
  --font-heading-en: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body-en: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[lang="he"] { font-family: var(--font-body-he); }
[lang="en"] { font-family: var(--font-body-en); }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Placeholder image — warm striped */
.ph-img {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(139, 90, 60, 0.06) 0 12px,
      rgba(139, 90, 60, 0.12) 12px 24px
    ),
    linear-gradient(180deg, var(--peach-soft), var(--cream));
  color: var(--cocoa-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
}
.ph-img::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(139, 90, 60, 0.35);
  pointer-events: none;
}
.ph-img > span { position: relative; z-index: 1; background: var(--paper); padding: 4px 10px; border-radius: 2px; }

/* Real-image wrapper — replaces .ph-img when actual images are present */
.site-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }