/* =========================================================
   YAHASRA DESIGN TOKENS — Light Heritage Theme
   Version: 8.0

   A warm, refined design system derived from the Hamsa/Star-of-David logo.
   Gold and emerald accents on white/cream backgrounds.
   ========================================================= */

:root {
  /* === BACKGROUNDS === */
  --y-white: #FFFFFF;
  --y-cream: #FAF8F4;
  --y-cream-warm: #F5F0E6;
  --y-surface: #F0EDE6;
  --y-surface-hover: #E8E4DC;
  --y-border: rgba(139, 107, 74, 0.15);
  --y-border-hover: rgba(139, 107, 74, 0.30);

  /* === GOLD RAMP (Primary Accent) === */
  --y-gold: #9A7348;
  --y-gold-rich: #8B6B4A;
  --y-gold-accent: #C4956A;
  --y-gold-light: #D4A843;
  --y-gold-bg: rgba(196, 149, 106, 0.08);

  /* === EMERALD RAMP (Secondary Accent) === */
  --y-emerald: #1D6B52;
  --y-emerald-light: #2A8F6E;
  --y-emerald-dim: #164D3B;
  --y-emerald-bg: rgba(29, 107, 82, 0.07);

  /* === TEXT === */
  --y-ink: #1A1714;
  --y-ink-secondary: #4A4439;
  --y-ink-muted: #8A8278;

  /* === TYPOGRAPHY === */
  --y-font-display: 'Cormorant Garamond', Georgia, serif;
  --y-font-body: 'Source Sans 3', 'Segoe UI', sans-serif;

  /* === DECORATIVE === */
  --y-zellige: repeating-linear-gradient(
    90deg,
    var(--y-gold-accent) 0px, var(--y-gold-accent) 8px,
    transparent 8px, transparent 12px,
    var(--y-emerald) 12px, var(--y-emerald) 20px,
    transparent 20px, transparent 24px
  );

  /* === SHADOWS === */
  --y-shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.05);
  --y-shadow-md: 0 4px 12px rgba(26, 23, 20, 0.08);
  --y-shadow-lg: 0 8px 24px rgba(26, 23, 20, 0.12);

  /* === TRANSITIONS === */
  --y-transition-fast: 150ms ease;
  --y-transition-normal: 250ms ease;

  /* === SPACING (consistent with Tailwind) === */
  --y-radius-sm: 6px;
  --y-radius-md: 12px;
  --y-radius-lg: 16px;
  --y-radius-full: 9999px;
}

/* === UTILITY CLASSES === */

/* Backgrounds */
.y-bg-white { background-color: var(--y-white); }
.y-bg-cream { background-color: var(--y-cream); }
.y-bg-cream-warm { background-color: var(--y-cream-warm); }
.y-bg-surface { background-color: var(--y-surface); }
.y-bg-gold { background-color: var(--y-gold-bg); }
.y-bg-emerald { background-color: var(--y-emerald-bg); }

/* Text colors */
.y-text-ink { color: var(--y-ink); }
.y-text-secondary { color: var(--y-ink-secondary); }
.y-text-muted { color: var(--y-ink-muted); }
.y-text-gold { color: var(--y-gold); }
.y-text-emerald { color: var(--y-emerald); }

/* Typography */
.y-font-display { font-family: var(--y-font-display); }
.y-font-body { font-family: var(--y-font-body); }

/* Borders */
.y-border { border: 1px solid var(--y-border); }
.y-border-hover { border: 1px solid var(--y-border-hover); }

/* Cards */
.y-card {
  background: var(--y-white);
  border: 1px solid var(--y-border);
  border-radius: var(--y-radius-md);
  transition: all var(--y-transition-normal);
}

.y-card:hover {
  background: var(--y-cream);
  border-color: var(--y-border-hover);
  box-shadow: var(--y-shadow-md);
}

/* Buttons */
.y-btn-primary {
  background: var(--y-gold);
  color: var(--y-white);
  font-family: var(--y-font-body);
  font-weight: 600;
  padding: 0.625rem 1.25rem;
  border-radius: var(--y-radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--y-transition-fast);
}

.y-btn-primary:hover {
  background: var(--y-gold-rich);
}

.y-btn-secondary {
  background: transparent;
  color: var(--y-ink-secondary);
  font-family: var(--y-font-body);
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: var(--y-radius-sm);
  border: 1px solid var(--y-border-hover);
  cursor: pointer;
  transition: all var(--y-transition-fast);
}

.y-btn-secondary:hover {
  background: var(--y-cream);
  border-color: var(--y-gold);
  color: var(--y-gold);
}

/* Section labels */
.y-section-label {
  font-family: var(--y-font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--y-emerald);
}

/* Inputs */
.y-input {
  background: var(--y-white);
  border: 1px solid var(--y-border-hover);
  border-radius: var(--y-radius-sm);
  padding: 0.75rem 1rem;
  font-family: var(--y-font-body);
  font-size: 16px;
  color: var(--y-ink);
  transition: all var(--y-transition-fast);
}

.y-input:focus {
  outline: none;
  border-color: var(--y-gold);
  box-shadow: 0 0 0 3px rgba(196, 149, 106, 0.1);
}

.y-input::placeholder {
  color: var(--y-ink-muted);
}

/* Zellige decorative border */
.y-zellige-border {
  height: 4px;
  background: var(--y-zellige);
}

/* Links */
.y-link {
  color: var(--y-ink-secondary);
  text-decoration: none;
  transition: color var(--y-transition-fast);
}

.y-link:hover {
  color: var(--y-gold);
}

/* Tables */
.y-table {
  width: 100%;
  background: var(--y-white);
  border-collapse: collapse;
}

.y-table th {
  background: var(--y-cream);
  font-family: var(--y-font-body);
  font-weight: 600;
  color: var(--y-ink);
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--y-border);
}

.y-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--y-border);
  color: var(--y-ink-secondary);
}

.y-table tr:hover td {
  background: var(--y-cream);
}

/* RTL Support */
[dir="rtl"] .y-zellige-border {
  background: repeating-linear-gradient(
    -90deg,
    var(--y-gold-accent) 0px, var(--y-gold-accent) 8px,
    transparent 8px, transparent 12px,
    var(--y-emerald) 12px, var(--y-emerald) 20px,
    transparent 20px, transparent 24px
  );
}