/* ==========================================================================
   Fikoraa — base design system
   Tokens, reset, typography, layout primitives.
   Layout concept: ivory editorial pages, forest-green ink, champagne-gold
   used sparingly as thread and trim, with a textile-inspired diamond band.
   ========================================================================== */

:root {
  /* Brand palette */
  --ivory: #F8F4EC;
  --warm-white: #FFFDF7;
  --sage: #E3E9DF;
  --forest: #304638;
  --forest-2: #3F5A48;
  --forest-deep: #1F2F25;
  --charcoal: #2F342F;
  --gold: #B89B63;
  --gold-soft: #D8C8A8;
  --gold-ink: #7A6236;      /* gold dark enough for small text on ivory */
  --gold-light: #E2CC98;    /* gold light enough for text on forest */

  /* Neutrals biased toward the forest/ivory family */
  --line: #E4DACA;
  --line-strong: #CFC0A2;
  --muted: #5B665E;
  --muted-2: #7B847D;

  /* Semantic */
  --success: #2F6B47;
  --success-bg: #E2EFE5;
  --warning: #8A5A12;
  --warning-bg: #F7EBD3;
  --danger: #9B2C2C;
  --danger-bg: #F7E3E0;
  --info: #2C4F6B;
  --info-bg: #E2ECF3;

  /* Roles */
  --bg: var(--ivory);
  --surface: var(--warm-white);
  --fg: var(--charcoal);
  --heading: var(--forest);
  --accent: var(--forest);
  --on-accent: var(--warm-white);
  --focus: #A07C2E;

  /* Type */
  --font-display: "Cormorant Garamond", "Noto Serif Ethiopic", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", "Noto Sans Ethiopic", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ethiopic: "Noto Sans Ethiopic", "Abyssinica SIL", "Nyala", var(--font-body);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  --fs-2xl: clamp(2.125rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --maxw: 75rem;

  /* Shape */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(31, 47, 37, 0.06);
  --shadow-md: 0 10px 30px rgba(31, 47, 37, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 47, 37, 0.14);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;

  /* Textile-inspired band tile (generic geometry), used as a mask so any color can fill it */
  --motif-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cpath d='M0 .75h24M0 13.25h24' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M6 3l4 4-4 4-4-4z' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M18 4.6l2.4 2.4-2.4 2.4-2.4-2.4z' fill='black'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--forest); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--forest-deep); }
[hidden] { display: none !important; }
:lang(am), :lang(ti), .ethiopic { font-family: var(--font-ethiopic); line-height: 1.75; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 1000;
  background: var(--forest); color: var(--on-accent);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--sp-4); color: var(--on-accent); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 600; }
p { margin: 0; }
.lede { font-size: var(--fs-md); line-height: 1.7; color: var(--muted); max-width: 40rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-ink);
}
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }
.eyebrow.no-rule::before { display: none; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
.serif { font-family: var(--font-display); }
em.gold { font-style: italic; color: var(--gold-ink); }
.prose { max-width: 44rem; display: grid; gap: var(--sp-4); }
.prose h2 { font-size: var(--fs-xl); margin-top: var(--sp-5); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-3); }
.prose ul { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--sp-2); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: 52rem; }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section.tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section-head { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); max-width: 46rem; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head.row {
  max-width: none; display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: var(--sp-5);
}
.section-head.row > div { display: grid; gap: var(--sp-4); max-width: 46rem; }
.bg-surface { background: var(--surface); }
.bg-sage { background: var(--sage); }
.bg-forest { background: var(--forest); color: #E8EDE6; }
.bg-forest h1, .bg-forest h2, .bg-forest h3, .bg-forest h4 { color: var(--warm-white); }
.bg-forest .eyebrow { color: var(--gold-light); }
.bg-forest .lede, .bg-forest .muted { color: #C9D3C8; }
.bg-forest a:not(.btn) { color: var(--gold-light); }

.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.split { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split > * { flex: 1 1 22rem; min-width: 0; }
.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.spread { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.min0 { min-width: 0; }

/* Page header for interior pages */
.page-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem); }
.page-hero .container { display: grid; gap: var(--sp-4); }
.page-hero h1 { font-size: var(--fs-2xl); max-width: 22ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}