/* ============================================================================
   OpenFunctional — Design System ("Atelier")
   The single source of truth for the OpenFunctional look going forward.
   Quiet-luxury layout and typography over the brand palette (green, cream,
   gold). Link this on any page, then layer page-specific layout on top.

   Palette is the OpenFunctional brand (the "Brand" option from the lookbook).
   Emblem note: the wordmark ships now; the green brackets are held for the
   trademarked brand launch and will drop in as the logo lockup later.
   ============================================================================ */

:root{
  /* Brand palette */
  --bg:#F1EFE8;            /* warm paper */
  --surface:#FFFFFF;       /* cards, panels */
  --surface-2:#EAE7DD;     /* recessed sections */
  --panel:#E4E0D4;         /* deeper panel */
  --ink:#2C2C2A;           /* near-black, warm */
  --muted:#6B6B66;         /* secondary text */
  --line:rgba(44,44,42,0.14);
  --line-strong:rgba(44,44,42,0.26);
  --accent:#1D9E75;        /* brand green */
  --accent-ink:#FFFFFF;
  --accent-glow:rgba(29,158,117,0.12);
  --gold:#EF9F27;          /* brand gold */
  --gold-soft:#F6ECD6;
  --hero:linear-gradient(135deg,#E7F1EC 0%,#D9E9E1 55%,#EAE3CF 100%);

  /* Type */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- Type primitives ---------------------------------------------------- */
.af-serif{font-family:var(--serif);}
.af-h{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-0.01em;}
.af-eyebrow{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);}
.af-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.af-wordmark{font-family:var(--serif);font-weight:600;letter-spacing:.16em;text-transform:uppercase;}

/* ---- Controls ----------------------------------------------------------- */
.af-input{width:100%;padding:14px 16px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink);font-family:var(--sans);font-size:15px;outline:none;border-radius:0;
  transition:border-color .2s, box-shadow .2s;}
.af-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.af-input::placeholder{color:rgba(44,44,42,0.35);}

.af-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:16px 28px;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);
  cursor:pointer;border-radius:0;transition:transform .2s, opacity .2s;}
.af-btn:hover{transform:translateY(-1px);opacity:.93;}
.af-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.af-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.af-btn-ghost:hover{border-color:var(--ink);}

.af-link{color:var(--accent);text-decoration:none;font-weight:500;cursor:pointer;}
.af-link:hover{text-decoration:underline;}
.af-link-quiet{color:var(--muted);text-decoration:none;cursor:pointer;}
.af-link-quiet:hover{color:var(--ink);}